Skip to main content

盒子模型

盒子模型的基础属性​

属性说明
width元素宽度
min-width元素最小宽度限制
max-width元素最大宽度限制
height元素高度
min-height元素最小高度限制
max-height元素最大高度限制
padding边框内边距
border边框
margin边框外边距

width 与 height​

设置元素宽高。

  • auto，默认值
  • length
  • %，基于包含块的百分比宽/高

min-width/min-height 与 max-width/max-height​

设置元素的「最小宽度/最小高度」与「最大宽度/最大高度」。

min-width/min-height

  • length，默认值为0
  • %，基于包含块的百分比最小宽/高

max-width/max-height

  • none，默认值，没有最大宽高的限制
  • length
  • %，基于包含块的百分比最小宽/高

padding​

边框内边距。

  • length，默认值为 0，不能取负数
  • %，基于包含块的宽度百分比

margin​

边框外边距。

  • auto，默认值
  • length，可以取负数
  • %，基于包含块的宽度百分比

盒子模型分类​

标准盒子模型​

box-sizing: content-box;
  • 默认情况下所有节点都是标准盒子模型
  • 整个盒子的尺寸 (占据页面的大小) = margin + border + padding + content
  • 节点的 width 和 height 属性控制的是 content 的大小

怪异盒子模型​

box-sizing: border-box;
  • 通常情况下整个盒子的尺寸 (占据页面的大小) = margin + (width * height)
  • 节点的 width 和 height 属性控制的是 border + padding + content 的大小

对于怪异盒子模型来说，如果设置的 width、height 是大于 border、padding 的取值的，那么是符合上述两点的，width 和 height 会依次先被 border、padding 瓜分，最后剩余的空间就是 content 的。

但是，如果 border、padding 超出了 width 和 height 的范围，比如下面这样：

div {
  width: 100px;
  height: 100px;

  padding: 30px;
 
  border: 200px solid black;

  box-sizing: border-box;
}

这样就会无视掉 width 和 height 的设置，里面的 content 会被挤压为 0，整个盒子高度为 border-top-width + padding-top + padding-bottom + border-bottom-width，即 200px + 30px + 30px + 200px。

pic.sm

另外，来谈一下怪异盒子模型的应用，怪异盒子模型

助记
  • 盒子的可视区域：border + padding + content
  • content-box 指的是 width/height 控制的是 content 的大小
  • border-box 指的是 width/height 控制的是 border + padding + content 的大小

Reference​