本文深入探讨了CSS中的垂直布局技巧，详细解释了overflow属性的不同设置及其对内容溢出的影响。同时，文章着重分析了外边距折叠现象，特别是垂直外边距在兄弟元素和父子元素之间的交互，并提出了解决父子外边距重叠问题的面试题。此外，还介绍了创建圆形的border-radius用法。
目录
注：本文基于VSCode
一、垂直布局
使用overflow属性设置父属性如何处理溢出的子元素
可选值：
hidden 裁剪掉多余的内容
visible 默认值 文本正常显示
scroll 生成双向的滚动条，可以通过滚动条查看完整内容
auto 根据实际内容出现滚动条
overflow-x 对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成
overflow-y 对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成
块元素默认情况下，宽度是父元素内容区的100%，高度是被内容撑开的
在垂直布局中，一般情况下，我们不设置高度，让元素被内容撑开
二、外边距的折叠
垂直外边距的折叠
1、兄弟元素：如果两个值都是正值，谁大听谁的
如果是负值，谁小听谁的（绝对值谁大的听谁的）
如果一正一负，最终的值为两者相加
2、父子元素：
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素
导致父元素的位置发生变化，会影响到父元素下面的布局
所以这个问题必须要解决
面试题：如何解决父子外边距重叠的问题
重点，如何设置圆形 border-radius
扫一扫
229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
