學習筆記,僅供參考,有錯必糾
參考自:某不知名網課
文章目錄
- 盒子模型
- 内邊距(padding)
- 屬性設定
- 内盒尺寸計算
- padding什麼時候不影響盒子大小
盒子模型
内邊距(padding)
padding屬性用于設定内邊距, 是指邊框與内容之間的距離。
屬性設定
屬性 | 作用 |
padding-left | 左内邊距 |
padding-right | 右内邊距 |
padding-top | 上内邊距 |
padding-bottom | 下内邊距 |
注意,當我們給盒子指定padding值之後,内容和邊框之間有了距離,并且盒子會變大。
如果我們簡寫成
padding:數值1 數值2 ...
的形式,那麼根據數值個數的不同,該css語句表達的意思也不同:
值的個數 | 表達意思 |
1個值 | padding:上下左右内邊距; |
2個值 | padding: 上下内邊距 左右内邊距 ; |
3個值 | padding:上内邊距 左右内邊距 下内邊距; |
4個值 | padding: 上内邊距 右内邊距 下内邊距 左内邊距 ; |
内盒尺寸計算
因為設定padding會撐大盒子,是以我們需要計算盒子的實際尺寸。
- 寬度
Element Height = content height + padding + border
- 高度
Element Width = content width + padding + border
- 舉個例子
如果我們設定content高度為100px, content寬度為100px,padding為20px,border為5px,那麼盒子會變成寬度為150px,高度為150px:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子</title>
<style>
div {
width: 100px;
height: 100px;
padding: 20px;
border: 5px dashed red;
background-color: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
頁面:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5yN3MTM2ITOwcTN0YGZ1gTOyYzXyMTM1QTMyAzLcZDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
審查元素:
padding什麼時候不影響盒子大小
如果沒有給一個盒子指定寬度(width), 那麼如果給這個盒子指定padding, 則不會撐開盒子,比如我們不設定p标簽的width屬性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子</title>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
p {
height: 30px;
padding-left: 30px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>歡迎</p>
</div>
</body>
</html>
頁面:
審查元素: