overflow属性详解

overflow属性详解_桃花扇J的博客-CSDN博客_overflow属性

原链接

overflow是对溢出内容的处理，有四个属性值visible，hidden，scroll，auto，且可以分别设置overflow-x，overflow-y，需要注意的是：当单独设置了overflow-x或者overflow-y为非visible时，另一个属性值默认为auto，如【例5】。下面先来介绍它的四个属性值.

1.visible（默认值）：使溢出内容展示【例1】

2.hidden：隐藏溢出内容且不出现滚动条【例2】

3.scroll：隐藏溢出容器的内容，溢出的内容可以通过滚动呈现【例3】

4.auto：与scroll没啥区别（就是scroll和auto还是有细微差别的。auto只有在内容溢出后才显示滚动条，内容不溢出不显示，有点而“智能”，scroll即使内容不溢出也显示滚动条）【例4】

【例1】visible

效果

代码

<!DOCTYPE html>
<html lang="en"><head><style>* {margin: 0;padding: 0;}.wrapper {position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;border: 1px solid #333;border-radius: 10px;color: #424242;overflow: visible;}.content {width: 250px;height: 250px;padding: 20px;border: 1px solid #33f;border-radius: 10px;background-color: rgba(200, 255, 200, 0.5);}</style>
</head><body><div class="wrapper"><div class="content"><p>我们在之前的一本著作中研究群体观念对各国发展的影响时已经指出，每一种文明都是少数几个基本观念的产物，这些观念很少能够得到革新。我们指出，这些观念在群体的心中是多么稳固，要想对这一过程产生影响是多么困难，以及这些观念一旦实现之后所拥有的力量。最后我们又说，历史的波动就是这些基本观念的改变所引发的结果。</p></div></div>
</body></html>

【例2】hidden：将属性值设置为hidden

效果

【例3】scroll：将属性值设置为scroll

效果

【例4】auto：将属性值设置为auto

效果

【例5】设置overflow-x：hidden，不设置overflow-y；

效果

笔者注意到，此时即使设置overflow-y为visible，也不能实现水平放向隐藏，垂直方向显示，垂直方向依旧是auto；

overflow属性详解相关推荐

html中overflow是什么标签,CSS中Overflow的属性是什么？Overflow属性详解
很多人学习css的时候,不太知道Overflow的属性是什么?怎么用Overflow的属性,下面Gxlcms为你总结一下Overflow属性和用法. 我们都知道,盒子的大小和盒子的位置都是可以用css ...
CSS Overflow属性详解(转)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...
Overflow属性详解(转载)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...
html元素的overflow属性详解
最近更新时间:2018年6月20日11:39:55 <我的博客地图> 最近接手一个老项目,该项目是用EasyReport这个Web报表工具在web页面动态展示数据库数据,在开发调试过程中遇 ...
CSS3：overflow属性详解
1.Overflow overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来: 如果内容超出容器却又不想其隐藏时可以将其属性值设 ...
php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解一.设定文字字体.颜色.大 ...
python中文读音ndarray-numpy中的ndarray方法和属性详解
NumPy数组的维数称为秩(rank),一维数组的秩为1,二维数组的秩为2,以此类推.在NumPy中,每一个线性的数组称为是一个轴(axes),秩其实是描述轴的数量.比如说,二维数组相当于是一个一维数 ...
spring MVC请求处理类注解属性详解
spring MVC请求处理类注解属性详解
Meta http-equiv属性详解
Meta http-equiv属性详解博客分类: Web综合 HTML浏览器IECache搜索引擎 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...

overflow属性详解

overflow属性详解相关推荐

最新文章

热门文章