摘抄的一些代码还有自己总结的常用的代码~
1>浏览器样式统一
![CSS实用的代码段第1张](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![CSS实用的代码段第2张](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 *{ 2 margin:0px; 3 padding:0px; 4 }
2>清除浮动的方法
3>跨浏览器设置透明度
![CSS实用的代码段第3张](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![CSS实用的代码段第4张](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 .transparent{ 2 filter:alpha(opacity=50); /*IE*/ 3 -khtml-opacity:0.5; /*老版本的Safari*/ 4 -moz-opacity:0.5; /*Mozilla,Netscape*/ 5 opacity:0.5; /*fx,Safari,Opera*/ 6 }
4>设置圆角
![CSS实用的代码段第5张](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![CSS实用的代码段第6张](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 .circle{ 2 -webkit-border-radius:4px 2px 5px 10px; 3 -moz-border-radius:4px 2px 5px 10px; 4 -ms-border-radius:4px 2px 5px 10px; 5 -o-border-radius:4px 2px 5px 10px; 6 border-radius:4px 2px 5px 10px; 7 }
5>CSS字体属性简写(缩写)
![CSS实用的代码段第7张](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![CSS实用的代码段第8张](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 .title{ 2 font:font-style font-variant font-weight font-size line-height font-family 3 }
6>强制垂直滚动条
![CSS实用的代码段第9张](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![CSS实用的代码段第10张](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 html{height:101%}
7>设置自定义字体
![CSS实用的代码段第11张](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![CSS实用的代码段第12张](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 @font-face{ 2 font-family:'calamus'; 3 src:url('pictos/calamus.eot'); /* IE9 */ 4 src:url('pictos/calamus.eot') format('embedded-opentype'),/*IE6-IE8*/ 5 url('pictos/calamus.ttf') format('truetype'),/*Safari,Android,IOS*/ 6 url('pictos/calamus.woff') format('woff),/*Modern Browers*/ 7 url('pictos/calamus.svg') format('svg');/*Legacy IOS*/ 8 } 9 body{ 10 font-family:'calamus'; 11 }
8>文本对齐方式
![CSS实用的代码段第13张](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![CSS实用的代码段第14张](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 .content{ 2 text-align:center; /*把文本排列到中间。*/ 3 text-align:left; /*把文本排列到左边。默认值:由浏览器决定。*/ 4 text-align:right; /*把文本排列到右边。*/ 5 text-align:justify; /*实现两端对齐文本效果。*/ 6 text-align:inherit ; /*规定应该从父元素继承 text-align 属性的值。*/ 7 }
9>垂直居中内容
![CSS实用的代码段第15张](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![CSS实用的代码段第16张](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 .content{ 2 min-height:6.5em; 3 display:table-cell; 4 vertical-align:middle; 5 }
10>固定宽度的局中布局
![CSS实用的代码段第17张](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![CSS实用的代码段第18张](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 .page{ 2 width:800px; 3 margin:0 auto; 4 }
11>CSS3斑马条纹
![CSS实用的代码段第19张](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![CSS实用的代码段第20张](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 tbody tr:nth-child(odd){ 2 background-color:#ccc; 3 }
12>图片自适应大小
![CSS实用的代码段第21张](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![CSS实用的代码段第22张](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 .logo{ 2 background-image:url('img/calamus.jpg'); 3 background-size:100%; 4 width:100%; 5 padding-top:30%; 6 height:0; 7 text-indent:-9999px; 8 }