盒模型

# 综合

# display

display: <显示>

常规

• none：隐藏
• inline：内联元素（width，height，margin 无效）

block

• block：块级元素
• inline-block：内联块级元素

flex

• flex：flex 布局

• inline-flex：内联 flex 布局

grid

• grid：grid 布局

• inline-grid：内联 grid 布局

table

• table：表格元素
• inline-table：内联表格元素
• table-caption：caption 元素
• table-header-group：thead 元素
• table-row-group：tbody 元素
• table-footer-group：tfoot 元素
• table-column-group：colgroup 元素
• table-column：col 元素
• table-row：tr 元素
• table-cell：th / td 元素

其他

• contents：内容元素

  说明

  元素本身不产生任何盒子，因此宽高，背景，边框轮廓，内外边距都失效。元素在 dom 结构中存在，但是表现出来跟不存在一样（类似 Vue 中的 template 标签），自身被忽略了，只有内容留下（包括文本，子元素，伪元素）。

  元素的颜色，字体等可继承属性照样被后代继承。

  使用场景：

  • 充当无语义的包裹框；
  • 在 flex 布局中被穿透；

  比如 A 元素嵌套 B 元素嵌套 C 元素，A 元素设置 flex 布局，B 元素设置为内容元素，则 B 元素会被忽略，C 元素将作为 A 元素 flex 布局的项目。

• flow-root：TODO

• list-item：li 元素

# box-sizing

box-sizing: <盒尺寸类型>

• content-box：内容盒（width = content）默认值
• border-box：边框盒（width = content + padding + border）

# overflow-x

overflow-x: <水平溢出>

• visible：显示 默认值
• hidden：隐藏
• auto：溢出时显示滚动条
• scroll：溢出与否都显示滚动条

# overflow-y

overflow-y: <垂直溢出>

• visible：显示 默认值
• hidden：隐藏
• auto：溢出时显示滚动条
• scroll：溢出与否都显示滚动条

# overflow

overflow: <水平垂直溢出>

• visible：显示 默认值
• hidden：隐藏
• auto：溢出时显示滚动条
• scroll：溢出与否都显示滚动条

# visibility

visibility: <可见性> 继承

• visible：可见 默认值
• hidden：不可见（占空间）
• collapse：隐藏表格的行或列（不占空间）

# backface-visibility

backface-visibility: <背面可见性>

• visible：可见 默认值
• hidden：不可见（占空间）

# 尺寸

# width

width: <宽度>

• 长度值
• 百分值：相对于父容器宽度
• min-content：单位内容中最大的宽度
• max-content：内容的实际宽度，不用考虑父容器的宽度
• fit-content：内容的实际宽度，不能超过父容器的宽度

宽度取值：min-content，max-content，fit-content - JSRUN.NETopen in new window

# height

height: <高度>

• 长度值
• 百分值：相对于父容器高度

# min-width

min-width: <最小宽度>

• 长度值
• 百分值：相对于父容器宽度

# min-height

min-height: <最小高度>

• 长度值
• 百分值：相对于父容器宽度

# max-width

max-width: <最大宽度>

• 长度值
• 百分值：相对于父容器宽度

# max-height

max-height: <最大高度>

• 长度值
• 百分值：相对于父容器宽度

# 边距

# padding-top

padding-top: <上内边距>

• 长度值
• 百分值：相对于父容器宽度

# padding-bottom

padding-bottom: <下内边距>

• 长度值
• 百分值：相对于父容器宽度

# padding-left

padding-left: <左内边距>

• 长度值
• 百分值：相对于父容器宽度

# padding-right

padding-right: <右内边距>

• 长度值
• 百分值：相对于父容器宽度

# padding

padding: <padding-top> <padding-right>? <padding-bottom>? <padding-left>?

上右下左省略规则

# margin-top

margin-top: <上外边距>

• 长度值
• 百分值：相对于父容器宽度

# margin-bottom

margin-bottom: <下外边距>

• 长度值
• 百分值：相对于父容器宽度

# margin-left

margin-left: <左外边距>

• 长度值
• 百分值：相对于父容器宽度

# margin-right

margin-right: <右外边距>

• 长度值
• 百分值：相对于父容器宽度

# margin

margin: <margin-top> <margin-right> <margin-bottom> <margin-left>

上右下左省略规则