盒子的水平布局（横向布局）
元素在其父元素中水平方向的布局由以下的几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，必须满足以下的等式
左外边距 + 左边框 + 左内边距 + 宽度 + 右内边距 + 右边框 + 右外边距
盒子的垂直方向布局
默认情况下父元素的高度被内容区撑开
子元素是在父元素的内容区内排列的，如果子元素的高度超过父元素的高度，子元素就会从父元素中溢出。
使用 overflow 属性来处理溢出的子元素
overflow 属性值：
visible：默认值，子元素会从父元素中溢出，在父元素外部的位置显示。
hidden：隐藏，溢出的内容会被裁剪不会出现。
scroll：滚动，生成两个滚动条，通过滚动条来查看完整的内容
auto：自动，根据需要自动生成滚动条。
overflow-x: 指定是否要剪辑的左/右边缘的内容
overflow-y：指定是否要剪辑顶部/底部边缘的内容
属性值：
visible：可见，不剪裁内容，可能会显示在内容框之外
hidden：剪裁内容，不滚动
scroll：剪裁内容，有滚动条
auto：自动
no-display：不显示，如果内容不适合内容框，则删除整个框。
no-content：如果内容不适合内容框，则隐藏整个内容。
overflow-wrap：用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
(是按照空格来区分每个单词）
属性值：
normal：默认值，表示在正常单词结尾处换行
break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。
overflow-block：溢出阻止功能被指定为
属性值：
none：不显示使程序段轴溢出的内容
scroll：滚动，拖动滚动轴可以看到溢出的内容
optional-paged：通过滚动块轴可以看到溢出的内容，但是可以手动触发分页符，使得以下内容现实在下一页上。
paged：内容被拆分为多个页面，在下一页上显示在块轴上溢出一页的内容。
overflow-anchor：溢出锚点CSS属性提供了一种退出浏览器滚动锚定行为的行为的方式，该行为会调整滚动位置以最大程度减少内容的偏移。
属性值：
auto：自动，调整滚动位置时，该元素将成为潜在的锚点。
none：该元素将不会被选作为潜在的锚点。