web前端--overflow用法详解

发布时间:2023-12-08 15:00

overflow三大作用

1、隐藏溢出的内容

例如:

#容器A{
	width:50px;
}

你好啊你好啊你好啊你好啊你好啊你好啊你好啊 你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊 你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊

字数过多,宽度较小,装不下自然就会超出容器。

overflow:hidden隐藏超出部分文字
auto 超出后会显示滚动条
scroll 永远有滚动条

2、解决外边距塌陷

在一个父元素中,子元素设置margin-top/bottom会塌陷给父元素,为防止这种现象发生,解决办法有:

设置父元素的padding、border、overflow:hidden。

3、解决浮动导致的父元素高度塌陷问题

父元素高度没有设置的情况下,子元素全部浮动,就会导致父元素高度塌陷。解决办法之一就是给父元素设置overflow。详情见下面代码。
overflow:hidden、auto、scroll均可。推荐使用hidden。这样父元素就会根据子元素或者子元素内容自适应变化。

.list1 {
            background: green;
            width: 800px;
            /* 6-内容溢出 */
            /* 溢出隐藏 */
            /* overflow: hidden; */
            /* 设置了之后,没有设置高度的父元素就会随着 */

            /* 溢出自适应,出现滚动条 */
            /* overflow: auto; */

            /* 溢出必出现滚动条 */
            /* overflow: scroll; */

            /* 溢出显示,不能清除浮动 */
            /* overflow: visible; */
        }

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号