概述
div佈局實際上是通過使用盒模型、display、float、position來實現對頁面的佈局。
本文內容主要介紹兩種盒模型、display、float用法、position用法。
具體內容
默認的盒模型
box-size默認值爲content-type的情況。設置的寬度就是元素內容的寬度。如果增加了padding,border，都會使空間增大。
默認是content_box, width的寬度就是元素的寬度。
border_box盒模型
box-size值爲border-box的情況。width的寬度是content + 2 * padding + 2 * border。
display屬性
display:none是指讓元素隱藏，不顯示，並且不佔用頁面的空間，但是html有這個元素。
display:block是指讓元素置爲塊元素，獨佔一行，並且可以設置寬高。
display:inline是指讓元素置爲行標籤，元素按順序依次排列。無設置寬高屬性。
display:inline-block:是指讓元素同時擁有塊和行標籤的屬性。
float屬性
1.將元素排除在普通流之外
2.元素將不再頁面佔據空間
3.將浮動元素放置在包含框的左邊或者右邊
4.浮動元素依舊在包含框裏面
5.浮動元素的外邊緣不會超過其父元素的內邊緣。
6.浮動元素不會互相重疊。
7.浮動元素不會上下浮動。
8.任何元素一旦浮動，display將失效，可設置高寬。不會獨佔一行。
float元素:clear-both :取消其他元素浮動，對當前元素產生的影響
float元素:使用overflow：hidden，在不設置父元素高度的情況下,使父元素可以感知子類的高度
position屬性
position屬性指定一個元素的定位方法的類型。
absolute：絕對定位，不佔有原來的物理位置。絕對定位使用通常是父級定義position:relative定位，子級定義position:absolute絕對定位屬性，並且子級使用left或right和top或bottom進行絕對定位。如果沒有relative，那麼是相對於body的絕對定位。
relative：相對定位，是用來進行相對定位的，相對定位實際上被看作普通流定位模型的一部分，因爲元素的位置相對於它在普通流中的位置，原來的物理位置仍然存在。
fixed：固定定位，相對於瀏覽器的絕對定位，元素框從文檔流完全刪除。
案例分享
本文代碼GitHub地址（包含 模仿代碼）