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文本阴影//水平;垂直;颜色text-shandow: 1px 1px #fff;//水平;垂直;模糊直径;颜色text-shandow: 1px 1px .3em #fff;渐变默认下渐变是垂直方向的；也可以传递一个位置参数来改变方向linear-gradient(#ccc, #ddd, white);//设定一个倾斜度linear-gradient(-45deg, #ccc, #fff);//水平渐变linear-gradient(left, #ccc, #fff);//设置颜色停止值linear-gradient(white, #ddd 20%, black);选择器//选中的第一个元素:first-child//选中的最后一个元素:last-child//选中的元素是其父元素的唯一子元素:only-child//选中当前URL的哈希中的目标元素:target//选中复选框以被勾选的元素:checked∙nth-child选择器nth-child(n);nth-child(even);/nth-child(2n);nth-child(odd);/nth-child(2n+1);∙直接后代选择器>∙否定选择器:not(.current)ie>=9过渡transition: 持续时间，属性， [动画类型];//多个动画transition: 2s opacity, .5s height ease-in;定时函数种类∙linear∙ease-in∙ease-out∙ease-in-out例子div {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;}div {position: absolute;left: 10px;-moz-transition: 2s left-webkit-transition: 2s left;-o-transition: 2s left ;transition:2s left;}div:hover{position: absolute;left:100px;}firefox:-moz-; chrome:-webkit-; safari: -webkit-; ie>=10; opear: -o-;css3 总结03∙box-flex: 设置或检索弹性盒模型对象的子元素如何分配其剩余空间。

∙<ul id="box"><li>a</li><li>b</li><li>c</li></ul>#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:n one;}#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;}.vbox{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属性却可以修改默认行为#sidebar{-webkit-box-flex: 0;-moz-box-flex: 0;box-flex: 0;width: 200px;}#content{-webkit-box-flex: 1;-moz-box-flex: 1;box-flex：1；}如果设置box-flex为0，就指定了该元素不允许扩充；相反设置1或更大的数值该元素会自动扩充可利用的内容空间。

上面对侧边栏设置flex为0；而主内容区设置flex为1字体@font-face{font-family: 'Bitstream'src: url('/Bitstream.ttf');}#font-example{font-family: Bitstream;}css实例--文字/字体使用自定义字体：∙在CSS2中font-family属性只能使用两个字体：∙通用字体：Serif字体，Sans-serif字体，Monospace字体，Cursive字体,Fantasy字体;∙特定字体：如Times,Courier等，要求计算机已经安装该字体；使用@font-face：1 @font-face{2 3 4 5 6 7 font-family:example;src:url('example.ttf') ,url('example.eot');/*IE9+*/}div{font-family:example; }文本缩进和首字符下沉：∙缩进：text-indent; ∙ 首字符设置： :first-letter;文本被选中：1 2 3 ::selection{}//老版本的firefox ::-moz-selection{}调整文字，字符间距：∙ demo:∙word-spacing ：空格距离； ∙letter-spacing ：子间距离； ∙line-heigh ：文本行间距； ∙white-space ：空格，换行符的控制； ∙ 强制换行：word-wrap: break-word; word-break: normal;文字阴影/框阴影：∙text-shadow ： h-shadow(必须) v-shadow(必须) blur color; ∙ 文字毛玻璃效果：∙box-shadow: h-shadow(必须) v-shadow(必须) blur spread color inset;文本溢出处理： ∙ demo:∙overflow ：主要在对高度的处理，如果宽度不够，默认会换行； ∙ text-overflow ：主要对宽度的处理，在设置white-space: nowrap; 阻止换行之后可以设置默认（clip ）或省略（ellipsis ）;高级文字设置：∙ 金属质感文字∙linear-gradient: (direction, color-stop1, color-stop2, ...);隐藏文本： ∙使用display; ∙ 使用opacity;∙ 使用text-indent; 1 2 3 4 h1{text-indent:-9999px............}∙ 使用定位； 1 2 3 4 5 h1{position:absolute;top:-9999px;left:-9999px;}文字旋转：1 2 3 -ms-transform:rotate(30deg); /* IE 9 */-webkit-transform:rotate(30deg); /* Chrome,Safari, Opera */transform:rotate(30deg);结构性伪类 E:root 匹配文档的根元素。