!!!常用CSS代碼

標籤：style   blog   class   code   java   ext   

.box{overflow:auto;zoom:1;}

.box-in{display:inline-block;vertical-align:top;}

.border-box{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}/*ie8+*/

body,div,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}

（待補充）

 

 

 

 

清除浮動

<style type="text/css">div{background:#ddd;border:1px solid #000;width:400px;}.box{overflow:auto;zoom:1;}/*zoom:IE 6,7*/ img{float:right;} </style><h1>清除浮動</h1><div class="box"><img src="http://zh.learnlayout.com/images/ilta.png"></div><br><br><div><img src="http://zh.learnlayout.com/images/ilta.png"></div>

 

 

box-sizing：IE8及IE8+

<style type="text/css">div{background:#999;width: 500px;height:100px;margin: 20px;}.simple {  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;}.fancy {  padding: 50px;  border: solid #000 20px;  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;}.ccc{  border: solid #000 20px;}</style><h1>box-sizing : IE8及IE8+</h1><div class="simple">aaaaaaaa</div><div class="fancy">aaaaaaaaa</div><div class="ccc">aaaaaaaaa</div>

 

 

媒體查詢　　http://zh.learnlayout.com/media-queries.html  下次閱讀

Flexbox　　http://zh.learnlayout.com/flexbox.html  (擴充閱讀)

css架構　　http://zh.learnlayout.com/frameworks.html (擴充閱讀)