网页是一个多层的结构，一层叠着一层。通过 css 可以分别为每一层来设置样式
用户只能看到最顶上一层，这些层中，最底下的一层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列。
对于我们来元素主要有两个状态
CSS将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
元素中的所有的子元素和文本内容都在内容区中排列 。内容区的大小由 width 和 height 两个属性来设置
width 设置内容区的宽度
height 设置内容区的高度
边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
边框的大小会影响到整个盒子的大小
要设置边框，需要至少设置三个样式：
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
内容区和边框之间的距离是内边距
一共有四个方向的内边距：
padding-toppadding-rightpadding-bottompadding-left内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
一共盒子的可见框的大小，由 内容区 内边距 和 边框 共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算
padding 内边距的简写属性，可以同时指定四个方向的内边距
padding: 10px 20px 30px 40px; // 上，右，下，左（顺时针）的顺序
padding: 10px 20px 30px ; // 上，左右，下
padding: 10px 20px ; // 上下，左右
padding: 10px ; // 上下左右
外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置
一共有四个方向的外边距：
margin-top
上外边距，设置一个正值，元素会向下移动
margin-right
默认情况下设置margin-right不会产生任何效果
margin-bottom
外边距，设置一个正值，其下边的元素会向下移动
margin-left
左外边距，设置一个正值，元素会向右移动
注意：margin-right 也可以设置负值，如果是负值则元素会向相反的方向移动
元素在页面中是按照自左向右的顺序排列的，
所以默认情况下如果我们设置的左和上外边距则会移动元素自身
而设置下和右外边距会移动其他元素
margin的简写属性：margin 可以同时设置四个方向的外边距 ，用法和padding一样
margin会影响到盒子实际占用空间
元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right一个元素在其父元素中，水平布局必须要满足以下的等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度（必须满足）
以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
<style>
div.outer {
padding: 800px;
height: 200px;
border: 10px red solid;
}
div.inner {
height: 200px;
width: 200px;
background-color: #afb;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
此时就有
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
但明显不满足，所以浏览器会自动调整 margin-right = 800 - 200 = 600
如果将 .inner 里 width=auto 那么，auto 会自动调整
0 + 0 + 0 + auto(800) + 0 + 0 + 0 = 800
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
eg： width: xxpx; margin: 0 auto;
注意：如果子元素的 width 的值大于父元素的 width 时，那么浏览器会将子元素的 margin-right 设置为负值，显示的效果就是子元素的内容超出了父元素的框架。
?
垂直方向的布局没有水平那么复杂，也不需要满足什么公式
当父元素 height 没有设具体值（默认和 auto ）时，父元素的高度会被子元素的 height 撑开
若父元素 height 设的有具体值，且子元素的高度超出时，则子元素会从父元素中溢出
使用 overflow 属性来设置父元素如何处理溢出的子元素
overflow: visible 默认值 子元素会从父元素中溢出，在父元素外部的位置显示overflow: hidden 溢出内容将会被裁剪不会显示overflow: scroll 生成两个滚动条，通过滚动条来查看完整的内容overflow: auto 根据需要生成滚动条（常用）另外还有 overflow-x 和 overflow-y 表示 x 轴和 y 轴上的设置
原文：https://www.cnblogs.com/Liwker/p/14038252.html