盒模型

Table of Contents generated with DocToc

• 盒模型
• 屬性
• width
• height
• padding
• margin
• margin 合并
• border
• border-radius
• overflow
• box-sizing
• box-shadow
• outline
• TRBL
• 值縮寫

盒模型

盒子模型是網(wǎng)頁布局的基石。它有邊框、外邊距、內(nèi)邊距、內(nèi)容組成。

盒子 3D 模型

盒子由上到下依次分為五層，它們自上而下的順序是。

1. border 邊框
2. content + padding 內(nèi)容與內(nèi)邊距
3. background-image 背景圖片
4. background-color 背景顏色
5. margin 外邊距

屬性

width

內(nèi)容盒子寬

width: <length> | <percentage> | auto | inherit

NOTE：通常情況下百分比得參照物為元素的父元素。max-width 與 min-width 可以設置最大與最小寬度。

height

內(nèi)容盒子高

height: <length> | <percentage> | auto | inherit

NOTE：默認情況元素的高度為內(nèi)容高度。max-height 與 min-height 可以設置最大與最小高度。

padding

padding: [<length> | <percentage>]{1,4} | inherit

margin

margin: [<length> | <percentage> | auto]{1,4} | inherit

NOTE：margin 默認值為 auto

Trick：

/* 可用于水平居中 */
margin: 0 auto;

margin 合并

毗鄰元素外間距（margin）會合并，既取相對較大的值。父元素與第一個和最后一個子元素的外間距也可合并。

border

border: [<br-width> || <br-style> || <color>] | inherit
border-width: [<length> | thin | medium | thick]{1,4} | inherit
border-style: [solid | dashed | dotted | ...]{1,4} |inherit
border-colro: [<color> | transparent]{1,4} | inherit

NOTE：border-color 默認為元素字體顏色。

border-radius

/* 水平半徑/垂直半徑 */
border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

NOTE：四個角的分解屬性由左上角順時針附值。

overflow

overflow: visible | hidden | scroll | auto

NOTE：默認屬性為 visible。使用 overflow-x 與 overflow-y 單獨的設置水平和垂直方向的滾動條。

box-sizing

box-sizing: content-box | border-box | inherit

• content-box = 內(nèi)容盒子寬高 + 填充（Padding）+ 邊框?qū)挘?small>border-width）
• border-box = 內(nèi)容盒子寬高

box-shadow

box-shadown: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

box-shadow: 4px  6px   3px  0px red;
             |    |     |    |
          水平偏移|     |    |
               垂直偏移 |    |
                    模糊半徑 |
                          陰影大小

NOTE：水平與垂直偏移可以為負值即相反方向偏移。顏色默認為文字顏色。陰影不占據(jù)空間，僅為修飾效果。

outline

outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
outline-width: <length> | thin | medium | thick | inherit
outline-style: solid | dashed | dotted | ... | inherit
outline-color: <color> | invert | inherit
/* invert 與當前顏色取反色 */

NOTE：outline 與 border 相似但無法分別設置四個方向的屬性。outline 并不占據(jù)空間，而 border占據(jù)空間，且顯示位于 border 以外。

TRBL

TRBL (Top, Right, Bottom, Left) 即為順時針從頂部開始。具有四個方向的屬性都可以通過 *-top *-right*-bottom 與 *-left 單獨對其進行設置。

值縮寫

下面的值縮寫以 padding 為例。

對面相等，后者省略；四面相等，只設一個。

/*      四面值 */
padding: 20px;
padding: 20px 20px 20px 20px;

/*      上下值 右左值 */
padding: 20px   10px;
padding: 20px 10px 20px 10px;

/*       上值 右左值 下值 */
padding: 20px 10px   30px;
padding: 20px 10px 30px 10px;