盒子模型

表现类型

块级盒子: 水平流上只能单独显示一个元素，多个块级元素换行显示。
内联盒子：水平流上可以展示多个同类元素，多个内联元素串联显示。
标记盒子：list-item 元素会默认附加一个项目符号，为了支持其显示，该元素创建时会生成一个标记盒子用于展示符号

内外盒子

每个元素实际存在两个盒子

外在盒子：用于控制元素的行显示
容器盒子：用于控制元素宽高、内容呈现

如：inline-block 可理解为由外在的内联盒子于内在的块级盒子组合；
外在内联盒子限制了盒子的表现为 inline，内在块级盒子控制了内容的宽高

注：该部分内容的说明源于张鑫旭《CSS World》

外部尺寸与流

正常流尺寸：块级元素自动铺满容器呈流动特点，借助流动性特点，可以减少元素对宽高、间距、边框的计算
格式化尺寸：在绝对定位模型中，对于非替换元素，若同时设置相对位置属性(left&right 或 top&bottom)，则呈现流动性，边框、间距、内容区域自动分配空间

内部尺寸与流

包裹性：元素尺寸由内容决定，但小于容器尺寸
首选最小宽度：内容尺寸小于容器尺寸时，此时会给内容元素设置最小宽度用于展示
最大宽度：容器内最大连续内联盒子的宽度

幽灵空白节点

在 HTML5 声明下，内容为空的 inline-block 元素会在其之前创建一个同行高的宽度为 0 的内联盒子

html

<style>
  .div {
    background-color: red;
    line-height: 50px;
  }
  .span {
    display: inline-block;
  }
</style>
<body>
  <div class="div">
    <span class="span"></span>
  </div>
</body>

描述盒子

解析模式

属性: box-sizing
说明: 设置盒模型解析模式，即修改用于描述容器盒子宽高所表示的内容
取值
- content-box: 默认，标准盒模型，指定的宽高为元素的尺寸，不包括元素的内边距和边框
- border-box: 怪异盒模型，指定的宽高为盒子的尺寸，包括元素的内边距和边框
- inherit: 元素从父元素继承 box-sizing 属性的值
注意
- 如果出现怪异模式可能是没有 DTD 声明，需在开头加上 <!doctype html>
- 实际的开发中使用 box-sizing 模式更加方便
- 如果内边距加上边框的宽度超出了设置的宽度，则以内边距加上边框的和作为元素的宽度，高度同理
前缀: -moz-box-sizing、-webkit-box-sizing
补充: 从定义和取值可推测，还存在 padding-box(曾支持) 和 margin-box(缺乏场景不支持) 两个属性

描述尺寸

固定宽高: width、height
- auto: 默认，自动计算
- <num><unit>: 自定义值，num 非负数数，unit 为单位
- inherit: 从父元素继承
最小宽高: min-width、min-height
- <num><unit>: 自定义值，num 为非负数，unit 为单位
- inherit: 从父元素继承
- auto: 默认(可通过过渡效果证明)
最大宽高: max-width、max-height
- none: 默认，没有最大限制
- <num><unit>: 自定义值，num 为非负数，unit 为单位
- inherit: 从父元素继承
调节宽高: resize
- none: 默认，不允许调节元素尺寸
- both: 允许调节元素宽度和高度
- horizontal: 允许调节元素宽度
- vertical: 允许调节元素高度
补充说明
- 优先级：min- > max- > width/height，即便 width/height 指定了 !important
- 百分比:
  - 正常定位: 子元素相对于父元素的 content box 计算
  - 绝对定位: 子元素相对于父元素的 padding box 计算
- resize 生效需要先设置 overflow 属性，取值为 auto、hidden 或 scroll

css

/* .box width = 1000px */
.box {
  min-height: 1000px;
  width: 800px;
  max-height: 600px;
}

内边距

属性: padding-top、padding-right、padding-bottom、padding-left、padding
取值: <num><unit>: 自定义值，num 为非负数，unit 为单位，默认 0
说明
- padding 为复合属性，按上、右、下、左的顺序设置内边距，对边(上下，右左)值相同可省略靠后的值，四边值相同可省略只写一个
- 百分数值是相对于其父元素的宽度计算的(不论是哪个方向的 padding)
- 行内元素设置百分比 padding，会出现幽灵空白节点，需要设置 font-size: 0 进行修正
- 部分元素在浏览器中存在默认 padding，如 ul、ol、input、button、select
- 对于非替换元素的 内联元素 ，顶部和底部的 padding、margin、border 不会加入高度计算，但实际都发生了渲染，但会影响父元素 overflow: auto 时的表现

html

<div style="border: 1px solid black">
  <span style="padding: 20px; margin: 20px; background: red">233</span>
  <span style="padding: 50px; border: 10px solid; background: green">233</span>
</div>

外边距

属性: margin-top、margin-right、margin-bottom、margin-left、margin
取值
- auto: 自动
- <num><unit>: 自定义值，num 为实数，unit 为单位
- inherit: 继承父级
默认: 0
说明
- margin 为复合属性，安上、右、下、左的顺序设置外边距，对边(上下，右左)值相同可省略靠后的值，四边值相同可省略只写一个
- 百分数值是相对于其父元素的宽度计算的(不论是哪个方向的 margin)
- 当元素处于充分利用可用空间(即表现为流动性) 时，margin 可以影响元素可视尺寸
- 滚动内容底部留白使用 margin 代替 padding 可以兼容 IE 和火狐
- margin: auto 作用在自动填充方向上，默认 write-mode 下为水平方向
  - 利用单侧的 margin-left/right: auto 可以实现对齐
  - 双侧的 margin: auto 可以实现居中
- 绝对定位下，当子元素宽度(仅限宽度)超过自动计算宽度时，会进行左对齐
- 以下情况下 margin 失效
  - 行内非替换元素的垂直 margin 无效
  - tr 和 td 元素或 table-cell 或 table-row 元素
  - 绝对定位元素非定位方位
  - 默认 overflow 定高容器内单一子元素的 margin-bottom 或定宽容器内单一子元素的 margin-right
  - 外边距值小于 float 元素宽度
  - 内联特性造成的 margin 失效
外边距合并
- 条件
  - 有合并效果: 普通文档流中块级元素(block, flex)的垂直外边距
  - 无合并效果: 行内框(inline, inline-block, inline-flex)、浮动框或绝对定位之间的垂直外边距
- 表现
  - 当两个垂直外外边距相遇时将合并成一个外边距，高度取合并前较高的外边距
    - 兄弟元素：元素的下边距与相邻兄弟的上边距进行合并
    - 父子元素：父元素与首个或末尾子元素上下边距进行合并，满足以下任一条件即可消除该现象
      - 父元素设置为块状格式化上下文元素
      - 父元素设置 border-top/bottom
      - 父元素设置 padding-top/bottom
      - 父元素与首个或末尾子元素之间添加内联元素
      - 对于底部外边距合并，设置父元素高度(height, min-height, max-height) 也可消除
  - 当元素为空元素时(无垂直方向的高度、内边距、边框)，其上下外边距将合并

html

<style>
  .wrap {
    margin: 200px;
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px solid black;
  }
  .box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px dashed red;
    width: 300px;
    height: 300px;
    margin: auto;
  }
</style>
<div class="wrap">
  <div class="box"></div>
</div>

边框

基本边框

属性
- border-<direction>-width: 单边宽度；direction 取值为 top 、 right 、 bottom 、 left
- border-<direction>-style: 单边样式；direction 取值同上
- border-<direction>-color: 单边颜色；direction 取值同上
- border-<direction>: 单边属性，该属性为复合属性
- border-width: 边框统一宽度
- border-style: 边框统一样式
- border-color: 边框统一颜色
- border: 边框统一属性，该属性为复合属性，属性无顺序说明
取值
- width
  - thin: 细边框，= 1px
  - medium: 中等边框，medium = 3px (默认值，原因是 border-style: double 至少 3px 才有效果)
  - thick: 粗边框，= 4px
  - <num><unit>: 自定义值，num 为非负数，unit 为单位
  - inherit: 从父元素继承边框宽度
- style
  - none: 无边框
  - hidden: 同 none ，但应用于表时可以解决边框冲突
  - solid: 实线边框
  - dashed: 虚线边框
  - dotted: 点状边框
  - double: 双线边框，宽度等于 border-width 的值
  - groove: 3D 凹槽边框，效果取决于 border-color 的值。
  - ridge: 3D 凸槽边框，效果取决于 border-color 的值。
  - inset: 3D 凹边边框，效果取决于 border-color 的值。
  - outset: 3D 凸边边框，效果取决于 border-color 的值。
  - inherit: 继承父级边框样式
- color
  - <color-name>: 颜色名称
  - <hex-number>: 十六进制数字
  - <rgb-number>: RGB 格式
  - <rgba-number>: RGBA 格式
  - transparent: 透明
  - inherit: 继承父级
默认
- width: medium
- style: 未指定
- color: 未指定
说明
- 不支持百分比值，类似的如 outline box-shadow text-shadow 属性
- 默认取当前 color 作为 border-color，类似的如 outline box-shadow text-shadow
- 同 padding，border-color: transparent 也可用于增大热区面积
- border 可以用于绘制三角形

css

/* 左三角 */
.triangle-left {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 173px solid pink;
}

圆角边框

属性
- border-top-left-radius: 左上圆角
- border-top-right-radius: 右上圆角
- border-bottom-left-radius: 左下圆角
- border-bottom-right-radius: 右下圆角
- border-radius: 圆角边框，顺序为左上、右上、右下、左下，该属性为复合属性，对角(左上对右下、右上对左下)相同可以省略顺序靠后的值，四角值相同可省略只写一个
取值
- <num><unit>: 自定义值，用于确定一个圆形，num 为非负数，unit 为单位
- x/y: 自定义值，用于确定一个椭圆，x 和 y 的取值同上
默认: 0

边框图片

属性
- border-image-source: 使用的边框图片，取值 url('src')
- border-image-slice: 边框图片的向内偏移
- border-image-width: 边框图片区域裁剪，详见文档
- border-image-outset: 边框图像可超出边框盒的大小
- border-image-repeat: 填充边框的模式，详见文档
- border-image: 复合属性，试用时将替换 border-style 的效果

轮廓

说明: 轮廓为绘制元素周围的线，位于边框外围，用于突出元素
属性
- outline-color: 轮廓颜色
- outline-style: 轮廓样式
- outline-width: 轮廓宽度
- outline: 该属性为复合属性，无顺序要求
- outline-offset: 轮廓偏移，与边框边缘的距离，可正可负
取值
- color
  - <color-name>: 颜色名称
  - <hex-number>: 十六进制数字
  - <rgb-number>: RGB 格式
  - <rgba-number>: RGBA 格式
  - invert: 反转颜色，可使轮廓在不同的背景中都是可见的
  - inherit: 继承父级
- style
  - none: 无轮廓
  - dotted: 点状轮廓
  - dashed: 虚线轮廓
  - solid: 实线轮廓
  - double: 双线轮廓，双线宽度为 outline-width 值
  - groove: 3D 凹槽轮廓，效果取决于 outline-color 值
  - ridge: 3D 凸槽轮廓，效果取决于 outline-color 值
  - inset: 3D 凹边轮廓，效果取决于 outline-color 值
  - outset: 3D 凸边轮廓，效果取决于 outline-color 值
  - inherit: 继承父级
- width
  - thin: 细轮廓
  - medium: 中等轮廓
  - thick: 粗轮廓
  - <num><unit>: 自定义值，num 为非负数，unit 为单位
  - inherit: 继承父级
- offset
  - <num><unit>: 自定义值，num 为实数，unit 为单位
默认
- color: inherit
- style: none
- width: medium
- offset: 0
注意
- 轮廓线不占据空间
- 轮廓可能是非矩形

盒子阴影

box-shadow: 属性值包括水平位置、垂直位置、模糊距离、阴影尺寸、阴影颜色、阴影表现

取值
- <h-offset>: <num><unit>，自定义水平偏移位置，正值向右，负值向左
- <v-offset>: <num<unit>>，自定义垂直偏移位置，正值向下，负值向上
- <blur>: <num><unit>，自定义模糊距离，数值为正
- <spread>: <num><unit>，自定义阴影尺寸，正值为相对于元素尺寸增大，负值为相对于元素尺寸缩小
- <color>: 颜色
- inset/outset: inset为内部阴影，outset为外部阴影
默认
- none
- 其他子属性
  - <blur>: 0
  - <spread>: 0
  - <color>: 黑色
  - inset/outset: outset
注意
- 除了水平位置和垂直位置，其他属性可选
- blur 的顺序排在 spread 之前
- 可以添加多个引用，通过逗号进行分隔

背景

background 用于描述背景，是一个复合属性，其复合了一或多个属性值，且没有固定顺序，未指定的值都使用默认值

子属性如下
- background-color: 背景颜色，取值为合法的颜色或颜色名称
- background-image: 背景图片，取值为 url()
- background-repeat: 背景图重复，取值为 repeat/no-repeat/repeat-x/repeat-y 择一
- background-position: 背景图位置，取值为 <x-axis>/left/center/right/<x>% <y-axis>/top/middle/bottom）/<y>%，支持像素、百分比、固定值
- background-attachment: 背景附着，元素滚动时背景的表现，取值为 fixed/scroll/inherit
- background-size: 背景图片尺寸，取值 contain(缩放背景装入背景区)、cover(缩放背景覆盖背景区)、auto(默认)、<length>、<percent>
- background-origin: 背景图片的原点位置，background-attachment 为 fixed 时失效，取值border-box、padding-box(默认)、content-box
- background-clip: 背景覆盖的范围，取值 border-box(默认)、padding-box、content-box

蒙版

mask 用于设置蒙版，是一个复合属性，由于该属性暂时需要 -webkit 前缀，这里不做过多叙述，详见文档

mask-image: none
mask-mode: match-source
mask-repeat: repeat
mask-position center
mask-clip: border-box
mask-origin: border-box
mask-size: auto
mask-composite: add

溢出表现

overflow 用于描述元素内容溢出时的表现

该属性是 overflow-x 和 overflow-y 的简写
指定一个关键字表示 x 和 y 相同，指定两个关键字，第一个用于 x，第二个用于 y
关键字
- visible: 默认，超出仍然展示
- hidden: 超出内容隐藏，不提供滚动条，但仍是滚动的容器，可以通过编码控制滚动
- clip: 超出内容裁剪，不提供滚动条，且无法通过编码控制滚动
- scroll: 展示滚动条，但是无论内容是否超出都展示
- auto: 自动判断，若内容超出则展示滚动条，若不超出则不展示滚动条

盒子模型 ​

表现类型 ​

内外盒子 ​

外部尺寸与流 ​

内部尺寸与流 ​

幽灵空白节点 ​

描述盒子 ​

解析模式 ​

描述尺寸 ​

内边距 ​

外边距 ​

边框 ​

轮廓 ​

盒子阴影 ​

背景 ​

蒙版 ​

溢出表现 ​

盒子模型

表现类型

内外盒子

外部尺寸与流

内部尺寸与流

幽灵空白节点

描述盒子

解析模式

描述尺寸

内边距

外边距

边框

轮廓

盒子阴影

背景

蒙版

溢出表现