盒模型

點擊打開視頻教程

創(chuàng)新互聯(lián)專注骨干網(wǎng)絡(luò)服務(wù)器租用十余年，服務(wù)更有保障！服務(wù)器租用，達(dá)州主機(jī)托管 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問。靈活、實現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

標(biāo)準(zhǔn)盒模型、怪異盒模型（IE盒模型）

什么是盒模型？

盒模型的作用：規(guī)定了網(wǎng)頁元素如何顯示以及元素間的相互關(guān)系
盒模型的概念：盒模型是css布局的基石，它規(guī)定了網(wǎng)頁元素如何顯示以及元素間的相互關(guān)系。
css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內(nèi)容區(qū)、補(bǔ)白（填充）、
邊框、邊界(外邊距)這就是盒模型。

2、盒模型是怎樣組成的？

盒模型的組成部分
	content（內(nèi)容區(qū)）+ padding（填充區(qū)）+ border（邊框區(qū)）+ margin（外邊界區(qū)）

效果：

標(biāo)準(zhǔn)盒模型的組成：寬高（content）+ padding + border + margin
怪異盒模型的組成：width（content+border+padding）+ margin

可以用css屬性更改是標(biāo)準(zhǔn)盒模型還是怪異盒模型

css屬性：box-sizing: border-box（怪異盒模型）/content-box（標(biāo)準(zhǔn)盒模型）

浮動布局

float 屬性定義元素往哪個方向浮動。
float元素脫離了文檔流，但是不脫離文本流

浮動布局主要是利用float屬性來實現(xiàn)，可以給元素設(shè)置float屬性讓元素脫離文檔流，然后設(shè)置left和right來邊改元素在文檔上的展示位置以此形成我們想要的布局方式，下面用浮動布局完成一個左右寬度固定中間自適應(yīng)的三欄布局。

float實現(xiàn)三欄布局

效果：

注意：使用float浮動布局middle中間的元素在html中要放在最后，否則黃色區(qū)域會換行，因為div是塊級元素使用margin后右邊區(qū)域也是屬于它的。

注意：如果給非float元素加上寬度，一定要記得給此元素加上margin-left/right屬性， 否側(cè)非float元素會被float元素覆蓋住一部份。

定位布局

定位布局是利用position來實現(xiàn)，可以使用absolute絕對定位移動元素的位置，使用絕對定位也會使元素脫離文檔流，下面使用絕對定位實現(xiàn)一個三欄布局。

絕對定位實現(xiàn)三欄布局：

效果：

表格布局

表格是很嚴(yán)格的一行就是一行，一列就是一列，并且他們的位置不會發(fā)生變化，所以我們可以利用表格布局來實現(xiàn)我們想要的布局，在以前還沒有出現(xiàn)這些浮動、定位屬性的時候表格用的是最多的布局方式。通過給父元素設(shè)置display: table;，給子元素設(shè)置display: table-cell;即可實現(xiàn)三欄布局，使用表格布局還是比較方便的，幾乎不需要寫什么樣式就可以實現(xiàn)。

表格布局實現(xiàn)三欄布局：

效果：

flex布局

flex布局也叫彈性布局，是利用css3新出的屬性display: flex實現(xiàn)的，
這種布局方式很方便，也不會對文檔的結(jié)構(gòu)改變，是當(dāng)下最熱門的一種布局方式，
建議每個前端開發(fā)者都要掌握。

flex布局實現(xiàn)三欄布局：

效果：

grid 布局（柵格布局）
百分比布局
響應(yīng)式布局
等等....

如對您有幫助，請點擊跳轉(zhuǎn)到B站一鍵三連哦！感謝支持！