overflow,overflow-x,overflow-y 用法

Posted tianhen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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一样

以上是关于overflow,overflow-x,overflow-y 用法的主要内容,如果未能解决你的问题,请参考以下文章

overflow-y:hidden;overflow-x:auto;无效?解决方法

overflow-x:auto和overflow-y:visible冲突,怎么解决

overflow属性我会用,但overflow-x和y不明白啥意思

css:overflow-x: overlay火狐浏览器不生效没有滚动条出现

css:overflow-x: overlay火狐浏览器不生效没有滚动条出现

overflow,overflow-x,overflow-y 用法