CSS盒模型

2021-10-07 | 0 评论 | 0 浏览

在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box ) 和 内联盒子 (inline box )。这两种盒子会在页面流 （page flow）和元素之间的关系 方面表现出不同的行为。

外部显示类型

可以通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。
外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠。

模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下按照正常文档流布局，也可以通过使用类似 flex 的 display 属性值来更改内部显示类型。

设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。该盒子的所有直接子元素都会成为flex元素，会根据弹性盒子（Flexbox ）规则进行布局

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。

盒模型的各个部分

标准盒模型：给盒设置 width 和 height，实际设置的是 content box 。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。

替代IE盒模型：所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。

如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。可以有负数，只是代表了方向。

外边距折叠：两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。

不能有负数量的内边距，所以值必须是0或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。

display有一个特殊的值，它在内联和块之间提供了一个中间状态。

一个元素使用 display: inline-block，实现我们需要的块级的部分效果：