CSS的盒子模型指的是什么

這篇文章主要講解了“CSS的盒子模型指的是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS的盒子模型指的是什么”吧！

一、什么是CSS？

CSS（Cascading Style Sheet）：層疊樣式表是將網(wǎng)頁(yè)的內(nèi)容與樣式進(jìn)行分離的一種語(yǔ)言，也就是在aspx或html中設(shè)計(jì)網(wǎng)頁(yè)的內(nèi)容，在CSS中設(shè)置網(wǎng)頁(yè)的樣式等。

二、什么是CSS盒子模型？

    網(wǎng)頁(yè)設(shè)計(jì)中常聽(tīng)的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性。這些屬性和我們?nèi)粘Ｉ钪泻凶拥膶傩允且粯右粯拥?。?nèi)容就是盒子里面裝的東西；而填充就是怕盒子里的東西損壞而添加的抗震材料；邊框就是指盒子本身了；至于邊界則說(shuō)明盒子之間要留一定的空隙，保持通風(fēng)。

三、兩種盒子模型

1、標(biāo)準(zhǔn)盒子模型

2、IE盒子模型                   

不仔細(xì)看還會(huì)以為這兩張圖一模一樣，不過(guò)當(dāng)你仔細(xì)端詳?shù)臅r(shí)候，你才會(huì)發(fā)現(xiàn)兩者之間的相同之處和不同之處。兩種盒子模型都包括content、padding、border、margin這四種屬性，但是IE盒子模型的content部分包括padding、border。一般情況下，為了能夠兼容多個(gè)瀏覽器，我們使用標(biāo)準(zhǔn)盒子模型，只需加上DOCTYPE聲明。

1）、屬性值的簡(jiǎn)寫(xiě)形式

①如果給出兩個(gè)屬性值，前者表示上下的屬性，后者表示左右的屬性。
②如果給出三個(gè)屬性值，前者表示上的屬性，中間數(shù)值表示左右的屬性，后者表示下的屬性。
③如果給出四個(gè)屬性值，則表示上、右、下、左的屬性。即順時(shí)針排序。

2）、標(biāo)準(zhǔn)流：標(biāo)準(zhǔn)流可以理解為標(biāo)簽的排列方式，設(shè)計(jì)標(biāo)簽的排列方式就產(chǎn)生了塊級(jí)元素和行內(nèi)元素。

3)、元素的分類(lèi)：

①塊級(jí)元素：每個(gè)塊級(jí)元素默認(rèn)占一行高度。表示方法<div></div>。

②行內(nèi)元素：和塊級(jí)元素相比，行內(nèi)元素可以理解為一行可以容納多個(gè)元素。表示方式為<span></span>。

四、盒子模型有什么用？

CSS中的盒子模型是為了讓我們充分理解div+css模型的定位功能，就是利用盒子模型這樣的布局方式代替了傳統(tǒng)的表格布局方式，所以盒子模型是在學(xué)習(xí)div+css布局方式中必須要學(xué)習(xí)的一個(gè)模型，通過(guò)這個(gè)模型能夠明白網(wǎng)頁(yè)中div和div之間的相對(duì)位置是如何布局的。

感謝各位的閱讀，以上就是“CSS的盒子模型指的是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS的盒子模型指的是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！