盒子模型(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值大小是取大優先
解決方法：
- 給 塊級標籤 變成 行內塊標籤
- 使用 浮動（浮動元素是不會坍塌的，具體內容請參考我別的文章）
- 父子元素之間的重疊：父元素設定的 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、#a7a7a7、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;}