這篇文章給大家分享的是有關css中的盒子模型屬性有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
2、一個簡單的盒子模型
box.html
<!doctypehtml><html><head>
<metacharset="utf-8">
<title>盒子模型</title>
<linkhref="box.css"type="text/css"rel="stylesheet"></head><body>
<pclass="box1">
標準文件流不能制作精美的網頁；只有脫離標準文檔流（脫標），才可以制作我們想要的網頁。
脫標的方法：浮動，絕對定位，固定定位；
浮動（float）：可以讓元素并排顯示，并設置寬高；
屬性值：left(左浮動)；right（右浮動）；
浮動的元素會貼父盒子邊顯示,如果顯示不下，在下一行根據浮動方向(貼上一個相同浮動方向的盒子)顯示在父盒子中</p>
<pclass="box2">
浮動的性質：
1浮動的元素脫離標準流，不再區分塊級元素和行內元素
能夠讓浮動的元素并排在一行顯示，并設置寬和高。
2.浮動的元素沒有margin塌陷，盒子的距離是margin-top和margin-bottom之和
3.浮動的元素會貼邊顯示，有方向之分，
4.浮動的元素不會鉆盒子
5.浮動的元素會讓出標準流的位置(兩層)
6.字圍效果</p>
</body></html>
3、css盒子模型相關屬性之width/height是指內容的寬度和高度
box.css
.box1{
border:2pxsolidred;
height:200px;
width:700px;
}
.box2{
border:2pxsolid#123456;
height:150px;
width:670px;
}
4、css盒子模型相關屬性之邊框(寬度，樣式，顏色)
border:pxstylecolor;
border-top:pxstylecolor;
寬度：border-width;單個邊框：border-top-width;
box.css
.box1{
border:2pxsolidred;
height:200px;
width:700px;
border-top-width:23px;
}
樣式：border-style
屬性值：dotted(點)
dashed(虛線)
solid(實線)
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盒子模型相關屬性之內邊距–padding
設置單個方向：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盒子模型相關屬性之外邊距-margin
設置單個方向：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盒子模型相關屬性之輪廓:作用在border之外的樣式
outline-width
outline-style：
hidden(隱藏)
dotted(點)
dashed(虛線)
solid(實線)
double(雙線)
outline-color:
或者：
outline:pxstylecolor;
感謝各位的閱讀！關于“css中的盒子模型屬性有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
