每個html標記都可看作乙個盒子；
每個盒子都有：內容(content)、填充(padding)、邊框(border)、邊界(margin)四個屬性；
每個屬性都包括四個部分：上、右、下、左；這四部分可同時設定，也可分別設定；
內容是盒子模型的中心，它呈現了盒子的主要資訊。內容有三個屬性，width、height和overflow。
填充是內容和邊框之間的空間，可以被看作是內容的背景區域。
邊框是內容和填充的邊界。
邊界位於盒子的最外圍，它不是一條邊線而是新增在邊框外面的空間。對於兩個鄰近的都設定有邊界值的盒子，他們鄰近部分的邊界將不是二者邊界的相加，而是二者的重疊，若二者鄰近的邊界值大小不等，則取二者中較大的值。
盒子本身的大小計算：
width
width + padding-left + padding-right + border-left + border-right
height
height + padding-top + padding-bottom + border-top + border-bottom
css彈性盒模型詳解 介紹
官方的統一回答 彈性盒模型是指在父級改變大小的時候內部的自己元素也會相應的改變大小，即子集會按照父級的大小按比例自適應大小。彈性盒模型的提出可以解決一些響應式布局的需求 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專...
css盒模型及padding介紹
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區 補白 填充 邊框 邊界 外邊距 這就是盒模型。padding用法 1 padding是在盒子裡面，在盒子與內容之間。2 padding的作用 控制子元素在父...
CSS盒模型屬性詳細介紹
示例 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title document title 6 style type text css 7 8917.boxinner 22style 23head 24 body 25 di...