CSS 盒子模型

盒子模型(Box Model)

通常的標籤都是盒子，可是除了極個別的標籤(例如:img、input標籤)不是盒子

盒子模型的屬性

• width 盒子內容的寬度
• height 盒子內容的高度
• margin 盒子的外邊距
• padding 盒子的內邊距
• border 盒子的邊框
• background 盒子背景

盒子模型示意圖

標準盒子模型、IE盒子模型

目前所學的知識中，以標準盒子模型爲準
標準盒子模型：

IE盒子模型：

標準盒子模型和IE盒子模型的區別

• 在 標準盒子模型中，width 和 height 指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素框的總尺寸
• IE盒子模型中，width 和 height 指的是內容區域+border+padding的寬度和高度。

width height 屬性

能夠設置 任何長度單位 百分比(佔父元素的百分比)

• 塊級標籤能夠設置width和height
• 行內標籤不能夠設置width和height（它的width由內容決定，height由font-size決定）

盒子的寬度並非內容的寬度
以上兩個盒模型以下：

真實寬度=左右padding+左右border+width

若是想保持一個盒子的真實佔有寬度不變，那麼加width的時候就要減padding。加padding的時候就要減width

height屬性和width屬性相似，這裏不作過多介紹

---

margin 屬性

margin屬性表示盒子與盒子之間的距離，而且分 上、下、左、右 四個方向（margin-top、margin-bottom、margin-left、margin-right）能夠單獨進行設置

能夠設置 任何長度單位 百分比 負值

margin的值複製
有時，咱們會輸入一些重複的值，經過值複製，能夠沒必要重複地輸入數字
CSS 定義了一些規則，容許爲外邊距指定少於 4 個值

• 若是缺乏左外邊距的值，則使用右外邊距的值
• 若是缺乏下外邊距的值，則使用上外邊距的值
• 若是缺乏右外邊距的值，則使用上外邊距的值

給出一張圖片，便於理解

換句話說，若是爲外邊距指定了 3 個值，則第 4 個值（即左外邊距）會從第 2 個值（右外邊距）複製獲得。若是給定了兩個值，第 4 個值會從第 2 個值複製獲得，第 3 個值（下外邊距）會從第 1 個值（上外邊距）複製獲得。最後一個狀況，若是隻給定一個值，那麼其餘 3 個外邊距都由這個值（上外邊距）複製獲得。
不經常使用

利用這個簡單的機制，您只需指定必要的值，而沒必要所有都應用 4 個值

• margin對於塊級標籤在四個方向上都有做用，對於行內標籤，只在水平方向上有效，在垂直方向上無效
• margin能夠設置負值

margin設置的數值數

• 設置一個數值(margin:10px;)，則上下左右都用這一個數值(10px)
• 設置兩個數值(margin:5px 10px;)，則上下爲第一個數值(5px)，左右爲第二個數值(10px)
• 設置三個數值(margin:5px 10px 15px;)，則上爲第一個數值(5px)，左右爲第二個數值(10px),下爲第三個數值(15px)
• 設置四個數值(margin:5px 10px 15px 20px)，則上右下左依次爲(5px 10px 15px 20px)

margin重疊(坍塌) 重難點

前提條件：塊級標籤，垂直方向

---

• 兄弟元素之間的重疊：上面盒子的 margin-bottom 和下面盒子的 margin-top 重疊，中間的margin值大小是取大優先

解決方法：

1. 給 塊級標籤 變成 行內塊標籤
2. 使用 浮動（浮動元素是不會坍塌的，具體內容請參考我別的文章）

---

• 父子元素之間的重疊：父元素設置的 margin-top 和父元素中第一個子元素設置的 margin-top 會重疊

解決方法：
1.給父元素設置border-top （若是不想要邊框，可使用transparent，設置成透明）
2.給父元素設置padding-top
3.把 塊級標籤 變成 行內塊標籤

margin經典用法，使塊級標籤水平居中 margin:0 auto;

---

padding 屬性

padding （內邊距，補白），表示內容與border之間的距離，而且和margin同樣，也分 上、下、左、右 四個方向（padding-top、padding-bottom、padding-left、padding-right）能夠單獨進行設置
能夠設置 任何長度單位 百分比 可是不容許設置負值

關於 值複製 和 設置的數值數，和margin同樣，能夠參考margin

應用：
調整 內容 與 border 之間的距離（必定要參考上面的盒子模型，注意盒子的大小）

注：若是重複設置了一邊或者多邊的屬性值
例如：
padding:10px;
padding-left:20px;
則 padding 左邊距 實際爲20px，因此總結出來一句話 小屬性 層疊 大屬性（margin 也適用這句話）

---

border 屬性

border屬性能夠設置盒子的邊框

邊框三要素：像素(粗細)、線型、顏色

顏色若是不寫，默認是黑色。另外兩個屬性不寫，則顯示不出來邊框。線型自行百度，通常只用(solid 實線、dotted 點劃線、dashed 虛線 )

border拆分
border 是一個大綜合屬性（例如：border:1px solid red;）就是四個邊框，寬度爲1px、實線、紅色線

有兩大種拆分方式：

• 按三要素拆開：border-width、border-style、border-color。（一個border屬性是由三個小屬性綜合而成的）
• 按方向拆開：border-top、border-right、border-bottom、border-left。

一個border屬性，是由三個小屬性綜合而成的。若是某一個小屬性後面是空格隔開的多個值，那麼就是上右下左的順序

例如：
border:10px solid red;
按三要素拆：
border-width:10px; //邊框寬度 border-style:solid; //線型 border-color:red; //顏色。
按方向拆：
border-top:10px solid red; border-right:10px solid red; border-bottom:10px solid red; border-left:10px solid red;

一樣也適用那句話 小屬性 層疊 大屬性

---

background 屬性

background-color 設置背景色(接受任何合法的顏色值，好比：red、#a7a7a七、rgb)

---

background-color 不能繼承，其默認值是 transparent。transparent 有「透明」之意。也就是說，若是一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。

background-image 把圖像放入背景(默認值是 none，表示背景上沒有放置任何圖像)

---

若是須要設置一個背景圖像，必須爲這個屬性設置一個 URL 值
background-image 也不能繼承。事實上，全部背景屬性都不能繼承

background-repeat 對背景圖像是否平鋪進行設置(默認在水平垂直方向上都平鋪，屬性值爲repeat)

---

• repeat 水平垂直方向上都平鋪
• repeat-x 水平方向上平鋪
• repeat-y 垂直方向上平鋪
• no-repeat 不平鋪

background-position 設置 圖像在背景中的位置
可使用一些關鍵字、百分數值、長度值
關鍵字

單一關鍵字	等價的關鍵字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

百分數值

百分數值的表現方式更爲複雜(這裏不作過多解釋，想了解自行百度)
若是隻提供一個百分數值，所提供的這個值將用做水平值，垂直值將假設爲 50%。這一點與關鍵字相似。
background-position 的默認值是 0% 0%，在功能上至關於 top left。這就解釋了背景圖像爲何老是從元素內邊距區的左上角開始平鋪，除非您設置了不一樣的位置值。

長度值

長度值解釋的是元素內邊距區左上角的偏移。偏移點是圖像的左上角。
注意，這一點與百分數值不一樣，由於偏移只是從一個左上角到另外一個左上角。也就是說，圖像的左上角與 background-position 聲明中的指定的點對齊。

background-attachment 背景關聯

---

若是文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。 能夠經過 background-attachment 屬性防止這種滾動。經過這個屬性，能夠聲明圖像相對於可視區是固定的（fixed），所以不會受到滾動的影響
background-attachment 屬性的默認值是 scroll，也就是說，在默認的狀況下，背景會隨文檔滾動。

background 簡寫屬性，做用是將背景屬性設置在一個聲明中
background:background-color background-image background-repeat background-attachment background-position

---

對於盒子模型的注意點

• width屬性默認值爲auto，塊級元素的貪婪性和行內元素的懶惰性
• 有些標籤有默認的padding值和margin值,因此通常寫網頁時都會重置樣式 *{margin:0;padding:0;}

---

^_<