CSS框（盒）模型

css框模型規定了元素處理元素內容，內邊距，邊框和外邊距的方式。

css框模型概要

css內邊距

元素內邊距（padding）的位置在元素邊框和元素內容之間的空白區域。

當padding屬性定義乙個值時，規定元素四個邊的內邊距。

當padding屬性定義兩個值時，按照上下和左右的順序分別設定各邊的內邊距。

當padding屬性定義三個值時，按照上，左和右，下的順序分別設定各邊的內邊距。

當padding屬性定義四個值時，按照上，右，下，左的順序分別設定各邊的內邊距。

單邊內邊距

內邊距的百分比數值

css邊框

元素的邊框（border）是圍繞元素內容和內邊距的一條或多條線。

邊框與背景

邊框的樣式

object.style.borderstyle=

"dotted double"

描述none定義無邊框。

hidden與 「none」 相同。不過應用於除表以外。對於表，hidden用於解決邊框衝突。

dotted定義點狀邊框。在大多數瀏覽器中呈現為實線。

dashed定義虛線。在大多數瀏覽器中呈現為實線。

solid定義實線。

double定義雙線。雙線的寬度等於border-width的值。

groove定義 3d 凹槽邊框。其效果取決於border-color的值。

ridge定義 3d 壟狀邊框。其效果取決於border-color的值。

inset定義 3d inset 邊框。其效果取決於border-color的值。

outset定義 3d outset 邊框。其效果取決於border-color的值。

inherit規定應該從父元素繼承邊框樣式。

定義多種樣式

當border-style屬性定義乙個值時，規定元素四個邊的邊框。

當border-style屬性定義兩個值時，按照上下和左右的順序分別設定各邊的邊框。

當border-style屬性定義三個值時，按照上，左和右，下的順序分別設定各邊的邊框。

當border-style屬性定義四個值時，按照上，右，下，左的順序分別設定各邊的邊框。

定義單邊樣式

簡寫邊框樣式

p

object.style.borderwidth=

"thin thick"

描述length

允許您自定義邊框的寬度px或em

thin定義細的邊框

medium預設。定義中等的邊框

thick定義粗的邊框

inherit固定應該從父元素

定義單邊寬度

當border-width屬性定義乙個值時，規定元素四個邊的邊框寬度。

當border-width屬性定義兩個值時，按照上下和左右的順序分別設定各邊的邊框寬度。

當border-width屬性定義三個值時，按照上，左和右，下的順序分別設定各邊的邊框寬度。

當border-width屬性定義四個值時，按照上，右，下，左的順序分別設定各邊的邊框寬度。

沒有邊框

p

當border-color屬性定義乙個值時，規定元素四個邊的邊框寬度。

當border-color屬性定義兩個值時，按照上下和左右的順序分別設定各邊的邊框寬度。

當border-color屬性定義三個值時，按照上，左和右，下的順序分別設定各邊的邊框寬度。

當border-color屬性定義四個值時，按照上，右，下，左的順序分別設定各邊的邊框寬度。

定義單邊顏色

透明邊框

css外邊距

圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的「空白」。

設定外邊距最簡單的方法就是使用margin屬性，這個屬性接受任何長度單位，百分數值甚至負值。

當margin屬性定義乙個值時，規定元素四個邊的外邊距。

當margin屬性定義兩個值時，按照上下和左右的順序分別設定各邊的外邊距。

當margin屬性定義三個值時，按照上，左和右，下的順序分別設定各邊的外邊距。

當margin屬性定義四個值時，按照上，右，下，左的順序分別設定各邊的外邊距。

值複製

在內邊距，邊框，外邊距中都出現的屬性定義乙個值，兩個值，三個值或四個值的情況叫值複製。

css外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇是，他們將形成乙個外邊距。

合併後的外邊距的高度定於兩個發生合併的外邊距中高度中較大者。

css盒模型 標準盒模型 怪異盒模型

css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...

CSS 盒模型和怪異盒模型

盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...

css盒模型組成

css盒模型是本節教程的重點。前面幾個知識點，如果您會用 布局的話，就非常好理解和掌握了。這裡的盒模型是和table布局的乙個不同點。學 習web標準，首先要弄懂的就是這個盒模型，這就是div排版的核心所在。傳統的 排版是通過大小不一的 和 巢狀來定位排版網頁內容，改用css 排版後，就是通過由cs...