overflow
一、总结
一句话总结:
overflow是用来操作box中溢出的内容的,overflow常用属性值有四个:visible(默认值)、hidden、scroll、auto(最常用);除默认值visible之外,其它都触发bfa
二、overflow
转自或参考:overflow
https://www.cnblogs.com/Simple-and-complex/p/10755701.html
overflow的用法还是比较灵活, 也是使用比较频繁的css属性, 在多次使用之后有了心得, 记录一下。
overflow的属性
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
visible:一般用于当某元素被设置overflow的其他属性, 需要动态去掉的时候使用
hidden:需要隐藏、裁剪一个元素的时候使用。 也可用于清除边距重叠,比如:
<div style="margin: 100px 0;background: #ff0;"> <div style="margin: 100px 0;background: #f0f"> div二 </div> div一 </div>
上面的两个div设置了上下边距各100px,我们期望的是div一上边距100px,div二距里div一的上边距100px。
实际上只有div一和div二的上边距重叠100px
上下元素的margin会发生重叠,重叠后取最大的margin,很多时候这不是我们想要的,overflow:hidden就派上用场了, 使用这个属性就可以清除重叠。
如下图,这是一个简单的用法。
我们常使用的 一段文字超出显示省略号, 也是通过hidden这个属性来实现的, 比如:
overflow:hidden; text-overflow:ellipsis; white-space:nowrap
scroll:元素显示滚动条, 以查看元素的全貌
auto:元素自适应显示
auto和scroll在内容超出元素的时候都可以通过滚动条来查看内容的全貌,不过auto比scroll更美观。
scroll无论是否超出元素, 元素都将显示滚动条
auto在内容没有超出元素的时候是不存在滚动条的,只有在超出的时候才显示
inherit:元素继承父级属性
父级的overflow是什么属性,该元素就是什么属性。
overflow样式属性比较常用, 在某些地方灵活使用可以少些代码,提高项目的性能