CSS--盒模型

学习自MDN—盒模型

盒模型

所有HTML元素都可以看做盒子，由块级元素会生成块级盒子，而行内元素生成的是内联盒子

块级盒子(Block box)

1. 盒子会在内联方向上扩展（横向）并占据父容器在该方向上的所有可用空间，绝大多数情况下意味着盒子和父容器一样宽
2. 盒子会换行
3. width和height会发挥作用
4. 内边距padding，边框border和外边距margin会将其他元素从当前盒子推开
5. 常见的块级盒子：<h>系列、<p>，<div>等

内联盒子(Inline box)

1. 盒子不会产生换行
2. width和height属性将不起作用
3. 垂直方向的内边距、外边距以及边框会被应用，但是不会把其他处于inline状态的盒子推开
4. 水平方向的内边距、外边距以及边框会被应用且会把其他出于inline状态的盒子推开。
5. 常见的内联盒子，<a>,<span>,<em>,<strong>

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

内部和外部显示类型

css的box模型有一个外部显示类型来决定盒子是块级还是内联，同样盒模型还有内部显示类型，来决定盒子内部元素是如何布局的，默认情况下是按照正常文档流布局，即上述的块级和内联,但是可以使用类似flex的display属性来改变内部显示类型。
块级和内联布局是web上默认的行为，它有时候被称为正常文档流， 因为如果没有其他说明，我们的盒子布局默认是块级或者内联。

CSS盒模型

完整的CSS盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容，模型定义了盒的每个部分：margin，border，padding，content，合在一起就创建了我们在页面上看到的内容。为了兼容和一些额外的复杂性，有一个标准和替代的IE盒模型

盒模型的组成

一个块级盒模型由四个部分组成：

1. Content box:用来显示内容，大小可以通过设置width和height
2. Padding box：内边距，包围在内容区域外部的空白区域，通过paddding相关属性设置，不能有负值，必须大于等于0，位于边框和内容之间，常用于将内容推离边框
3. Border box：边框，包裹内容和内边距，大小通过border相关属性设置。可以设置每条边的宽度、颜色、样式：border-width(border-top-width)，border-style，border-color
4. Margin box:外边距，是盒子和其他元素之间的空白部分，通过margin设置，会把其他元素从盒子旁边推开，可为正或负。外边距折叠问题，当有两个外边距相接的元素，这些外边距将合并为一个外边距，为最大的单个外边距的大小

盒模型类型

1. 标准模型(content-box)中，如果给盒设置width和height实际上设置的是content box，pading和border再加上设置的宽高一起决定整个盒子的大小，即标准模型宽度=width + padding-left + padding-right + border-left + border-right
2. IE盒模型中，内容宽度 = width-padding-border，当设置width的时候，这个宽度包括了内容宽度、内边距和边框的宽度。可以通过设置其box-sizing为border-box来实现，告诉浏览器使用替代模型。
   如果希望所有元素都使用替代模式，将box-sizing设置到html元素上，然后所有元素都继承该属性

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

display:inline-block

对于内联模式来说，例如span标签，对它应用了width、height、border、padding、margin，其中width和height是被忽略掉了，其他的能生效，但是不会改变他们的内容和其他内联盒子之间的关系，导致内容重叠。

在内联和块之间提供了一种中间状态：不希望一个项转换到新行，但希望可以设定宽度和高度，避免看到内容之间的重叠。

• 可以设置width和height
• padding、margin以及border会推开其他元素