水平方向
margin-left border-left padding-left width padding-right border-right margin-right
浏览器规定 水平方向的七个值相加必须要等于父元素内容区的宽度
0 5px 50px 100px 50px 5px 0 ==500 ?
像以上这种，如果不等于的话，浏览器它就会自己去调整这7个值，让我们的等式成立，这个过程叫过度约束
浏览器如何调整的？
1、如果7个值中没有设置auto，那浏览器就会调整margin-right
0 5px 50px 100px 50px 5px 290px ==500
2、7个值中有3个值可以设置auto ： margin-left width margin-right
1个auto,其他两个值为固定值
浏览器就会调整这个auto
2个auto，其他1个值为固定值
margin-left width 调整width
width margin-right 调整width
margin-left margin-right 同时margin-left margin-right，各占一半
3个auto
margin-left width margin-right 调整width
二、垂直布局overflow属性可以设置溢处的内容
可选值
visible 默认值 内容正常显示
hidden 裁剪多余的内容
scroll 出现双侧滚动条
box-shadow
用来设置元素的阴影效果，不会影响到页面布局
第一个值：水平偏移量 正->左 负->右
第二个值：垂直偏移量 正->下 负->上
第三个值：模糊半径 默认值0px
第四个值：颜色 默认值是盒子的背景色
.box2 {
width: 200px;
height: 200px;
background-color: #bfa;
border-radius:50%;设置圆形
}
行内元素盒模型
content 不可以直接设置宽高，被内容撑开的
padding 可以内边距，但垂直方向不会挤别人,也就是不会影响页面的布局
border 可以设置边框，但垂直方向不会挤别人，也就是不会影响页面的布局
margin 左右可以设置外边距，垂直方向不可以设置
visibility 用来设置元素的显示状态
可选值：
visible 默认值 元素在页面中正常显示
hidden 元素不在页面中显示（隐藏一个元素），位置依然保留
display none 隐藏一个元素 位置不保留
五、外边距的重叠兄弟元素的垂直方向外边距重叠的问题
1、两者都为正值，则谁大听谁的
2、若两者为负者，则谁的绝对值大，听谁的
3、若一正一负，则听两者相加的结果值
一般情况下，兄弟元素的外边距重叠问题，不需要额外的解决，利于我们开发
解决父子外边距重叠的方案
方案一
border: 1px solid transparent;
方案二：开启了元素的BFC属性
overflow: hidden;
六、盒子的大小默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定
box-sizing 用来设置盒子尺寸的计算方式 width/height 指的是谁
可选值：
content-box 内容区 默认值
border-box 宽度和高度用来设置整个盒子可见框的大小，
包括边框，padding，内容区
