1011
技術社區[雲棲]
精通css（4）-盒模型，定位，浮動
終於到了css最重要的3個部分：盒模型，定位，浮動。先講盒模型吧。
1.盒模型概述
頁麵上的每個元素都被看成一個矩形框。這個框由元素的內容、內邊距、邊框和外邊距組成。
內邊距、邊框和外邊距都是可選的默認為0。但是許多元素由用戶代理樣式表設置外邊距和內邊距。所以不見的一定是0。
在css中，width和height是指內容區域的寬度和高度，對邊距沒有影響。所以增加width/height/內容/邊框/內外邊距中的任何一個都會使盒子變大。值得高興的是，IE6在混雜模式的使用的是非標準的盒模型。他的width不是內容的寬度，而是內容+內邊距+邊框的總寬度。
1.1外邊距疊加
外邊距疊加條件：隻有普通文檔流中塊框的垂直外邊距才會發生疊加。行內框，浮動框，絕對定位框的外邊距都不會疊加。外邊距疊加有3類：
當兩個或更多垂直外邊距相遇時，大的外邊距會包含小的外邊距。這個外邊距的總和等於兩個疊加者中外邊距較大者；
當一個元素包含在另外一個元素中時，他們的頂外邊距也會疊加；
如果給一個空元素設置外邊距，那麼頂外邊距和底外邊距就會疊加：
2.可視化格式模型
CSS 有三種基本的定位機製：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框，行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。因此，修改行內框尺寸的唯一方法是修改行高或者水平邊距。
順便說一下display屬性
display:
display：none將元素隱藏起來,visible:hidden也是隱藏元素，但二者有區別：前者不占用空間，而後者雖然看不見，但還是占著地方！
display:inline-block將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。IE6,7不支持inline-block屬性，但是可以觸發塊元素。解決方法是先設置inline-block觸發塊元素，具有layout的特性，然後設置display:inline，使塊元素呈現內聯元素，此時layout的特性不會消失；或者直接設置display：inline，然後使用zoom：1觸發layout。下麵是通用做法：
{
display:inline-block;
display:inline;
zoom:1;
}
3.定位
先說一下position屬性:
絕對定位（absolute）：要注意的是絕對定位元素的位置與文檔流無關，因此不占據空間！就好比普通流中的元素看不見他，但是我們看的見！
固定定位（fixed）：絕對定位的一種，區別上麵說了（fixed相對瀏覽器窗口定位，absolute相對第一個非static父元素定位）。不過高興的是，IE6不支持固定定位，IE7部分支持，但有許多bug。
相對定位：相對於普通流中正常位置位移，但是元素仍然占據原來的空間，所以移動元素可能會覆蓋其他框。
4.浮動
浮動的框可以左右移動，直到它的外邊緣碰到包含框或另外一個浮動框邊緣。浮動不在文檔的普通流中。
有浮動就可能會要clear清浮，以下是clear屬性:
清浮常用偽類的方法：
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
這個方法在IE6，7下有bug，需要給浮動塊添加haslayout來撐高：
.clearfix {
zoom:1;
}
還可以用overflow：hidden屬性。因為overflow會迫使父元素貼緊其內對象的內容，從而達到清浮的作用，但也可能觸發滑動條或者隱藏內容。
浮動的具體說明參考w3c：https://www.w3school.com.cn/css/css_positioning_floating.asp
理論的東西就先講這些吧，接下來開始實踐了！
最後更新：2017-04-03 14:54:04