CSS 框模型概述
1、padding屬性
按照上、右、下量蕊、左的順序分別設(shè)置各邊的內(nèi)邊距,各邊均可以使用不同的單位或百分比值:
h1 {padding: 10px 0.25em 2ex 20%;}
或者
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
百分?jǐn)?shù)值是相對于其父元素的 width 計(jì)算的艇挨,所以残炮,如果父元素的 width 改變,它們也會改變雷袋。
2吉殃、border邊框
border-style
屬性定義了 10 個不同的非 inherit 樣式辞居,包括 none
這兩種方法是等價的:
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
border-width
屬性為邊框指定寬度
p {border-style: solid; border-width: 15px 5px 15px 5px;}
下面的規(guī)則與上面的例子是等價的:
p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
border-color
屬性楷怒,它一次可以接受最多 4 個顏色值
p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
邊框顏色值 transparent。這個值用于創(chuàng)建有寬度的不可見邊框
輪廓 outline
繪制元素周圍的一條線瓦灶,
邊框外圍鸠删,突出元素
outline設(shè)置輪廓的樣式顏色 寬度
outline-style
outline-width
outline-color
輪廓的寬度不計(jì)算元素尺寸
3、CSS 外邊距
margin
h1 {margin : 10px 0px 15px 5px;}
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
4贼陶、CSS 尺寸 (Dimension)
屬性允許你控制元素的高度和寬度刃泡。同樣巧娱,它允許你增加行間距。
height(max min)
width(max min)
line-height
normal(默認(rèn))
number:設(shè)置數(shù)字烘贴,此數(shù)字會與當(dāng)前的字體尺寸相乘來設(shè)置行間距
length:設(shè)置固定的行間距禁添。
百分比:基于當(dāng)前字體尺寸的百分比行間距。
注意 :效果要通過改變?yōu)g覽器大小查看
5桨踪、CSS 外邊距合并
外邊距合并指的是老翘,當(dāng)兩個垂直外邊距相遇時,它們將形成一個外邊距锻离。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者铺峭。
示例圖:
當(dāng)一個元素出現(xiàn)在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并汽纠。
當(dāng)一個元素包含在另一個元素中時(假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開)卫键,它們的上和/或下外邊距也會發(fā)生合并。
假設(shè)有一個空元素虱朵,它有外邊距莉炉,但是沒有邊框或填充。在這種情況下碴犬,上外邊距與下外邊距就碰到了一起呢袱,它們會發(fā)生合并:
如果這個外邊距遇到另一個元素的外邊距,它還會發(fā)生合并: