在我們使用css進行網頁布局的時候，我們一定會用到的就是盒子模型，那麼盒模型是有兩個標準的，乙個是標準盒模型，乙個是ie盒模型(怪異盒模型)
而在討論標準盒模型之前首先要把盒模型的寫法知道
內容屬性
屬性實際作用
width
設定內容的寬度
height
設定內容的高度
max-width
設定內容的最大寬度
max-height
設定內容的最大高度
min-width
設定內容的最小寬度
min-height
設定內容的最小高度
邊框屬性
屬性實際作用
border
複合式寫法，用於把針對四個邊的屬性設定在乙個宣告
border-style
用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式
border-width
用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式
border-color
設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色
border-bottom
用於把下邊框的所有屬性設定到乙個宣告中
border-left
用於把左邊框的所有屬性設定到乙個宣告中
border-right
用於把右邊框的所有屬性設定到乙個宣告中
border-top
用於把上邊框的所有屬性設定到乙個宣告中
內邊距屬性
屬性實際作用
padding
複合式寫法，在乙個宣告中設定元素的所有內邊距屬性
padding-bottom
設定元素的下內邊距
padding-left
設定元素的左內邊距
padding-right
設定元素的右內邊距
padding-top
設定元素的上內邊距
外邊距屬性
屬性實際作用
margin
複合式寫法，在乙個宣告中設定元素的所有外邊距屬性
margin-bottom
設定元素的下外邊距
margin-left
設定元素的左外邊距
margin-right
設定元素的右外邊距
margin-top
設定元素的上外邊距
標準盒模型構造結構如下
在下面的**中分別對塊級元素div和行內元素span分別設定了同樣的屬性，讓我們來看看他的效果吧
div的盒子示意圖：
span盒子示意圖：
由此可以看出在同樣的屬性當中塊級元素和行內元素即使設定了同樣的屬性也不會以同樣的方式顯示
那麼在瀏覽器中行內元素span到底少了什麼樣的屬性呢？
根據示意圖在瀏覽器中的選中不難看出以下兩點
而對於div這類似的塊級元素根據示意圖可以看出他實際的盒子寬度與高度
盒子的實際寬度：200(width) + 40*2(padding-left/padding-right) + 2*2(boder-left/boder-right) + 20*2(margin-left/margin-right)
盒子的實際高度：100(height) + 40*2(padding-left/padding-right) + 2*2(boder-left/boder-right) + 20*2(margin-left/margin-right)
width:內容不僅包括content，還有padding以及border
margin：盒子的外邊距，主要清除盒子周圍的區域
外邊距合併（疊加）是乙個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。
簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
當乙個元素出現在另乙個元素上面時，第乙個元素的下外邊距與第二個元素的上外邊距會發生合併，如圖：
注：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併
那麼如何解決外邊距合併呢？
給父元素屬性中設定border：1px solid
利用overflow：hidden擋住
利用display：flex
利用inlin-block消除
當然還有其他的解決方案，這裡暫時不給大家一一枚舉了
關於CSS盒模型（box model）
剛完過年，大家是不是都在物色新的工作機會呢？可能在面試的時候，我們大多數人都會被問到乙個問題，那就是css盒模型。這個看似簡單的問題，實際上卻不太好回答，今天我們從以下幾個方面談一談css盒模型 1 什麼是盒模型 2 標準盒模型和怪異盒模型 ie盒模型 的區別 3 我們應該如何設定和選擇盒模型 4 ...
前端 關於CSS盒模型
矩形區域中各個屬性的取值只有margin可以取負值，只有width和margin可以取auto關鍵字，border不能為百分數，其他屬性都只能取 正的數字或者正的百分數。其中margin和padding設定的值是乙個塊區域的垂直高度，這塊區域的長和寬是隨著內容的width和height變化 而變化的...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...