本文详细介绍了CSS布局中的水平布局和垂直布局。在水平布局中，元素位置由margin、border、padding和width等七个属性决定，并讨论了自动调整情况。对于垂直布局，讲解了父元素高度设定及overflow属性处理溢出子元素的方式。同时，文章还提到了垂直外边距的重叠/折叠现象及其处理方法。
一、水平布局：
1 在文档流中，某元素在其父元素中水平方向的位置，由七个属性决定：
margin-left
border-left
padding-left
width （默认值为auto）
padding-right
border-right
margin-right
2 一个元素在其父元素中水平布局必须要满足以下的等式：
margin-left＋border-left＋padding-left＋width＋padding-right＋border-right＋margin-right＝其父元素内容区的宽度
以上等式必须满足，如果相加结果使等式不成立，称为过渡约束，则等式会自动调整
3 自动调整情况：
这七个值中有三个值可设置为auto：width、margin-left、maring-right
- 如果这三个值中没有auto：则浏览器会自动调整margin-right值以使等式满足
- 如果一个值为auto：则会自动调整为auto的那个值以使等式成立
- 如果两个值为auto：
- 【一个宽度和一个外边距设置为auto】则宽度会调整到最大，设置为auto的外边距会自动为0
- 【两个外边距都设置为auto，宽度固定】则会将外边距设置为相同大小
- 如果三个值都设置为auto：则外边距都是0，宽度最大
经常利用这个特点（加红部分
最低0.47元/天 解锁文章
271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
