溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)css中的盒子模型屬性有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
2、一個(gè)簡(jiǎn)單的盒子模型
box.html
<!doctypehtml><html><head>
<metacharset="utf-8">
<title>盒子模型</title>
<linkhref="box.css"type="text/css"rel="stylesheet"></head><body>
<pclass="box1">
標(biāo)準(zhǔn)文件流不能制作精美的網(wǎng)頁(yè)；只有脫離標(biāo)準(zhǔn)文檔流（脫標(biāo)），才可以制作我們想要的網(wǎng)頁(yè)。
脫標(biāo)的方法：浮動(dòng)，絕對(duì)定位，固定定位；
浮動(dòng)（float）：可以讓元素并排顯示，并設(shè)置寬高；
屬性值：left(左浮動(dòng))；right（右浮動(dòng)）；
浮動(dòng)的元素會(huì)貼父盒子邊顯示,如果顯示不下，在下一行根據(jù)浮動(dòng)方向(貼上一個(gè)相同浮動(dòng)方向的盒子)顯示在父盒子中</p>
<pclass="box2">
浮動(dòng)的性質(zhì)：
1浮動(dòng)的元素脫離標(biāo)準(zhǔn)流，不再區(qū)分塊級(jí)元素和行內(nèi)元素
能夠讓浮動(dòng)的元素并排在一行顯示，并設(shè)置寬和高。
2.浮動(dòng)的元素沒(méi)有margin塌陷，盒子的距離是margin-top和margin-bottom之和
3.浮動(dòng)的元素會(huì)貼邊顯示，有方向之分，
4.浮動(dòng)的元素不會(huì)鉆盒子
5.浮動(dòng)的元素會(huì)讓出標(biāo)準(zhǔn)流的位置(兩層)
6.字圍效果</p>
</body></html>
3、css盒子模型相關(guān)屬性之width/height是指內(nèi)容的寬度和高度
box.css
.box1{
border:2pxsolidred;
height:200px;
width:700px;
}
.box2{
border:2pxsolid#123456;
height:150px;
width:670px;
}
4、css盒子模型相關(guān)屬性之邊框(寬度，樣式，顏色)
border:pxstylecolor;
border-top:pxstylecolor;
寬度：border-width;單個(gè)邊框：border-top-width;
box.css
.box1{
border:2pxsolidred;
height:200px;
width:700px;
border-top-width:23px;
}
樣式：border-style
屬性值：dotted(點(diǎn))
dashed(虛線)
solid(實(shí)線)
double(雙線)
box.css
.box1{
border:5pxdoublered;
height:200px;
width:700px;
border-top-width:11px;
border-top-style:dashed;
}
.box2{
border:2pxsolid#123456;
height:150px;
width:670px;
}
5、css盒子模型相關(guān)屬性之內(nèi)邊距–padding
設(shè)置單個(gè)方向：padding-top/padding-bottom/padding-left/padding-right
box.css
.box2{
padding-top:22px;
padding-left:11px;
padding-right:22px;
padding-right:24px;
border-bottom:2pxsolid#123456;
height:150px;
width:670px;
}
6、css盒子模型相關(guān)屬性之外邊距-margin
設(shè)置單個(gè)方向：margin-top/margin-bottom/margin-left/margin-right
box.css
.box2{
padding-top:22px;
padding-left:11px;
padding-right:22px;
padding-right:24px;
border-bottom:2pxsolid#123456;
height:150px;
width:670px;
margin-top:23px;
margin-bottom:45px;
margin-left:45px;
margin-right:45px;
}
7、css盒子模型相關(guān)屬性之輪廓:作用在border之外的樣式
outline-width
outline-style：
hidden(隱藏)
dotted(點(diǎn))
dashed(虛線)
solid(實(shí)線)
double(雙線)
outline-color:
或者：
outline:pxstylecolor;
感謝各位的閱讀！關(guān)于“css中的盒子模型屬性有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
