在講解css布局之前，我們需要提前知道一些知識，在css中，html中的標籤元素大體被分為三種不同的型別：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有：
、、盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設定它的粗細、樣式和顏色(邊框三個屬性)。
如下面**為 div 來設定邊框粗細為 2px、樣式為實心的、顏色為紅色的邊框：
div上面是 border **的縮寫形式，可以分開寫：
div注意：
1、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線）。
2、border-color（邊框顏色）中的顏色可設定為十六進製制顏色，如:
border-color:#888;//前面的井號不要忘掉。3、border-width（邊框寬度）中的寬度也可以設定為：
thin | medium | thick（但不是很常用），最常還是用象素（px）。
現在有乙個問題，如果有想為 p 標籤單獨設定下邊框，而其它三邊都不設定邊框樣式怎麼辦呢？css 樣式中允許只為乙個方向的邊框設定樣式：
div同樣可以使用下面**實現其它三邊(上、右、左)邊框的設定：
border-top:1px solid red;盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內定義的寬（width）和高（height），指的是填充以里的內容範圍。border-right:1px solid red;
border-left:1px solid red;
因此乙個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。
元素的高度也是同理。
比如：css**：
divhtml**：
文字內容元素的實際長度為：10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可檢視元素盒模型，如下圖：
元素內容與邊框之間是可以設定距離的，稱之為「填充」。填充也可分為上、右、下、左(順時針)。如下**：
div順序一定不要搞混。可以分開寫上面**：
div如果上、右、下、左的填充都為10px;可以這麼寫
div如果上下填充一樣為10px，左右一樣為20px，可以這麼寫：
div元素與其它元素之間的距離可以使用邊界（margin）來設定。邊界也是可分為上、右、下、左。如下**：
div也可以分開寫：
div如果上右下左的邊界都為10px;可以這麼寫：
div如果上下邊界一樣為10px，左右一樣為20px，可以這麼寫：
div總結一下：padding和margin的區別，
padding在邊框裡，margin在邊框外。
CSS 元素分類與盒模型
元素分類 在css中，html中的標籤元素大體被分為三種不同的型別 塊狀元素 內聯元素 又叫行內元素 和 內聯塊狀元素。常用的塊狀元素有 常用的內聯元素有 常用的內聯塊狀元素有 塊級元素 在html中 和 就是塊級元素。設定display block 就是將元素顯示為塊級元素。如下 就是將內聯元素a...
CSS元素和盒模型
元素分類 在ml中的標籤元素大體被分為三種不同的型別 塊狀元素 內聯元素 又叫行內元素 和內聯塊狀元素。常用的塊狀元素有 常用的內聯元素有 常用的內聯塊狀元素有 塊級元素 在html中 和 就是塊級元素。設定display block就是將元素顯示為塊級元素。如下 就是將內聯元素a轉換為塊狀元素，從...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...