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