盒模型

css布局中，最重要的是要理解盒模型。

标准盒模型

MDN盒模型

content

内容区，由宽高所覆盖以及内含子元素的区域

padding

内边距，在边框和内容之间的区域

border

边框，在padding之外的包裹内容

margin

外边距，与其他布局元素的间隔区域

盒模型修改

MDN盒模型修改

使用box-sizing修改盒模型，将原本限定宽高的区域从content移到border外部。
原始的width height所表示的区域是 content范围，
使用 box-sizing:border-box修改之后，其content内容的宽高则为 height-border-padding，width-border-padding 所标识的区域，并且所有内容向内集中，外部宽高保持不变。
两种方式都不包括margin所表示的范围。

outline

盒模型的轮廓线，除去margin的盒模型最大范围。outline本身是不占布局空间，因此不会影响布局。

背景

和box-sizing一样，背景也是有范围大小的，当给元素设定背景时，无论是图片，还是背景色，都会发现，背景范围超过内容区域。因此我们需要对背景做裁剪，使用 background-clip属性

• 默认 border-box
  以元素的边框外沿作为背景覆盖的宽高，宽度为 width + padding+border，高度为height+padding+border
• padding-box
  以内边框外沿作为背景覆盖宽高，宽度为 width + padding，高度为 height + padding
• content-box
  以内容区域作为背景覆盖宽高 ，宽度为width 高度为height

如果是行内元素，content的范围就是宽高的值。

内容溢出

当content内容超过限定的height，width时，会发生内容溢出，破坏需要的布局方式。在不修改宽高的情况下，解决办法

overflow

overflow属性标识该盒模型content的展示方式
有三种 超出滚动 scroll，超出隐藏 hidden，还有默认。

常规盒类型

block

默认情况下，水平方向块元素将会单独占行，段落前后有换行符。可以设置宽高可以修改content区域

inline

默认情况下，行内元素是无法设置宽高的，其content区域由内容撑起，当父级块元素内部无法放置行内元素时，会被折行，并且本身完整性将被折断。段落前后没有有换行符。
如果行内元素是文本，则设置margin、padding、border时，垂直方向上不占空间，水平方向会占据布局空间。

inline-block

默认情况下，行内块元素保留完整的margin、padding、border以及宽高设置，同时又和行内元素一样，水平方向和其余行内元素共享空间。

可替换元素不可替换元素分类

使用行内元素 img，input，textarea等时，发现其表现形式和行内块基本一致，这是因为，该元素本身并不是由标签决定的，而是将被浏览器替换为其他内容，因此，称为可替换元素。

而其他直接表现为标签内容，称之为不可替换元素，例如span，a等等。