「CSS」盒模型

• 属性
  • width
  • height
  • padding
  • margin
  • margin 合并
  • border
  • border-radius
  • overflow
  • box-sizing
  • box-shadow
  • outline
• TRBL
• 值缩写

---

盒模型

盒子模型是网页布局的基石。它有边框、外边距、内边距、内容组成。

盒子 3D 模型

box-model-3d.png

盒子由上到下依次分为五层，它们自上而下的顺序是。

1. border 边框
2. content + padding 内容与内边距
3. background-image 背景图片
4. background-color 背景颜色
5. margin 外边距

<p data-height="268" data-theme-id="15197" data-slug-hash="qdmPEE" data-default-tab="result" data-user="li-xinyang" class='codepen'>See the Pen <a href='http://codepen.io/li-xinyang/pen/qdmPEE/'>FEND_003_BoxModel</a> by Li Xinyang (<a href='http://codepen.io/li-xinyang'>@li-xinyang</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

属性

box-module.jpg

width

内容盒子宽

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

NOTE：通常情况下百分比得参照物为元素的父元素。max-width 与 min-width 可以设置最大与最小宽度。

height

内容盒子高

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

NOTE：默认情况元素的高度为内容高度。max-height 与 min-height 可以设置最大与最小高度。

padding

padding-sample.png

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

margin

margin-sample.png

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

NOTE：margin 默认值为 auto

Trick：

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

margin 合并

margin-merge.png

毗邻元素外间距（margin）会合并，既取相对较大的值。父元素与第一个和最后一个子元素的外间距也可合并。

border

border-sample.png

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-sample1.png

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

NOTE：四个角的分解属性由左上角顺时针附值。

overflow

overflow-sample.png

overflow: visible | hidden | scroll | auto

NOTE：默认属性为 visible。使用 overflow-x 与 overflow-y 单独的设置水平和垂直方向的滚动条。

box-sizing

box-sizing.png
box-sizing1.png

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

• content-box = 内容盒子宽高 + 填充（Padding）+ 边框宽（border-width）
• border-box = 内容盒子宽高

box-shadow

box-shadow.png

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

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

NOTE：水平与垂直偏移可以为负值即相反方向偏移。颜色默认为文字颜色。阴影不占据空间，仅为修饰效果。

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 并不占据空间，而 border 占据空间，且显示位于 border 以外。

TRBL

TRBL.png border-radius-sample.png

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;