盒子模型(Box Model)
把HTML頁面中的佈局元素當做一個矩形盒子，也就是一個盛放內容的容器
組成部分
- 內容
- 邊框（border）
- 內邊距（padding）內容與邊框的距離
- 外邊距（margin） 盒子邊框與相鄰盒子邊框的距離
標準模型
盒子邊框（border）
語法：
border: border-width || border-style || border-color
屬性：
border-width:定義邊框粗細，默認單位pxborder-style:邊框的樣式none:沒有邊框solid邊框爲單實線dashed邊框爲虛線dotted邊框爲點線
border-color:邊框顏色
示例
div {
width:500px;
height:500px;
/*邊框寬度*/
border-width: 5px;
/*邊框實線*/
border-style:solid;
/*邊框顏色*/
border-color: red;
/*簡寫*/
/*邊框粗細 邊框樣式 邊框顏色*/
border: 5px solid red;
}
盒子邊框單獨指定樣式
| 上邊框 | 下邊框 | 左邊框 | 右邊框 |
|---|---|---|---|
| border-top-style:樣式; | border-bottom-style:樣式; | border-left-style:樣式; | border-right-style:樣式; |
| border-top-width:寬度; | border- bottom-width:寬度; | border-left-width:寬度; | border-right-width:寬度; |
| border-top-color:顏色; | border- bottom-color:顏色; | border-left-color:顏色; | border-right-color:顏色; |
| border-top:寬度 樣式 顏色; | border-bottom:寬度 樣式 顏色; | border-left:寬度 樣式 顏色; | border-right:寬度 樣式 顏色; |
表格的細線邊框
屬性：
border-collapse:collapse
示例：
th,
td,
table {
/*會發現表格邊框是2px*/
border: 1px solid red;
/*合併相鄰邊框*/
border-collapse:collapse;
}
內邊距(padding)
邊框與內容的距離
屬性：
| 屬性 | 作用 |
|---|---|
| padding-left | 左內邊距 |
| padding-right | 右內邊距 |
| padding-top | 上內邊距 |
| padding-bottom | 下內邊距 |
簡寫
padding: 10px 上下左右都爲10px
padding: 10px 20px 上下 10px 左右20px
padding:10px 20px 30px 上 10px 左右20px 下30px
padding:10px 20px 30px 40px 上 10px 右20px 下30px 左40px (順時針)
記憶方法：先分上下，再分左右
注意：
添加內邊距之後，盒子邊距會變大
內盒尺寸計算
盒子高度=內邊距上下寬度+內容高度+邊框寬度
盒子寬度=內邊距左右寬度+內容高度+邊框寬度
pandding不影響盒子大小的情況
div {
width:100px;
height:100px;
background-color:red;
}
p {
height:30px;
background-color:orange;
padding-left:30px;
}
<html>
<body>
<div>
<p> AAA</p>
</div>
</body>
</html>
效果
盒子模型
結論
如果盒子沒有指定寬度，則不會被撐開
外邊距(margin)
盒子與相鄰盒子的距離
屬性
與內邊距相似，將padding替換爲margin
簡寫
與內邊距相同，上右下左
實現盒子居中對齊
div {
/*必須要有寬度*/
width:300px;
/*讓塊級盒子居中對齊水平,左右外邊距設置爲auto*/
margin: 0 auto;
/*其他寫法*/
margin :auto;
/*其他寫法*/
margin-left:auto;
margin-right:auto;
}
文字居中與盒子居中
p{
/*文本內容、行內元素、行內塊元素*/
text-algin:center;
}
div {
/*塊元素居中*/
margin:0 auto;
}
插入圖片與背景圖片區別
- 插入圖片：常用，一般做產品展示類
- 移動位置只能靠盒子模型
paddingmargin
- 移動位置只能靠盒子模型
- 背景圖片：一般用作小圖標或者超大圖片
- 移動位置通過
background-position
- 移動位置通過
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pic,
.bg{
width: 2000px;
height: 1000px;
background-color: aquamarine;
}
.pic img {
margin: 200px;
}
.bg {
/*padding: 200px;*/
background-image: url(img/background.jpeg);
background-repeat: no-repeat;
background-position: 100px 100px;
}
</style>
</head>
<body>
<div class="pic">
<img src="img/background.jpeg" alt="">
</div>
<div class="bg"></div>
</body>
</html>
清楚默認內外邊距
爲了更靈活方便地控制網頁中的元素，製作網頁時，我們需要將元素的默認內外邊距清除
代碼
* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}
行內元素爲了照顧兼容性， 儘量只設置左右內外邊距， 不要設置上下內外邊距。
外邊距合併
相鄰塊元素垂直外邊距的合併
- 當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom
- 下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和
- 取兩個值中的較大者這種現象被稱爲相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）。
解決方案：儘量給只給一個盒子添加margin值。
嵌套塊元素垂直外邊距的合併（塌陷）
- 對於兩個嵌套關係的塊元素，如果父元素沒有上內邊距及邊框
- 父元素的上外邊距會與子元素的上外邊距發生合併
- 合併後的外邊距爲兩者中的較大者
解決方案：
- 可以爲父元素定義上邊框。
- 可以爲父元素定義上內邊距
- 可以爲父元素添加overflow:hidden。
盒子模型佈局穩定性
width 、 padding 、margin
穩定性： width > padding > margin
原因：
- margin會有合併的問題
- padding會撐大盒子，需要計算盒子數據
相關推薦：
《學習html看這個就夠了》
《學習CSS看這個就夠了(一)》
《學習CSS看這個就夠了(二)》
本文參考尚硅谷前端學習課程