一.清浮动
1.由于浮动后,容器无法自适应内容高度需要清浮动.
父级:
.clear:after{content='';display:block;clear=both;}
IE6以下不兼容,增加:
.clear{zoom=1;}
二.选择器,伪类
属性选择器:
[title]{} /*拥有titile属性的元素*/
a[src^="https"] /*以https开头的每个元素*/
a[src$=".pdf"] /*以.pdf结尾的每个元素*/
a[src*="abc"] /*以包含abc的每个元素*/
结构化伪类(选择器):
li:nth-child(2n){} /*IE6-8不支持些属性*/
:nth-of-type(n) /*所有并列类型类型的第n个元素*/
目标伪类:
:target{} /*选取当前活动的目标元素*/
三.字体
text-shadow:h-shadow v-shadow blur color;
text-shadow:0 0 5px $f00; /*偏移量为0,可以构建光晕效果*/
text-shadow:0 0 5px $f00; /*偏移量相同,可以构建浮雕效果*/
text-stroke:1px #000; /*描边字体,只有webkit浏览器支持*/
/*字体像报纸一样分栏*/
div{column-count:3;column-gap:30px;column:1px dashed black} /*分栏数量 | 中间宽度 | 中间样式*/
四.背景
background-origin:border-box; /*背景图片平铺位置:边框左上角(border-box) | 内边距左上角(padding-box) | 内容左上角(content-box)*/
background-clip:padding-box; /*可在外边距内显示图片*/
五.动画
iHover-css动画库:http://gudh.github.io/ihover/dist/index.html
hover.css-鼠标效果库:http://ianlunn.github.io/Hover/ https://github.com/IanLunn/Hover
CSS3和JavaScript结合:http://visionmedia.github.io/move.js/
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
}
@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;}
}
六.弹性盒子
/*中间定宽,两边自适应三栏布局 部分浏览器与,大部分手机浏览器支持*/
.container{
margin:auto;
display: -webkit-box; /*父级必须声明*/
width:80%;
height:300px;
}
.left{-webkit-box-flex:3;} /*比例3*/
.main{width:600px;}
.right{-webkit-box-flex:4;}
/*盒子内容都是在父级设置*/
-webkit-box-orient:inline-axis; /*横向*/
-webkit-box-orient:block-axis; /*纵向*/
-webkit-box-align:start; /*竖直方向:start顶部对齐 | end底部对齐 | center居中对齐 | baseline内起始文字底边线对齐*/
-webkit-box-pack:justify; /*水平方向:start左浮 | end右浮 | center居中 | justify左右浮+中间自动间距*/
-webkit-box-deraction:reverse; /*内容加载顺序*/
七.css兼容性处理
1.Prefix free
2.Normalize 重置浏览器默认样式,可复用.
