框模型/ 盒模型/盒子模型
水平布局
元素在其父元素中的水平方向位置由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
共同决定
一个元素在其父元素中，水平布局必须满足：上述七个值的和=其父元素内容区的宽度
（1）若相加结果不成立，成为过度约束，则，等式会自动调整
（2）若七个值中没有为auto的情况，则，浏览器会自动调整margin-right使得等式成立
七个值中可设置为auto的有：width、margin-left、margin-right
（1）当有某一个值为auto，则会自动调整为auto的那个值使得等式成立
（2）若width=auto和某一个外边距=auto，则，宽度调整到最大，设置auto的外边距为0
（3）若width=auto和两个外边距都=auto，则，宽度调整到最大，设置auto的两个外边距都为0
（4）若width=固定值且两个外边距都=auto，则，将两外边距设置为相同的值
（通常使用该方式使得某元素在其父元素中水平居中）
水平居中举例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>关于盒子的水平布局</title><style>.boxOne{width: 600px;height: 200px;border:10px inset cadetblue;}.inner{width: 200px;height: 200px;background-color: lightblue;margin: 0 auto;}</style></head><body><div class="boxOne"><div class="inner"></div></div></body></html>
效果
若子元素width大于父元素width
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>关于盒子的水平布局</title><style>.boxOne{width: 600px;height: 200px;border:10px inset pink;}.inner{width: 800px;height: 200px;background-color: darksalmon;}</style></head><body><div class="boxOne"><div class="inner"></div></div></body></html>
效果
垂直布局
默认情况下，父元素的高度被内容撑开子元素大小超过父元素高度时，子元素会从父元素中溢出使用overflow属性：设置父元素如何处理子元素的溢出（1）visible默认值：子元素溢出，超出部分仍显示
（2）hidden：子元素被裁减，超出部分不会显示
（3）auto：根据需要生成滚动条（横向或纵向）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>关于盒子的垂直布局</title><style>.boxOne{width: 200px;height: 150px;background-color: darksalmon;overflow:auto;}</style></head><body><div class="boxOne">我的少年们，别因他人沉沦享乐而感到迷茫，别为如今的潦倒而感到沮丧。你夜以继日的努力、克制欲望的自律、孑然独行的从容，都正在带你去向更广阔的未来。朱颜易辞镜，千金会散尽，唯有千万个日夜汇聚的思想才是这个世上最锐不可当的锋芒。你不能就这样败在这里。 </div></body></html>
效果图
