CSS层叠样式学习总结

css3 总结01

前缀

•chrome: -webkit-

•safari: -webkit-

•firefox: -moz-

•ie: -ms-

•opera: -o-

书写的时候应该先用有前缀的样式，再用无前缀的样式

颜色

•rgb(red, green, blue);

•rgba(red, green, blue, opacity[0-1]);

•hsl(色度，饱和度，亮度)；

色度为色轮的度数，0/360d代表红色，120代表绿色，240代表蓝色；

饱和度百分比值，100%表示完全显示该颜色；

亮度百分比值，0%代表黑色，100%代表白色，50%平均值

圆角

border-radius: 20px;//水平，垂直border-radius: 20px，20px;//左上，右上，右下，左下border-radius: 20px，20px 20px 20px;

下拉阴影

//水平；垂直；模糊直径；颜色box-shadow: 10px 5px 15px #000;//阴影box-shadow: 10px 5px 15px #000 inset;//水平；垂直；模糊直径；延展距离;颜色box-shadow: 10px 5px 15px 15px #000;//多阴影box-shadow: 0 1px 1px #fff inset, 5px 5px 10px #000;

chromw:-webkit-;safari:-webkit-;ie>=9

文本阴影

渐变

默认下渐变是垂直方向的；也可以传递一个位置参数来改变方向

选择器

//选中的第一个元素:first-child//选中的最后一个元素:last-child//选中的元素是其父元素的唯一子元素:only-child//选中当前URL的哈希中的目标元素:target

//选中复选框以被勾选的元素

:checked

•nth-child选择器

•直接后代选择器

•否定选择器

ie>=9

过渡

transition: 持续时间，属性，[动画类型];//多个动画transition: 2s opacity, .5s height ease-in;定时函数种类

•linear

•ease-in

•ease-out

•ease-in-out

例子

background: pink;

width: 50px;

height: 50px;

-moz-transition: 2s width ease-in, 2s height ease-out; /* Firefox 4 */

-webkit-transition: 2s width ease-in, 2s height ease-out; /* Safari and Chrome */

-o-transition: 2s width ease-in, 2s height ease-out; /* Opera */

transition: 2s width ease-in, 2s height ease-out;}div:hover{

width: 100px;

height: 150px;}

position: absolute;

left: 10px;

-moz-transition: 2s left

-webkit-transition: 2s left;

-o-transition: 2s left ;

transition:2s left;

}

position: absolute;

left: 100px;

}

css3 总结03

•

box-flex: 设置或检索弹性盒模型对象的子元素如何分配其剩余空间。

•

• a
• b
• c

#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}#box

li:nth-child(1){box-flex:1;}#box li:nth-child(2){box-flex:1;}#box li:nth-child(3){box-flex:2;}

注意box-flex只是动态分配父元素的剩余空间，而不是整个父元素的空间。如上例，父元素#box的宽度为240px，如果你认为a,b,c的宽度分别为60, 60, 120那么就错了，因为box-flex只是分配父元素的剩余空间而已，所以a,b,c所分到的应该是除容外所剩余下来的宽度

box-flex-group: 设置或检索弹性盒模型对象的子元素的所属组。

box-ordinal-group: 设置或检索弹性盒模型对象的子元素的显示顺序。

box-direction: 设置或检索弹性盒模型对象的子元素的排列顺序是否反转。

box-lines: 设置或检索弹性盒模型对象的子元素是否可以换行显示。

.hbox{

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-align: stretch;

-webkit-box-pack: start;

display: -moz-box;

-moz-box-orient: horizontal;

-moz-box-align: stretch;

-moz-box-pack: start;

}

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-box-align: stretch;

display: -moz-box;

-moz-box-orient: vertical;

-moz-box-align: stretch;

}

上面将display设置为-webkit-box或-moz-box-，然后设置子元素布局的方向。默认情况下，所有子元素都将自动扩充为父元素一样的大小。但通过设置box-flex属性却可以修改默认行为