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

盒模型

盒子模型是網頁布局的基石。它有邊框、外邊距、內邊距、內容組成。

盒子 3D 模型

http://wiki.jikexueyuan.com/project/fend_note/images/B/box-model-3d.png" alt="" />

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

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

See the Pen FEND_003_BoxModel by Li Xinyang (@li-xinyang) on CodePen.

屬性

http://wiki.jikexueyuan.com/project/fend_note/images/B/box-module.jpg" alt="" />

width

內容盒子寬

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

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

height

內容盒子高

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

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

padding

http://wiki.jikexueyuan.com/project/fend_note/images/P/padding-sample.png" alt="" />

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

margin

http://wiki.jikexueyuan.com/project/fend_note/images/M/margin-sample.png" alt="" />

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

NOTE：margin 默認值為 auto

Trick：

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

margin 合并

http://wiki.jikexueyuan.com/project/fend_note/images/M/margin-merge.png" alt="" />

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

border

http://wiki.jikexueyuan.com/project/fend_note/images/B/border-sample.png" alt="" />

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

http://wiki.jikexueyuan.com/project/fend_note/images/B/border-radius-sample1.png" alt="" />

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

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

overflow

http://wiki.jikexueyuan.com/project/fend_note/images/O/overflow-sample.png" alt="" />

overflow: visible | hidden | scroll | auto

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

box-sizing

http://wiki.jikexueyuan.com/project/fend_note/images/B/box-sizing.png" alt="" />

http://wiki.jikexueyuan.com/project/fend_note/images/B/box-sizing1.png" alt="" />

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

• content-box = 內容盒子寬高 + 填充（Padding）+ 邊框寬（border-width）
• border-box = 內容盒子寬高

box-shadow

http://wiki.jikexueyuan.com/project/fend_note/images/B/box-shadow.png" alt="" />

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

http://wiki.jikexueyuan.com/project/fend_note/images/T/TRBL.png" alt="" />

http://wiki.jikexueyuan.com/project/fend_note/images/B/border-radius-sample.png" alt="" />

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;