overflow: 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该怎么显示。它是 overflow-x
与 overflow-y
属性的简写。
visible
【默认值】hidden
scroll
auto
scroll
, 显示滚动条查看溢出内容;
- 除
visible
(默认值)以外的值,都会创建一个新的块级格式化上下文;- 为使
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
。
本来以为 overflow-y: auto;
就可以解决, 实际 x 轴溢出内容不显示;
然后修改为 overflow-y: auto; overflow-x: visible;
或 overflow: visible auto
, 让 x 轴溢出之后不剪切也不出现滚动条,实际结果还是 x 轴溢出内容不显示。
原因
一个轴为visible
,另一个轴为不同的值,会导致设置visible
的轴的行为变成auto
。
dreamweaver软件: 点此下载 1、熟悉网页设计的网友就知道,调用STYLE的方法很多...
随着网络时代的发展与进步,我们的学习工作和生活早已离不开互联网,智能家居、...
在开发中,如果遇到需要使用canvas同时绘制多张图片,但因为图片大小的不一样,...
windows 下默认的滚动条样式巨丑,项目中又有比较多地方会显示滚动条, 故回头翻...
Dreamweaver网页中的banner图片需要切换,我们可以添加按钮来切换图片,下面我们...
macromedia dreamweaver 8序列号 激活码: wpd800-50438-28032-39991 wpd800-599...
还记得我在《2020 年 JavaScript 状态调研报告小结》中提到的 2020 年全球开发者...
1、使用css精灵。 好处是将css中使用的小图片可以合并为一张大图片减少了对服务...
这是一款基于HTML5和JavaScript的进度条应用,这款进度条插件非常有特点,它在进...
Do not use these html elements in html pages. Presentational elements shoul...