overflow溢出的事件

overflow: 当内容溢出元素框时发生的事情。

它的值有:

visible: 默认值。内容不会被修剪,会出现在元素框外。

hidden: 内容会被修剪,并且其余内容是隐藏的。

比如:

我们实现一行分类按钮,然后它会根据不同屏幕宽度隐藏显示。

.a {

width:1000px;

overflow:hidden;

height:55px;

.b {

width:100px;

height:50px;

background-color:#969696;

}

}

现在类b是一个有着宽100,高50,背景色为灰色的按钮,我们有10个这样的按钮,在最大屏幕时是刚好摆得下,但在小屏幕上,它会被撑开出现两行。

现在就要把一行之外的都要隐藏,所以类a就用了overflow:hidden值,溢出了的就隐藏,如果类a只有固定的宽度,类a还是会被撑开,所以类a是一定要加

固定高度的,当类b高度超过类a高度的时候,超出的部分才会被隐藏。

scroll: 内容会被修剪,浏览器会显示滚动条。

auto: 如果内容修剪,浏览器就会显示。

inherit: 从父元素继承overflow属性的值。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容