關(guān)于邊框，什么是補(bǔ)白的問題？
盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個(gè)屬性)。
qq_一生之久_0
2016-04-01
1 回答
舉報(bào)
0/150
提交
取消
2016-04-01
盒模型--邊框（一）
盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個(gè)屬性)。
如下面代碼為div來設(shè)置邊框粗細(xì)為2px、樣式為實(shí)心的、顏色為紅色的邊框：
div{
? ?border:2px ?solid ?red;
}
上面是border代碼的縮寫形式，可以分開寫：
div{
? ?border-width:2px;
? ?border-style:solid;
? ?border-color:red;
}
注意：
1、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。
2、border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色，如:
border-color:#888;//前面的井號(hào)不要忘掉。
3、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：
thin | medium | thick（但不是很常用），最常還是用象素（px）。
e.g.
[html]?view plain?copy?print?
<!DOCTYPE?HTML>??
<html>??
<head>??
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">??
<title>邊框</title>??
<style?type="text/css">??
p{border:2px?dotted?#ccc;}??
</style>??
</head>??
<body>??
????<h1>勇氣</h1>??
????<p>三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒有這個(gè)勇氣來回答老師提出的問題。學(xué)校舉辦的活動(dòng)我也沒勇氣參加。</p>??
????<p>到了三年級(jí)下學(xué)期時(shí)，我們班上了一節(jié)公開課，老師提出了一個(gè)很簡(jiǎn)單的問題，班里很多同學(xué)都舉手了，甚至成績(jī)比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p>?????
</body>??
</html>??
6 盒模型--邊框（二）
現(xiàn)在有一個(gè)問題，如果有想為p標(biāo)簽單獨(dú)設(shè)置下邊框，而其它三邊都不設(shè)置邊框樣式怎么辦呢？css樣式中允許只為一個(gè)方向的邊框設(shè)置樣式：
div{border-bottom:1px solid red;}
同樣可以使用下面代碼實(shí)現(xiàn)其它三邊上、右、左邊框的設(shè)置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
e.g.
[html]?view plain?copy?print?
<!DOCTYPE?HTML>??
<html>??
<head>??
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">??
<title>邊框</title>??
<style?type="text/css">??
li{??
????border-bottom:1px?dotted?#ccc;??
}??
</style>??
</head>??
<body>??
<ul>??
????<li>別讓不會(huì)說話害了你</li>??
????<li>二十七八歲就應(yīng)該有的見識(shí)</li>??
????<li>別讓不好意思害了你</li>??
</ul>??
</body>??
</html>??