盒子的水平布局（横向布局）
- margin-left 左外边距
- border-left 左边框
- padding-left 左内边距
- width 内容区宽度
- padding-right 右内边距
- border-right 右边框
- margin-right 右外边距
一个子元素在其父元素中，必须满足以下的等式
左外边距 + 左边框 + 左内边距 + 宽度 + 右内边距 + 右边框 + 右外边距
盒子的垂直方向布局
默认情况下父元素的高度被内容区撑开，子元素是在父元素的内容区内排列的，如果子元素的高度超过父元素的高度，子元素就会从父元素中溢出。
使用 overflow 属性来处理溢出的子元素
1、overflow 属性处理溢出的子元素
属性值：
visible：默认值，子元素会从父元素中溢出，在父元素外部的位置显示。
hidden：隐藏，溢出的内容会被裁剪不会出现。
scroll：滚动，生成两个滚动条，通过滚动条来查看完整的内容
auto：自动，根据需要自动生成滚动条。
2、overflow-x: 指定是否要剪辑的左/右边缘的内容
overflow-y：指定是否要剪辑顶部/底部边缘的内容
属性值：
visible：可见，不剪裁内容，可能会显示在内容框之外
hidden：剪裁内容，不滚动
scroll：剪裁内容，有滚动条
auto：自动
no-display：不显示，如果内容不适合内容框，则删除整个框。
no-content：如果内容不适合内容框，则隐藏整个内容。
3、overflow-wrap：用来说明当一个不能被分开的字符串太长而不能填充其包裹盒子时，为防止其溢出，浏览器是否允许这样的单词中断换行。
对过长的单词进行换行是将 空格 作为单词之间的分割进行换行
属性值：
normal：默认值，表示在正常单词结尾处换行
break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。
anywhere：任何地方，为了防止溢出，如果行中间没有其他可以接受的断点，则可以在任何点上断开本来无法断开的字符串（如长字符或URL）在断点处没有插入连字符。在计算最小内容内在大小时，考虑了考虑了断字引入的软包机会。
4、overflow-block：设置内容溢出块开始和块结束边时显示的内容
属性值：
visible：内容不会被剪切，并且可能在填充框的块开始和块结束边缘之外呈现。
hidden：如果有必要，内容将被裁剪以适合填充框中的块尺寸。没有提供滚动条。
scroll：如果有必要，内容将被裁剪以适合填充框的块尺寸。浏览器显示滚动条，无论是否实际剪切了任何内容。（这可以防止在内容更改时滚动条出现或消失。）打印机可能仍会打印溢出的内容。
auto：取决于用户代理。如果内容适合填充框，则其外观与相同visible，但仍会建立新的块格式上下文。如果内容溢出，桌面浏览器会提供滚动条。
5、overflow-anchor：溢出锚点CSS属性提供了一种退出浏览器滚动锚定行为的行为的方式，该行为会调整滚动位置以最大程度减少内容的偏移
属性值：
auto：自动，调整滚动位置时，该元素将成为潜在的锚点。
none：该元素将不会被选作为潜在的锚点。
