盒子模型(Box Model)

2021-10-14 14:47:16 字數 1731 閱讀 4200

語法:border:border-width||border-style||border-color

注意:

(1)邊框寬度(border-width)值描述

medium

預設寬度

thin

小於預設寬度

thick

大於預設寬度

指定大小

由浮點數字和單位識別符號組成的長度值,不可為負值如10px等

(2)邊框樣式(border-style)值描述

none

預設無邊框。與任何指定的border-width值無關

solid

實線邊框

double

雙線邊框。兩條單線與其間隔的和等於指定的border-width值

hidden

隱藏邊框。ie不支援

dotted

點線dashed

虛線groove

根據border-color的值畫3d凹槽

ridge

根據border-color的值畫菱形邊框

inset

根據border-color的值畫3d凹邊

outset

根據border-color的值畫3d凸邊

寫法表示

padding:10px;1個值表示上下左右內邊距都為10px

padding:10px 5px;2個值表示上下內邊距為10px左右內邊距都為5px

padding:10px 4px 5px;3個值表示內邊距為10px,左右內邊距都為4px,內邊距為5px

padding:10px 4px 5px 7px;4個值表示內邊距為10px,內邊距都為4px,內邊距為5px,內邊距為7px.即順時針的順序

注意:(內邊距、外邊距都適用)

控制盒子與盒子之間的距離。即上(margin-top)下(margin-bottom)左(margin-left)右(margin-right)的外邊距。

外邊距可以讓塊級盒子水平居中,但必須滿足:

(1)盒子必須自動寬度

(2)盒子的左右外邊距設為auto

如:margin:0 auto;margin:auto;margin-right:auto;margin-left:auto;

注意:對行內元素無效,但可以給其父級的元素新增:text-align:center;(使文字水平居中)也可以使其達到水平居中

清除預設的內外邊距

*
在寫css**時,第一句先寫此**。

注意:行內元素為了照顧相容性,盡量只設定左右內外邊距,不要設定上下內外邊距

垂直外邊距合併(塌陷)

使用margin定義塊級元素垂直外邊距時,可能會出現外邊距合併

(1)相鄰塊元素垂直外邊距合併(塌陷)

(2)巢狀塊元素垂直外邊距合併(塌陷)

盒子模型 Box Model)

就是把html頁面中的元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。每個矩形都由元素的內容 內邊距 padding 邊框 border 和外邊距 margin 組成。css就三個大模組 盒子模型 浮動 定位 所有的文件元素 標籤 都會生成乙個矩形框,我們成為元素框 element box 它描...

盒子模型 box model

參考 css 盒子模型 box model 盒子模型 box model 是 css中的術語 是形容 body 和body 內的元素在頁面上像盒子似的用作設計和布局時使用,body和 body 內的元素都可以看作盒子,盒模型本質上是乙個盒子 它包括 邊距 margin 邊框 border 內邊距 p...

CSS盒子模型(Box Model)

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