为div设置样式
背景
- 颜色背景
//实现一
.bg0{
background-color: #abcdef;/*或者 background: #abcdef;*/
opacity: 0.2;/*透明度*/
}
//实现二
.bg0{
background-color: rgba(100,200,100,0.5);
}
//颜色渐变
.bg{
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));
background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);
background:-ms-linear-gradient(top, #fff, #0000ff);
}
- 圆角背景 ie支持不是很好
.bg0{
background-color: #abcdef;
-moz-border-radius:20px; /*firfox*/
-webkit-border-radius:20px; /* Safari 和 Chrome */
border-radius:20px 15px 10px 0px; /*顺时针设置圆角 Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
}
- 边框背景
.bg0{
background-color: #abcdef;
border:5px solid #ccc;
}
- 阴影背景 ie支持不是很好
.bg0{
background-color: #abcdef;
-webkit-box-shadow: 3px 10px 20px pink;
-moz-box-shadow: 3px 10px 20px pink;
box-shadow: 3px 10px 20px pink; /*参数分别为x阴影偏移,y阴影偏移，模糊度，阴影颜色(默认黑色)*/
}
- 圆形背景 ie支持不是很好
.bg0{
background-color: #abcdef;
-moz-border-radius:100px; /*firfox*/
-webkit-border-radius:100px; /*chrome与ie*/
border-radius:100px;/*100px等于div的长和宽*/
border:solid
}
- 引用图片
//实现一
//平铺(图片较小时会显示多个该图片，平铺主要用于画线,相当于低配.9)
background:url(../img/achor.png);
//不平铺，从原点开始显示1个图片
background: url(../img/achor.png) no-repeat;
//图片居中
background: url(../img/achor.png) no-repeat;
background-position: center;
//图片居下和右
background: url(../img/achor.png) no-repeat;
background-position:right bottom;
//图片拉伸居中
background: url(../img/achor.png) no-repeat;
background-size: 120px 120px;
background-position: center center;
//实现二
background-image: url(../img/achor.png);
background-repeat: no-repeat;
background-position: center;
- 点击变色
//实现一
.dv{
width: 300px;
height: 300px;
}
.dv:hover{
background-color: yellow;
}
.dv:active{
background-color: orangered;
}
//实现二
8.圆角渐变阴影边框背景
.bg2{
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));
border:5px solid #ccc;
border-radius:20px 15px 10px 0px;
box-shadow: 3px 3px 3px;
}
9.动画背景 css3
//颜色变化
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
.bg5{
animation: myfirst 5s;
}
//位移动画(需要position:relative)
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
.bg5{
animation: myfirst 5s;
float: left;
width: 100px;
height: 100px;
position:relative;
}
表单元素样式
//圆角input并设置fockus样式与placeholder颜色
.search{
border: 1px solid #666666;
border-radius: 15px;
height: 25px;
padding: 0px 15px;
outline:none
}
.search:focus{
border: 1px solid crimson;
border-radius: 15px;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #7FFF00;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #7FFF00;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #7FFF00;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #7FFF00;
}
//
display属性
/*
*不同标签自带不同的display属性
*h1、h2、div等的display默认为block
*input、a等标签默认inline
*/
//隐藏div(不占用位置)
display: none;
//块级元素(前面加换行符)
display:block;
//内联元素(前后都不加换行符)
display:inline;
//表格元素(可实现div的等高)
display:table;
display:table-cell;
兼容不同浏览器的属性
//!important本来的作用是提高样式的优先权然而
CSS中的!important一般都是用于对低版本的除了iE 6 ，用来做hack的
http://www.w3cn.org/article/tips/2004/91.html
在设计《网页设计师》页面的时候，有一个问题一直困扰着我，主菜单在IE和其他(Mozilla、Opera等)浏览器里显示的效果偏差2px。截图如下：
IE中的效果
Mozilla Firefox中的效果
这是因为IE对盒之间距离的解释的bug造成的(参考onestab的" [浮动模型的问题](http://www.onestab.net/a/pie/floatmodel.html) ")。我一直没有解决这个问题，直到我翻译 "[ 表格对决CSS--一场生死之战](http://www.w3cn.org/article/translate/2004/89.html) "时，作者的一个技巧提示帮我找到了解决的方法：用!important。
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：[W3.org的解释](http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules))。
//hack css 写法
对此，还有其他hack [css](https://www.baidu.com/s?wd=css&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dWnynzrHbYrADsuW--uyn30ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHRsPHR3rj6k)的写法。
如：color:red;
//一般浏览器识别，字体颜色为红color:blue \9;
//IE8,IE9及以上版本识别，字体颜色为蓝*color:orange;
//IE7识别，字体颜色为橘色_color:black;
//IE6识别，颜色为黑
布局
margin与padding
html的margin和padding与android的有一定差距！
html的margin-top，如果上边有元素 则正常margin，如果没有则父元素实现该margin-top,且如果父元素也设置了margin-top，则取最大,且如果第一个元素设置了position则不会让父元素实现,不是很理解这个设计。
而android的只是相对于父元素margin,不会变成父元素margin,不过还有一点需要注意，html的margin-top如果是百分数时，则子元素取父元素的高度而父元素取他的父元素的高度。
html的padding会增加该元素的宽高，而android的不会
默认布局
//默认。位置设置为 static 的元素，它始终会处于页面流给予的位置
//（static 元素会忽略任何 top、bottom、left 或 right 声明）。
相对布局
相对布局使left、top、bottom、right有效,相对于自身,margin也有效,使用该样式不会影响其他div位置(没有任何效果意味着没用？)
实际上相对布局是配合绝对布局使用的
绝对布局的父元素如果没有设置position则相对于body
如果设置了position为reletive则相对于该元素
如果设置left:50%，则该值会取父元素的宽度计算
绝对布局
绝对布局使left、top、bottom、right有效,使margin无效
当父元素position为absolute或relative时，left:50%计算回去父元素的width。
当父元素没有设置position时left:50%则会获取浏览器的宽度
当position设置为absolute时，不设置top则top和原来一致
水平居中
//div在div中横向居中(对没有初始宽度的div或其他标签无效,意思是文字居中无法使用该样式)
.h_center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
//文字在div中横向居中
.tv_center{
text-align: center;
display: block;//非块级元素需加上这行
}
垂直居中
//单行文本垂直居中
.tv_v_center{
line-height: 100px;
height: 100px;/*行高与高度和div的高度一致*/
overflow: hidden;
}
//多行文本父元素固定高度的垂直居中
.p_tv_v_center{/*父div使用*/
display: table;
}
.tv_v_center2{/*子元素使用*/
vertical-align:middle;/*利用table中的tr、td有vertical-align的属性实现居中*/
display:table-cell;
}
//固定宽高的div垂直居中
//实现一 纯css实现 (需要知道宽高)
.dv_center{
position: absolute;/*父元素需要设置position为relative*/
left: 50%;
top: 50%;
margin-left:-25px;/*为子div宽度的一半*/
margin-top:-25px;/*为子div高度的一半*/
}
//实现二 jquery实现(无需知道元素宽高)
var arr = $(".jquery_div_center");
for(var i = 0;iandroid版layout.css与layout.js
利用css与js轻松实现各种布局
layout.css
.horizontal{
}
.center_vertical{
top: 50%;
position: absolute;
/*margin-top:-height/2*/
}
.center_horizontal{
left: 50%;
position: absolute;
/*margin-left:-width/2*/
}
.text_center{
text-align: center;
vertical-align:middle;
display:table-cell;
overflow: hidden;
}
.text_center_vertical{
vertical-align:middle;
display:table-cell;
overflow: hidden;
}
.text_center_horizontal{
text-align: center;
}
.center{
top: 50%;
left: 50%;
position: absolute;
/*margin-top:-height/2*/
/*margin-left:-width/2*/
}
.gravity{
/*position: relative;*/
}
.left{
left: 0px;
position: absolute;
}
.right{
right: 0px;
position: absolute;
}
.bottom{
bottom: 0px;
position: absolute;
}
.top{
top: 0px;
position: absolute;
}
layout.js
var layout = $(".gravity");
for(var i = 0; i < layout.length; i++) {
var dv = layout.eq(i);
var cs = dv.css("position");
if(cs == "absolute" || cs == "relative") {
} else {
dv.css("position", "relative");
}
}
var childs = layout.find(".center_vertical");
for(var i = 0; i < childs.length; i++) {
var dv = childs.eq(i);
dv.css("margin-top", -dv.innerHeight() / 2);
}
childs = layout.find(".center_horizontal");
for(var i = 0; i < childs.length; i++) {
var dv = childs.eq(i);
dv.css("margin-left", -dv.innerWidth() / 2);
}
childs = layout.find(".center");
for(var i = 0; i < childs.length; i++) {
var dv = childs.eq(i);
dv.css("margin-top", -dv.innerHeight() / 2);
dv.css("margin-left", -dv.innerWidth() / 2);
}
ll = $(".horizontal");
for(var i = 0; i < ll.length; i++) {
var dv = ll.eq(i);
dv.children().css('float', 'left');
var bl = dv.children().eq(0).hasClass("float");
}
$(".text_center").parent().css("display", "table");
$("text_center_vertical").parent().css("display", "table");
$("text_center_horizontal").parent().css("display", "table");
css匹配规则与加载顺序
//rp1起作用
//还是rp1起作用
//因此class=""中的顺序并不能影响什么,而是css加载顺序会对样式产生影响
//根据加载顺序得到如下样式（css先加载的rp0，后加载的rp1）所以:
width: 50px;
height: 50px;
background: #CCCC77;
width: 100px;//覆盖50px
height: 100px;//覆盖50px
background: #57A957;//覆盖background
2.父子的顺序
//显示为rp0 rp2
3.多重父子顺序
//有效
//无效
4.id选择器顺序
//id0起作用
//id1起作用
css选择规则
//无效
//无效
//无效
//有效
//有效(中间虽然有rp2但是因为rp1为rp0的子,这一点需要特别注意)
CSS3 Flex布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html