css的box模型_CSS Box模型

css的box模型

Every CSS element is essentially a box. Every element is a generic box.

每个CSS元素本质上都是一个盒子。 每个元素都是一个通用框。

The box model explains the sizing of the elements based on a few CSS properties.

盒子模型基于一些CSS属性说明了元素的大小。

From the inside to the outside, we have:

从内到外，我们有：

• the content area
  内容区域
• padding
  填充
• border
  边境
• margin
  保证金

The best way to visualize the box model is to open the browser DevTools and check how it is displayed:

可视化盒子模型的最佳方法是打开浏览器DevTools并检查其显示方式：

Here you can see how Firefox tells me the properties of a span element I highlighted. I right-clicked on it, pressed Inspect Element, and went to the Layout panel of the DevTools.

在这里，您可以看到Firefox如何告诉我突出显示的span元素的属性。 我右键单击它，按Inspect Element，然后转到DevTools的“布局”面板。

See, the light blue space is the content area. Surrounding it there is the padding, then the border and finally the margin.

看到，浅蓝色空间是内容区域。 围绕它的是填充，然后是边框，最后是边距。

By default, if you set a width (or height) on the element, that is going to be applied to the content area. All the padding, border, and margin calculations are done outside of the value, so you have to take this in mind when you do your calculation.

默认情况下，如果您在元素上设置宽度(或高度)，则该宽度(或高度)将应用于内容区域 。 所有的填充，边框和边距计算都在值之外进行，因此在进行计算时必须牢记这一点。

You can change this behavior using Box Sizing.

您可以使用Box Sizing更改此行为。

翻译自: https://flaviocopes.com/css-box-model/

css的box模型