overflow,overflow-x,overflow-y 用法

Posted 2022-05-18 tianhen

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一样