一、CSS 框模型
框模型
- 框模型(Box Model)定義了元素框處理元素内容、内邊距、邊框和外邊距的方式
- width 和 height指内容區域的寬度和高度
- 增加内邊距、邊框和外邊距不會影響内容區域的尺寸，但是會增加元素框的總尺寸
二、CSS 外邊距
外邊距概念
- 外邊距: 圍繞在元素邊框周圍的空白區域
- 會在元素外建立額外的空白
- 外邊距是透明的
外邊距 margin
- 外邊距: 與下一個元素之間的空間量
- margin: value;
- 單邊設定
- margin-top/right/bottom/left : value;
- 外邊距的屬性值可能為px(像素)，百分比(%)或自動(auto)，也可以為負值
- 預設情況下，以下 HTML 塊級元素都存在外邊距
- body
- h1,h2,h3,h4,h5,h6
- p...
- 聲明 margin 屬性，可以覆寫預設樣式
- margin 可取值為 auto,由浏覽器計算外邊距
- 實作水準方向居中顯示的效果
外邊距的簡潔寫法
- 外邊距的簡潔寫法有如下幾種
- margin:value(四個方向相同);
- margin:value(上下) value(左右);
- margin:value(上) value(左右) value(下);
- margin:value(上) value(右) value(下) value(左);
外邊距合并
- 當兩個垂直外邊距相遇時，它們将形成一個外邊距，稱為外邊距合并
- 合并後的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者
三、CSS 内邊距
内邊距概念
- 内邊距: 内容區域和邊框之間的空間
- 會擴大元素邊框所占用的區域
内邊距 padding
- 内邊距: 内容與框線之間的距離
- padding : value;
- 内邊距屬性值可以為像素、百分比，但不能為負數
- padding-top/right/bottom/left : value;
内邊距的簡潔寫法
- 内邊距的簡潔寫法有如下幾種
- padding:value(四個方向相同);
- padding:value(上下) value(左右);
- padding:value(上) value(左右) value(下);
- padding:value(上) value(右) value(下) value(左);