語法: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 不同部分的說明...