overflow,overflow-x,overflow-y 用法

overflow 水平方向,垂直方向都会设置

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

hidden 内容会被修剪,并且其余内容是不可见的。

1 内容的可视区域,除了规定的width,height,之外,还有padding,区域都是可视区域
2 所以加上这个属性,如果区域中的内容超过规定的width,height, padding之外的都会被隐藏

scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

1 无论内容有没有超过规定的区域 都会加上滚动条
2 在可视区域内加上滚动条和滚动轴
3 滚动轴相当于要显示内容的长度+padding的长度,滚动条相当于可视区域的长度(可视区域是规定的长度+padding的长度)
4

auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

1 只有内容超过规定区域才会加上滚动条,没有超过就会去掉

inherit 规定应该从父元素继承 overflow 属性的值。

overflow-x 只会设置水平方向 属性值都跟overflow一样

overflow-y 只会设置垂直方向 属性值都跟overflow一样

猜你喜欢

转载自www.cnblogs.com/tianhen/p/11252078.html