盒模型

Table of Contents generated with DocToc

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

盒模型

盒子模型是網(wǎng)頁(yè)布局的基石。它有邊框、外邊距、內(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 可以設(shè)置最大與最小寬度。

height

內(nèi)容盒子高

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

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

padding

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

margin

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

NOTE：margin 默認(rèn)值為 auto

Trick：

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

margin 合并

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

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 默認(rèn)為元素字體顏色。

border-radius

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

NOTE：四個(gè)角的分解屬性由左上角順時(shí)針附值。

overflow

overflow: visible | hidden | scroll | auto

NOTE：默認(rèn)屬性為 visible。使用 overflow-x 與 overflow-y 單獨(dú)的設(shè)置水平和垂直方向的滾動(dòng)條。

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：水平與垂直偏移可以為負(fù)值即相反方向偏移。顏色默認(rèn)為文字顏色。陰影不占據(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 與當(dāng)前顏色取反色 */

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

TRBL

TRBL (Top, Right, Bottom, Left) 即為順時(shí)針從頂部開(kāi)始。具有四個(gè)方向的屬性都可以通過(guò) *-top *-right*-bottom 與 *-left 單獨(dú)對(duì)其進(jìn)行設(shè)置。

值縮寫(xiě)

下面的值縮寫(xiě)以 padding 為例。

對(duì)面相等，后者省略；四面相等，只設(shè)一個(gè)。

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

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

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