盒子模型是html+css中最核心的基礎(chǔ)知識(shí)，理解了這個(gè)重要的概念才能更好的排版，進(jìn)行頁(yè)面布局。下面是自己積累和總結(jié)的關(guān)于css盒子模型的知識(shí)^_^，希望對(duì)初學(xué)者有用。

一、css盒子模型概念

CSS css盒子模型 又稱框模型 (Box Model) ，包含了元素內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)幾個(gè)要素。如圖：

圖中最內(nèi)部的框是元素的實(shí)際內(nèi)容，也就是元素框，緊挨著元素框外部的是內(nèi)邊距padding，其次是邊框(border)，然后最外層是外邊距(margin)，整個(gè)構(gòu)成了框模型。通常我們?cè)O(shè)置的背景顯示區(qū)域，就是內(nèi)容、內(nèi)邊距、邊框這一塊范圍。而外邊距margin是透明的，不會(huì)遮擋周邊的其他元素。

那么，元素框的總寬度 = 元素(element)的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；

元素框的總高度 = 元素(element)的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度。

二、css 外邊距合并(疊加)

兩個(gè)上下方向相鄰的元素框垂直相遇時(shí)，外邊距會(huì)合并，合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距中較高的那個(gè)邊距值，如圖：

比較容易理解，所以在頁(yè)面中有時(shí)候遇到實(shí)際情況是需要考慮這個(gè)因素的。當(dāng)然外邊距合并其實(shí)也有存在的意義，如下圖：

需要注意的是：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

css reset 中也會(huì)經(jīng)常用到

*{margin:0;padding:0;

}

三、box-sizing屬性介紹

box-sizing屬性是用戶界面屬性里的一種，之所以介紹它，是因?yàn)檫@個(gè)屬性跟盒子模型有關(guān)，而且在css reset中有可能會(huì)用到它。

box-sizing : content-box|border-box|inherit;

(1)content-box ,默認(rèn)值，可以使設(shè)置的寬度和高度值應(yīng)用到元素的內(nèi)容框。盒子的width只包含內(nèi)容。

即總寬度=margin+border+padding+width

(2)border-box , 設(shè)置的width值其實(shí)是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內(nèi)容

即總寬度=margin+width

很多CSS框架，都會(huì)對(duì)盒子模型的計(jì)算方法進(jìn)行簡(jiǎn)化。

(3) inherit ,?規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值

關(guān)于border-box的使用：

1 一個(gè)box寬度為100%，又想要兩邊有內(nèi)間距，這時(shí)候用就比較好

2 全局設(shè)置 border-box 很好，首先它符合直覺(jué)，其次它可以省去一次又一次的加加減減，它還有一個(gè)關(guān)鍵作用——讓有邊框的盒子正常使用百分比寬度。

四、實(shí)際開發(fā)中遇到的和框模型相關(guān)的應(yīng)用及小問(wèn)題。

1 margin越界(第一個(gè)子元素的margin-top和最后一個(gè)子元素的margin-bottom的越界問(wèn)題)

以第一個(gè)子元素的margin-top 為例：

當(dāng)父元素沒(méi)有邊框border時(shí)，設(shè)置第一個(gè)子元素的margin-top值的時(shí)候，會(huì)出現(xiàn)margin-top值加在父元素上的現(xiàn)象，解決方法有四個(gè)：

(1)給父元素加邊框border (副作用)

(2)給父元素設(shè)置padding值 ?(副作用)

(3)父元素添加 overflow：hidden (副作用)

(4)父元素加前置內(nèi)容生成。(推薦)

以第四種方法為例：

.parent{width:500px;height:500px;background-color:red;

}.parent : before{content:" ";display:table;

}.child{width:200px;height:200px;background-color:green;margin-top:50px;

}

總結(jié)

以上是生活随笔為你收集整理的简述对css盒子模型的理解_css 盒子模型理解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。