水平方向布局

子元素在父元素的位置是父元素的内容区
子元素在父元素中的水平方向的布局，必须满足如下等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的width

如果七个值的和相加不等于父元素的宽度，则属于过度约束,则浏览器会自动调整右外边距的值，

例如：父元素：width: 500px
子元素：width: 200px
此时子元素 margin-left=0 border-left=0 padding-left=0 width=200 padding-right=0 border-right=0 margin-right被浏览器调整为300
如果将margin-left 或 margin-right 的一侧设置为auto，
则侧会设置尽量大的值

如果left和right都设置auto，则会将两侧外边距设置相等的值，
从而导致子元素在父元素中水平居中
-width设成auto则尽量为最大

垂直方向布局

如果不为父元素指定高度，则父元素会自动适应子元素的高度，确保能容纳所有的子元素
如果为父元素指定了高度，则指定多少就是多少，
此时如果子元素的大小超过了父元素，则会导致子元素从父元素中溢出。溢出的子元 素不会影响到页面的布局

使用 overflow 来设置溢出内容的处理方式
可选值：
visible，默认值 溢出内容不会被裁剪直接在父元素外部显示
hidden，溢出的内容会被裁剪，超过父元素的不会显示
scroll，生成滚动条，可以通过滚动条查看完整内容
auto，根据需要生成滚动条

margin-bottom和margin-top设置为auto时候效果是0
若不为父元素指定高度，则父height = 父paddingTop+子marginTop+子paddingTop+子height+子paddingBottom+子marginBottom+父paddingBottom