乐趣区

关于css3:css属性-overflow

jiezi

overflow: 定义当一个元素的内容太大而无奈适应 块级格式化上下文 时候该怎么显示。它是 overflow-x 与 overflow-y 属性的简写。

值

  • visible【默认值】
    内容不会被修剪，溢出会出现在元素框之外。
  • hidden
    溢出内容被剪裁，不可见，不提供滚动条。
  • scroll
    溢出内容被剪裁，浏览器显示滚动条查看溢出内容。
  • auto
    如果内容不溢出，不显示滚动条；
    如果内容溢出，相似于 scroll, 显示滚动条查看溢出内容；
  1. 除 visible(默认值) 以外的值，都会创立一个新的块级格式化上下文；
  2. 为使 overflow 有成果，块级容器必须有一个指定的高度（height或者 max-height）或者将white-space 设置为nowrap。

语法

从值中选出一个或两个关键字来指定 overflow 属性:
overflow: overflow-x overflow-y；
如果设置一个关键字，overflow-x和 overflow-y 设置为雷同的值。
也可独自对 overflow-x 和overflow-y设置值。

overflow-x: scroll;
overflow-y: hidden;
/* On Firefox 61 and 62, this is the same as */
overflow: hidden scroll;
/* But on Firefox 63 and later, it will be */
overflow: scroll hidden;

设置一个轴为 visible（默认值），同时设置另一个轴为不同的值，会导致设置visible 的轴的行为会变成auto。

理论问题

y 轴溢出滚动条，x 轴溢出显示

原本认为 overflow-y: auto; 就能够解决，理论 x 轴溢出内容不显示；
而后批改为 overflow-y: auto; overflow-x: visible;或 overflow: visible auto , 让 x 轴溢出之后不剪切也不呈现滚动条，理论后果还是 x 轴溢出内容不显示。

起因
一个轴为 visible，另一个轴为不同的值，会导致设置visible 的轴的行为变成auto。

退出移动版