目錄

?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

?

?

?

總結

以上是生活随笔為你收集整理的02-1.CSS边框，边界，布局相关笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。