CSS盒模型簡介

一，什麼是CSS盒模型？

CSS盒模型就是在網頁設計中常常用到的CSS技術所使用的一種思惟模型。 形象的來講，一張網頁就像一個衣櫃那樣，由一個又一個「方框盒子」組成：

而這中間的每個盒子都是盒模型，它們組成一個大的盒模型（網頁），而降到盒模型就不能不提塊級元素和行內元素。

二，塊級元素和行內元素

• 什麼是塊級元素和行內元素 1.塊級元素：塊級元素全稱block level element，它是指在網頁中內容文本不管多少都能單獨佔領一行的元素，以下圖：

2.行內元素：行內元素全稱inline element，它是指在網中內容文本若是不能佔據超過整個父容器寬度則不會徹底佔據一行的元素，以下圖：

• 塊級元素和行內元素有哪些？ 1.塊級元素：<div>，<h1~h6>，<p>，<form>，<ul>，<ol>，<dl>，<dt>，<dd>，<li>，<table>，<tr>，<td>，<th>，<pre>等； 2.行內元素：<span>，<strong>，<em>，<a>，<img>，<br>，<button>，<input>，<label>，<select>，<textarea>，<code>，<script>等；
• 塊級元素和行內元素的區別 1.塊級元素能夠包含文本，塊級，行內元素，而行內元素只能包含文本和行內元素； 2.塊級元素單獨佔據一整行，行內元素佔據的位置只有自身文本寬度的空間； 3.塊級元素能夠設置寬高，行內元素設置寬高無效； 4.塊級元素的padding，margin值設置有效，行內元素padding，margin上下的值設置無效，但左右有效；

三，一個盒子的組成

在盒模型中，一個盒子由content，padding，border和margin組成的，它們的直觀是這樣的：

其中，最外層是margin，它是盒子的外邊距，有四個值，分別是上右下左，裏面一層是border，它是盒子的邊框，也是上右下左四個值，往下面的是padding，它是盒子的內邊距，也有上右下左四個值，最裏面一層是content區域，也就是文本內容展現的區域。

• margin：盒子外邊距，margin屬性有四個值，分別對應盒子的上右下左外邊距，能夠寫成下面這樣：

咱們也能夠採用縮寫的方式，以下：

• border： 1.盒子的邊框，有四個值，分別對應盒子的上右下左border，寫法以下：

它的縮寫和margin同樣。 2.border的其它經常使用屬性有： border-style邊框樣式， border-width邊框粗度， border-color邊框顏色， 一般咱們會縮寫爲：

3.border-radius：邊框半徑，border-radius 屬性是一個簡寫屬性，它有四個值，分別對應邊框的四個角， 順序是左上，右上，右下，左下，以下圖：

• padding：盒子內邊距，padding屬性有四個值，分別對應盒子的上右下左內邊距，能夠寫成下面這樣：

padding縮寫和margin同樣。

• content：文本內容區域，能夠用width和height設置該區域的大小；

四，展現一個完整的盒子結構

• content

• padding，border

• margin

五，W3C盒模型與IE盒模型的區別(參考知識點-IE 盒模型 vs 標準盒模型)

• IE盒模型 IE盒模型是指在ie678怪異模式（不添加 doctype）下使用 ie 盒模型，寬度=邊框+padding+內容寬度

• w3c盒模型（標準盒模型） chrome， ie9+, ie678(添加 doctype) 使用標準盒模型

• 他們的區別 首先來看一張圖

PS： 兩種盒模型的寬度計算是不同的； 1.IE盒模型的寬度計算：寬度=邊框+padding+內容寬度； 2.w3c盒模型的寬度計算：寬度= 內容寬度；