CsS 元素框模

2021-05-10 18:52:46 字數 798 閱讀 2774

元素框的最內部分是實際的內容,直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距,外邊距預設是透明的,因此不會遮擋其後的任何元素。

內邊距、邊框和外邊距都是可選的,預設值是零。但是,許多元素將由使用者**樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。這可以分別進行,也可以使用通用選擇器對所有元素進行設定:

*

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

假設框的每個邊上有 10 個畫素的外邊距和 5 個畫素的內邊距。如果希望這個元素框達到 100 個畫素,就需要將內容的寬度設定為 70 畫素,請看下圖:

#box

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

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

在 w3school,我們把 padding 和 margin 統一地稱為內邊距和外邊距。邊框內的空白是內邊距,邊框外的空白是外邊距,很容易記吧:)

CSS學習6(元素框)

所有文件元素都生成乙個矩形框,這稱為元素框 element box 它描述了乙個元素在文件布局中所佔的空間大小,因此,每個框影響著其他元素框的位置和大小。預設地,乙個可以顯示的文件由多個矩形框組成,這些矩形框分布開,從而不會相互重疊 一般情況下 另外,根據某些限制,這些框要盡可能地少佔空間,同時還要...

ICPC模板 取模逆元(模反元素)

目錄 取模逆元 模反元素 互素情形 非互素情形 抽象代數中的逆元指的是,對於現有的乙個集合s以及定義在其上的二元運算r,任意元素與其逆元進行這個運算後可以得到單位元。取模逆元的條件定義在同余式的乘法下,即對於兩個整數a和b,如果有 則將b稱作a的逆元,同時a也是b的逆元。取模逆元常常用在計算取模表示...

CSS學習 CSS 框模型 Box Model

所有html元素可以看作盒子,在css中,box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了框模型 box model 不同部分的說明 ...