css的框模型速查

2021-09-23 21:17:05 字數 881 閱讀 6925

在css中,每個元素被視為乙個框。

每個框具有3個屬性:

border 框的邊框

margin 框與相鄰框之間的距離

padding 框內容和邊框之間的距離

對於margin存在一種特例:當元素底部頁邊空白接觸另乙個元素的頂部頁邊空白,只會顯示其中範圍較大的頁邊空白,如果2個頁邊空白大小相同,則最終的頁邊空白將等於其中乙個頁邊空白的大小。

預設情況下,塊級元素將占用頁面(或者包含它的元素)的整個寬度,而內聯元素將僅占用它需要的空間。

img元素貌似塊級元素,實際是內聯元素。

元素實際寬度計算大小為:

act_width = margin-left + border-left + padding-left + width +

padding-right + border-right + margin-right

padding屬性值的單位可以是百分比。如果指示body元素的內邊距是10%,則瀏覽器視窗寬度的5%將作為body元素內容內的每一邊的內邊距。如果指示乙個位於100畫素正方形單元格td元素具有10%的內邊距,則邊框正方形每一邊周圍將具有5個畫素的內邊距。元素的padding屬性不會繼承。

height 設定框的高度

width 設定框的寬度

line-height 設定文字行的高度(類似於行距設定)

max-height 設定框的最大高度

min-height 設定框的最小高度

max-width 設定框的最大寬度

min-height 設定框的最小寬度

overflow 屬性:

hidden 超出框範圍內容被隱藏

scroll 框內增加滾動欄

css的框模型速查

在css中,每個元素被視為乙個框。每個框具有3個屬性 border 框的邊框 margin 框與相鄰框之間的距離 padding 框內容和邊框之間的距離 對於margin存在一種特例 當元素底部頁邊空白接觸另乙個元素的頂部頁邊空白,只會顯示其中範圍較大的頁邊空白,如果2個頁邊空白大小相同,則最終的頁...

CSS 的框模型

內邊距 邊框和外邊距都是可選的,預設值是零。但是,許多元素將由使用者 樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。這可以分別進行,也可以使用通用選擇器對所有元素進行設定 在 css 中,width 和 height 指的是內容區域的寬度...

CSS 框模型(八)

css 框模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。元素框的最內部分是實際的內容,直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距,外邊距預設是透明的,因此不會遮擋其後的任何元素。一旦為頁面設定了恰當的 dtd,大多數瀏...