CSS——盒子模型(margin\padding\border)
阿新 • • 發佈：2018-12-15
盒模型的寬高
p{background-color: #ececec;width: 400px;} /*也可以設定百分比來進行寬度設定，是相對父元素的百分比寬度*/ .two{max-width: 300px;} .three{min-width: 250px;} /*高度屬性設定同理*/ <body> <p>盒子模型寬度width:400px</p> <p class="two">盒子模型最大寬度:300px</p> <p class="three">盒子模型最小寬度:250px</p> <!-- 盒子模型的計算需要內容的高度加上padding+margin+border，所以在設定盒子的大小的時候是設定內容大小，而不是總體大小 --> </body>
盒子模型的計算需要內容的高度加上padding+margin+border
所以在設定盒子的大小的時候是設定內容大小，而不是總體大小
盒模型的邊框
邊框的顏色
border-color: #0099ee;
邊框的樣式：
none : 無邊框。與任何指定的border-width值無關
hidden : 隱藏邊框。IE不支援
dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線（常用）
dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線（常用）
solid : 實線邊框（常用）
double : 雙線邊框。兩條單線與其間隔的和等於指定的border-width值
groove : 根據border-color的值畫3D凹槽
ridge : 根據border-color的值畫菱形邊框
inset : 根據border-color的值畫3D凹邊
outset : 根據border-color的值畫3D凸邊
border-style: dotted;
邊框的寬度
border-width: 10px;
border-left 設定左邊框，一般單獨設定左邊框樣式使用
border-right 設定右邊框，一般單獨設定右邊框樣式使用
border-top 設定上邊框，一般單獨設定上邊框樣式使用
border-bottom 設定下邊框，一般單獨設定下邊框樣式使用,有時可將下邊框樣式作為css下劃線效果應用。
展示效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p{width: 150px; height: 100px;background-color: #ececec;} .one{border-top-width: 10px;border-top-color: #0099ee;border-top-style: solid;} .two{border-right-width: 10px; border-right-color: #0099ee; border-right-style: solid; border-top-width: 10px; border-top-color: red; border-top-style: dotted; border-left-width: 5px; border-left-color: green; border-left-style: double; border-bottom-width: 8px; border-bottom-color: blue; border-bottom-style: dotted; } /*單邊框設定*/ /*邊框設定可以進行縮寫*/ .three{border-top: 5px red solid; border-right: 10px blue dotted; border-left: 10px blue dotted; border-bottom: 5px red solid; } </style> </head> <body> <p class="one">邊框屬性border</p> <p class="two">邊框屬性border</p> <p class="three">邊框屬性border</p> </body> </html>
盒模型的padding
.one{height: 300px;width: 300px;background-color: #acacac;
padding-top: 20px;
padding-left: 30px;
padding-bottom:50px;
padding-right: 40px;
}
/*那麼這個div的高度就是300+20+50，寬度同理*/
.two{
width: 100px;
height: 100px;
padding:10 20;
}
/*padding縮寫如果一個值就是4個方向都是一個值，
兩個值就是上下和左右各一個，
三個值就是左右是一個值，
上下分別是一個值，
4個值就是上右下左這樣順時針取值*/
盒模型的margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one
{
width: 300px;
height: 300px;
background-color: #ececec;
margin: 10px 20px 30px 40px;
}
/*用谷歌瀏覽器進行F12檢視，這是div盒子與body之間的間距*/
/*margin是外邊距，也就是離其他元素的邊距，一般在編碼前為了不影響編碼佈局，提前設定margin為0*/
/*margin: auto;可以設定為水平方向居中*/
.two
{
width: 300px;
height: 300px;
background-color: #ececec;
margin: auto;
}
.three
{
width:100px;
height: 100px;
background-color: blue;
margin: auto;
}
/*當兩個垂直邊距時，會選取大的外邊距 如margin-top:30px;另一個為margin-bottom:20px;則兩個盒子之間的距離為30px*/
</style>
</head>
<body>
<div class="one">margin屬性</div>
<div class="two"><div class="three">margin屬性</div></div>
</body>
</html>
