关于前端:浏览器盒子模型

7次阅读

共计 1634 个字符，预计需要花费 5 分钟才能阅读完成。

在浏览器中，盒模型次要有两种：规范盒模型和 IE 盒模型。

规范盒模型：在规范盒模型中， 元素的宽度和高度只包含 content 的大小 ，不包含 border 和 padding。
IE 盒模型：在 IE 盒模型中，元素的宽度和高度包含 content、padding 和 border。

对于应用规范盒模型的元素，能够通过设置 width 和 height 属性来管制 content 的大小，而 padding 和 border 则会减少元素的总宽度和高度。例如：

div {
  width: 200px; /* content 宽度为 200px */
  height: 100px; /* content 高度为 100px */
  padding: 20px; /* 上下左右的 padding 均为 20px */
  border: 1px solid black; /* 边框为 1px 彩色实线 */
}

对于应用 IE 盒模型的元素，能够通过设置 width 属性来管制 content、padding 和 border 的总宽度，而 height 则管制了 content、padding 和 border 的总高度。例如：

div {
  width: 200px; /* 内容宽度为 200px，但总宽度应为 content + padding + border = 200 + 2*20 + 2*1 = 242px */
  height: 100px; /* 内容高度为 100px，但总高度应为 content + padding + border = 100 + 2*20 + 2*1 = 142px */
  padding: 20px; /* 上下左右的 padding 均为 20px */
  border: 1px solid black; /* 边框为 1px 彩色实线 */
  box-sizing: border-box; /* 将盒模型设置为 IE 盒模型 */
}

总之，通过管制盒模型的属性，能够实现对元素的宽度、高度、内外边距和边框款式的管制。

antd 框架应用的是 CSS 的盒子模型，包含了 content、padding、border 和 margin 等内容。而在默认状况下，antd 组件的宽度应该是包含了 padding 的值的 。这意味着，如果你设置一个 antd 组件的宽度为 300px，那么元素内容的宽度可能会小于 300px，因为该组件的 padding 值也占用了一部分空间。

如果你想要取得一个不蕴含 padding 的宽度值，能够应用 box-sizing 属性。box-sizing 属性用于定义元素的盒模型，能够应用以下两种值之一：

content-box：元素的宽度和高度仅包含元素内容的尺寸，不包含 padding、border 和 margin。
border-box：元素的宽度和高度包含元素内容、padding 和 border 的尺寸，但不包含 margin。

antd 应用的是 CSS 的盒子模型，默认状况下宽度（width）和高度（height）属性指定的是 content 区域的尺寸。然而，antd 的宽度包含 padding 和 border，但不包含 margin。这意味着如果你将一个 antd 组件的宽度设置为 300px，实际上整个宽度可能会大于 300px，因为 padding 和 border 的尺寸也会被计算在内。

例如，对于 Input 组件，如果您设置其宽度为 300px，则元素理论的宽度可能会是 300px + 左右 padding 值 + 左右 border 值。如果您须要包含所有盒子模型尺寸，能够应用 CSS 的 box-sizing 属性设置盒子模型的类型。能够设置如下两个属性值：

content-box：内容框的尺寸利用于元素的宽度和高度。如果设置宽度为 300px，那么其实只蕴含了元素的内容，不包含 padding 和 border。
border-box：整个盒子模型的尺寸利用于元素的宽度和高度。如果设置宽度为 300px，那么整个盒子模型的尺寸，包含 padding 和 border 值，都将作为这个宽度的一部分。

在 antd 中，大多数组件的 box-sizing 属性值都是 border-box。如果您想更改它们的 box-sizing 属性值，能够写自定义款式笼罩默认款式达到目标。

正文完