學(xué)習(xí)地址：http://zh.learnlayout.com/display.html
1，把display設(shè)置成none元素不會占據(jù)它本來應(yīng)該顯示的空間，但是設(shè)置成visibility: hidden;還會占據(jù)空間。
2，把li元素修改成 inline，可以制作成水平菜單。
3，盒模型。當你設(shè)置了元素的寬度，實際展現(xiàn)的元素卻超出你的設(shè)置：這是因為元素的邊框和內(nèi)邊距會撐開元素。當你設(shè)置一個元素為box-sizing: border-box;時，此元素的內(nèi)邊距和邊框不再會增加它的寬度。不過box-sizing是個很新的屬性，目前你還應(yīng)該使用-webkit（蘋果瀏覽器）-和-moz-（火狐瀏覽器）前綴。這可以啟用特定瀏覽器實驗中的特性。同時記住它是支持IE8+的。
4，在使用浮動的時候經(jīng)常會遇到一個古怪的事情：圖片比包含它的元素還高， 而且它是浮動的，于是它就溢出到了容器外面！有一種比較丑陋的方法可以解決這個問題，它叫做清除浮動overflow:auto;? ? 如果你想要支持IE6，你就需要再加入如下樣式：overflow:auto; zoom:1;
學(xué)習(xí)地址：http://www.5imoban.net/jiaocheng/div+css/2014/0311/312.html
CSS3 Media Queries
1，直接在link中判斷設(shè)備的尺寸，然后引用不同的css文件。
<link rel="stylesheet" type=''text/css'' href=''styleB.css'' media=''screen and (min-width:600px) and (max-width:800px)''>,意思就是當屏幕的寬度大于600小于800的時候應(yīng)用styleB.css樣式文件
2，另一種方式是直接寫在style標簽里：
<style>@media screen and (max-width:600px){.class{blackground:#ccc}}</style>,意思就是當屏幕小于600時應(yīng)用.class{blackground:#ccc}。
