關於盒模型

2021-05-21 22:59:52 字數 1905 閱讀 8684

一些css盒模型的比較重要的點滴。

css盒模型:

w3c標準中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的尺寸。

一旦為頁面設定了恰當的 dtd,大多數瀏覽器都會按照w3c標準模式呈現內容。然而 ie 5 和 6 的呈現卻是不正確的。根據 w3c 的規範,元素內容佔據的空間是由 width 屬性設定的,而內容周圍的 padding 和 border 值是另外計算的。不幸的是,ie5.x 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度,而是內容、內邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是,不要給元素新增具有指定寬度的內邊距,而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。

css 規範指出,邊框繪製在「元素的背景之上」。這很重要。

css2 指出背景只延伸到內邊距,而不是邊框。後來 css2.1 進行了更正:元素的背景是內容、內邊距和邊框區的背景。大多數瀏覽器都遵循 css2.1 定義,不過一些較老的瀏覽器可能會有不同的表現。

border-style

所有瀏覽器都支援 border-style 屬性。

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 規定應該從父元素繼承邊框樣式。 (任何的版本的 internet explorer (包括 ie8)都不支援屬性值 "inherit"。)

最不可**的邊框樣式是 double。它定義為兩條線的寬度再加上這兩條線之間的空間等於 border-width 值。不過,css 規範並沒有說其中一條線是否比另一條粗或者兩條線是否應該是一樣的粗,也沒有指出線之間的空間是否應當比線粗。所有這些都有使用者**決定,創作人員對這個決定沒有任何影響。

透明邊框

css2 引入了邊框顏色值 transparent。這個值用於建立有寬度的不可見邊框。

某種意義上說,利用 transparent,使用邊框就像是額外的內邊距一樣;此外還有乙個好處,就是能在你需要的使用使其可見。這種透明邊框相當於內邊距,因為元素的背景會延伸到邊框區域(如果有可見背景的話)。

css margin注意

netscape 和 ie 對 body 標籤定義的預設邊距(margin)值是 8px。而 opera 不是這樣。相反地,opera 將內部填充(padding)的預設值定義為 8px,因此如果希望對整個**的邊緣部分進行調整,並將之正確顯示於 opera 中,那麼必須對 body 的 padding 進行自定義。

css外邊距合併

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

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

外邊距合併初看上去可能有點奇怪,但是實際上,它是有意義的。以由幾個段落組成的典型文字頁面為例。第乙個段落上面的空間等於段落的上外邊距。如果沒有外邊距合併,後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合併,段落之間的上外邊距和下外邊距就合併在一起,這樣各處的距離就一致了。

關於盒模型

盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣外形和平行空間。他有 外邊距 margin 邊寬 border 內邊距 padding 內容 content 如下圖 簡單來說 內容 content 就是盒子裡裝的東西,填充 padding...

關於盒模型

盒模型 盒模型的分類 元素產生的盒子型別取決於display屬性,display none 不生成盒子 display inline 行盒 display block 塊盒,會自動換行 組成 margin外邊距 與其他盒子的距離,border邊框,padding 內邊距 邊框和內容之間的距離。con...

關於js 盒模型

1 內容就比如我們所種植的農作物所佔據的範圍。2 填充 padding 是指所種植農作物至區域邊緣之間的距離。3 邊框 border 是指每一塊土地邊緣的厚度。4 外邊距 margin 是指一塊土地與另一塊土地之間的間距。padding是盒子內部,內容與邊緣的距離 padding的作用是控制內容子元...