快捷鍵
- CTRL + Z 撤銷
- CTRL + Y 重做
盒模型
組成
-
內容（content）、內填充（padding）、邊框（border)、邊界/外邊距（margin）
![在這裏插入圖片描述]()
-
content：盒子內容，元素內容的區域，此區域的寬和高由css樣式的width和height構成
-
padding：內填充，元素內容和邊框之間的區域，有上下左右4個方向
-
border：邊框，就是元素的最外層結構，有上下左右4個方向
-
margin：外邊距，該元素與其他元素之間的間距，有上下左右4個方向
-
盒模型寬度 = content + padding-left + padding-right + border-left-width + border-right-width
-
盒模型高度 = content + padding-top + padding-bottom + border-top-width + border-bottom-width
複合樣式
- 四個值
| 10px | 10px | 10px | 10px |
|---|---|---|---|
| 上 | 右 | 下 | 左 |
- 三個值
| 10px | 10px | 10px |
|---|---|---|
| 上 | 左右 | 下 |
- 兩個值
| 10px | 10px |
|---|---|
| 上下 | 左右 |
- 一個值
| 10px |
|---|
| 上右下左 |
- 邊框border：可以由寬度(border-width)、樣式(border-style)和顏色(border–color)複合而成。
- border = border-color + border-width + border-style
- border-color = border-top-color + border-bottom-color + border-left-color + border-right-color
- border = border-top + border-right + border-bottom + border-left
- 區塊元素居中： margin:0 auto;
盒模型中的問題
外邊距重疊
- 兄弟關係或祖先關係
- 計算規則
- 相鄰外邊距都是正數時，摺疊結果爲它們兩者之間較大的值
- 相鄰外邊距都是負數時，摺疊結果爲兩者絕對值的較大值
- 相鄰外邊距一正一負時，摺疊結果爲兩者之和
- 消除父子元素邊距重疊的方式：給父元素加邊框；給父元素加padding(讓他們不相鄰)
兼容問題和解決辦法
兩種盒模型
- 常規盒模型（內容盒模型）
- 盒模型寬度 = width + padding-left + padding-right + border-left-width + border-right-width
- 盒模型高度 = hight + padding-top + padding-bottom + border-top-width + border-bottom-width
- 怪異盒模型（邊框盒模型）
- 設置的寬高尺寸爲邊框之內的部分(盒模型) width = 盒模型的寬度
詳說
-
低版本的ie瀏覽器中用的是怪異盒模型，怪異盒模型中我們爲元素設置的寬實際是盒子的寬
-
標準瀏覽器的常規盒模型中我們爲元素設置的寬是內容的寬
-
解決辦法
box-sizing: border-box/content-box(默認)，該樣式用來修改盒模型的種類
-
一般使用 怪異盒模型
代碼即樣式展現
複合
- No.1
<!-- solid 表示實線-->
<body>
<div style="width: 150px;
height: 200px;
padding: 10px;
border: 2px black solid;
margin: 5px">
</div>
</body>
- No.2
<!-- 複合樣式-->
<div style="width: 150px;
height: 200px;
padding: 10px 20px;
border: 10px green solid;
margin: 5px">
</div>
- No.3
<div style="width: 200px;
height: 200px;
background-color: hotpink;
border-top: 20px gold solid;
border-bottom: solid 30px yellow;
border-left: solid 50px darkorange
border-right: solid 60px limegreen;">
</div>
- No.4
<div style="width: 0px;
height: 0px;
background-color: hotpink;
border-top: 30px gold solid;
border-bottom: solid 30px yellow;
border-left: solid 30px darkorange;
border-right: solid 30px limegreen;">
</div>
- No.5
<!-- transparent 透明色 或者 rgba (0,0,0,0) -->
<div style="width: 0px;
height: 0px;
border-bottom: solid 50px limegreen;
border-left: solid 50px transparent;
border-right: solid 50px transparent;">
</div>
外邊距重疊
- 外邊距摺疊只在垂直方向有；水平方向不發生摺疊
<div style="width: 200px;
height: 150px;
background-color: #ccc;
margin-top: 20px;
margin-left: 20px;
padding-top: 50px;">
<div style="width: 100px;
height:100px;
background-color: red;
margin-left: 50px;">
</div>
</div>
居中
<div style="width: 100px;
height: 100px;
background-color: red;
margin: 100px auto;">
</div>
兩種盒模型
<div style="width: 100px;
height: 100px;
padding: 30px;
border: 10px #000 solid;
background-color: hotpink;">
</div>
<div style="width: 100px;
height: 100px;
padding: 30px;
border: 10px #000 solid;
background-color: limegreen;
box-sizing: border-box">
</div>
