Java自學-圖形介面 容器
阿新 • • 發佈：2020-08-08
CSS盒子模型
1. 盒子模型的組成
CSS盒子模型本質上是一個盒子，封裝周圍的HTML元素。
包括：邊框border、外邊距margin、內邊距padding、實際內容content。
2. 邊框border
div {
border: border-width border-style border-color;
}
| 屬性 | 作用 |
|---|---|
| border-width | 邊框粗細，單位px |
| border-style | 邊框樣式，solid(實線)、dashed(虛線)、dotted(點線) |
| border-color | 邊框顏色，預定義值/十六進位制/rgb() |
| 線形 | 樣式 |
|---|---|
| dashed 虛線 | - - - - - - - - |
| dotted 點線 | ................. |
| 屬性 | 作用 |
|---|---|
| border-left | 左邊框 |
| border-right | 右邊框 |
| border-top | 上邊框 |
| border-bottom | 下邊框 |
2.1 邊框寫法
簡寫：
border: 1px solid blue;/*沒有順序規定，一般按照這種順序*/
分開寫法：
border-top: 1px solid blue;/*只設定上邊框*/ border-right: 1px dashed red;/*只設定右邊框*/; border-bottom: 2px solid #ccc;/*只設定下邊框*/ border- left: 3px dotted #123456;/*只設定左邊框*/
2.2 表格的細線邊框border-collapse
該屬性控制瀏覽器繪製表格邊框的方式，它控制相鄰單元格的邊框。
border-collapse: collapse;/*表示相鄰邊框合併在一起*/
2.3 邊框影響盒子實際大小的解決方案
如果一個盒子加了邊框，會出現撐大盒子的情況，因此有兩種解決方案。
- 測量盒子大小的時候，不量邊框
- 如果測量的時候包含了邊框，則需要width/height減去邊框寬度
3. 內邊距padding
內邊距：邊框與內容之間的距離。
| 屬性 | 作用 |
|---|---|
| padding-left | 左內邊距 |
| padding-right | 右內邊距 |
| padding-top | 上內邊距 |
| padding-bottom | 下內邊距 |
padding的簡寫屬性可以有1~4個值。
| 值的個數 | 表達意思 |
|---|---|
| padding: 5px | 上下左右都是5px內邊距 |
| padding: 5px 10px | 上下5px，左右10px |
| padding: 5px 10px 15px | 上5px，左右10px，下15px |
| padding: 5px 10px 15px 20px | 上5px，右10px，下15px，左20px |
3.1 內邊距影響盒子實際大小的解決方案
如果盒子已經有了寬度和高度，此時再指定內邊框，會影響盒子的實際大小，撐大盒子。因此有兩種解決方案。
- 讓width/height減去多出來的內邊距大小
- 如果盒子本身沒有指定width/height屬性，則此時padding不會撐開盒子
4. 外邊距margin
外邊距：控制盒子與盒子之間的距離。
| 屬性 | 作用 |
|---|---|
| margin-left | 左外邊距 |
| margin-right | 右外邊距 |
| margin-top | 上外邊距 |
| margin-bottom | 下外邊距 |
margin的簡寫和padding一致。
4.1 外邊距讓塊級盒子水平居中
利用外邊距讓塊級盒子水平居中所滿足的條件：
- 盒子必須指定了寬度
- 盒子左右的外邊距都設定為auto
常見的寫法：
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;（建議使用）
注：行內元素、行內塊元素水平居中，給其父元素新增text-align: center;即可。
4.2 外邊距合併
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。
4.2.1 相鄰塊元素垂直外邊距的合併
如上圖，出現了取兩個值中的較大者的現象，即為相鄰塊元素垂直外邊距的合併。
解決方案：儘量只給一個盒子新增margin值。
4.2.2 巢狀塊元素垂直外邊距的塌陷
如上圖，出現了父元素塌陷較大的外邊距值的現象，即為巢狀塊元素垂直外邊距的塌陷。
解決方案：
- 為父元素定義上邊框
- 為父元素定義上內邊距
- 為父元素新增overflow: hidden;（推薦使用）
5. 清除內外邊距
這也是CSS的第一行程式碼。
* {
padding: 0;/*清除內邊距*/
margin: 0;/*清除外邊距*/
}
注：
- 行內元素為了照顧相容性，儘量只設置左右內外邊距
- 但是轉換為塊級或行內塊元素就無要求