參考
css 盒子模型(box model)
盒子模型 ("box model")是
css中的術語
,是形容
body
和body
內的元素在頁面上像盒子似的用作設計和布局時使用, body和
body
內的元素都可以看作盒子，盒模型本質上是乙個盒子
它包括：邊距(margin)，邊框
(border)
，內邊距(padding)，和實際內容
(connent)
。下面的說明了盒子模型(box model)：
margin（外邊距）
- 清除邊框區域。margin沒有背景顏色，它是完全透明
border（邊框）
- 邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響
padding（內邊距）
- 清除內容周圍的區域。會受到框中填充的背景顏色影響
content（內容）
- 盒子的內容，顯示文字和影象
盒子模型的內部結構
所以乙個盒子實際所占有的寬度（或高度）是由「內容+內邊距+邊框
+外邊距」組成的。
通過設定width和
height
的值來控制內容所佔的大小，並且對於任何乙個盒子，都可以分別設定
4邊(上右下左
)各自的border、
padding
和margin
，
那麼問題又來了,
總所周知行內(內聯
)元素在設定margin-top和
margin-bottom 和padding-top和
padding-bottom不完全能起作用
行內元素實際占有的寬度(或高度
)是什麼組成的
這裡先弄清楚什麼情況下對top bottom不能起作用
行內(內聯
)元素中的替換元素能起作用, 非替換元素不起作用
替換元素: 是指用作為其他內容佔位符的乙個元素。如： img、
input 等;
非替換元素: 是指內容包含在文件中的元素
如：span等；
以非替換元素舉例
要獲得乙個span的實際寬度和高度
, 可以用
offsetwidth
和 offsetheight
**頁面
在chorome 上箭頭獲取元素 和 列印台輸出
盒子模型 Box Model）
就是把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容 內邊距 padding 邊框 border 和外邊距 margin 組成。css就三個大模組 盒子模型 浮動 定位 所有的文件元素 標籤 都會生成乙個矩形框，我們成為元素框 element box 它描...
盒子模型（Box Model）
語法 border border width border style border color 注意 1 邊框寬度 border width 值描述 medium 預設寬度 thin 小於預設寬度 thick 大於預設寬度 指定大小 由浮點數字和單位識別符號組成的長度值，不可為負值如10px等 2...
CSS盒子模型（Box Model）
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model 不同部分的說明...