HTML布局

1.水平布局

元素的水平布局有几个属性共同决定

margin-left border-left paddin-left width padding-right border-right margin-right

一个元素在其父元素中，水平方向的等式

margin-left + border-left+ paddin-left+ width + padding-right +border-right +margin-right

=父元素宽度

0 + 0 + 0 + 100+ 0 + 0 +0=400 ？？

以上等式满足，如果不满足，则浏览器会自动调整，这个叫过度约束

浏览器调整

1:如果七个值没有auto ，那么浏览器会自动调整margin-right使我们等式满足

2:这七个值，width，margin-left，margin-right 可以设置auto

如果有设置auto，浏览器会自动调整auto的值

如果设置margin-left为auto

例子： 300 +0+0+100+0+0+0=400

3:如果同时设置width  margin  为auto，只调整width宽度

4:如果设置宽度固定，设置margin为auto

则两边的外边距会设置为相同的值，让元素在父元素中居中

2.垂直布局

1:不设置高度，默认被内容撑开

2:设置了，就听设置

元素如果溢出

overflow  处理溢出内容

可选值：

visible 溢出的内容会正常显示

hidden  溢出的内容会被裁减，不会显示

scroll  出现双侧滚动条

auto   根据溢出内容，出现滚动条

相关的属性：

overflow-x             overflow-y

处置外边距的重叠

在网页中相邻的垂直方向的外边距，会发生重叠

兄弟之间的重叠，会取最大值，不会取和，谁大听谁的

特殊情况

1:如果一正一负，取两者之和

2:如果两负，则取绝对值最大的

兄弟的外边距重叠问题，一般不解决

父子之间的外边距重叠

如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素

暂时解决方案

1:不用外边距

2:不相邻