可以把盒模型看成乙個手機盒子
box：盒子，每個元素在頁面中都會生成乙個矩形區域（盒子）
盒子型別：
1. 行盒：display等於inline（預設值）的元素
2. 塊盒：display等於block的元素
行盒在頁面中不換行，塊盒獨佔一行
瀏覽器預設樣式表設定的塊盒：容器元素、h1~h6、p
常見的行盒：span、a、img、video、audio
無論是行盒、還是塊盒，都由下面幾個部分組成，從內到外分別是：
1. 內容 content（裝手機的區域）
width、height，設定的是盒子內容的寬和高
內容部分通常叫做整個盒子的內容盒 content-box
2. 填充（內邊距）（手機與框之間的緩衝區） padding
盒子邊框到盒子內容的距離
padding-left、padding-right、padding-top、padding-bottom
padding：簡寫屬性
padding
:1px,2px,3px,4px;
/*依次為上右下左，順時針進行*/
邊框=邊框樣式+邊框寬度+邊框顏色
邊框樣式：border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-top-color
border-right-color
border-bottom-color
border-left-color
邊框到其他盒子的距離
margin-top、margin-left、margin-right、margin-bottom
速寫屬性margin
margin
:1px,2px,3px,4px;
/*依次設定上、右、下、左四個外邊距*/
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
css 行內 塊級 盒模型
行內元素 a span strong img input select 和其他元素都在一行上 高，行高及頂和底邊距不可改變 寬度就是它的文字或的寬度，不可改變。塊級元素 h1 h6 div p ul ol li dl dt dd 總是在新行上開始 高度，行高以及頂和底邊距都可控制 寬度預設是它的容器...
CSS 盒模型和怪異盒模型
盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...