目錄
?CSS盒子模型
padding內填充
邊框
邊框屬性?
border-radius
margin外邊距
?CSS盒子模型
- Content(內容): ? 盒子的內容，顯示文本和圖像 ? ? ?>>>>類似word 文字A，改變字體與大小
- padding: ? ? ? ? ? 用于控制內容與邊框之間的距離 ? ?>>>>類似word文字填充
- Border(邊框): ? ? 圍繞在內邊距和內容外的邊框 ? ? ?>>>>邊框
- margin: ? ? ? ? ? ?用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?>>>>文字間隔
padding內填充
.padding-test {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px;
}推薦使用簡寫：
.padding-test {padding: 5px 10px 15px 20px;
}順序：上右下左
補充padding的常用簡寫方式：
- 提供一個，用于四邊；
- 提供兩個，第一個用于上－下，第二個用于左－右；
- 如果提供三個，第一個用于上，第二個用于左－右，第三個用于下；
- 提供四個參數值，將按上－右－下－左的順序作用于四邊；
邊框
邊框屬性?
- border-width
- border-style
- border-color
#i1 {border-width: 2px;border-style: solid;border-color: red;
}通常使用簡寫方式：
#i1 {border: 2px solid red;
}邊框樣式
| 值 | 描述 |
|---|---|
| none | 無邊框。 |
| dotted | 點狀虛線邊框。 |
| dashed | 矩形虛線邊框。 |
| solid | 實線邊框。 |
?
除了可以統一設置邊框外還可以單獨為某一個邊框設置樣式，如下所示：
?
#i1 {border-top-style:dotted;border-top-color: red;border-right-style:solid;border-bottom-style:dotted;border-left-style:none;
}border-radius
用這個屬性能實現圓角邊框的效果。
將border-radius設置為長或高的一半即可得到一個圓形。
margin外邊距
.margin-test {margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px;
}推薦使用簡寫：
.margin-test {margin: 5px 10px 15px 20px;
}順序：上右下左
常見居中：
.mycenter {margin: 0 auto;
}?
摘抄自：https://www.cnblogs.com/liwenzhou/p/7999532.html
?
?
?
)
)
)
