关于css中overflow:hidden的使用
overflow:hidden有两个用处经常用到:
1、通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容;
但是,小编在以往的使用中,发现了一个问题,只要父级容器设定了overflow:hidden,
那么它的子孙元素都将会应用上去,并无法在内部消除,如果内部需要做div绝对定位position:absolute
溢出效果,则会被隐藏掉,so 在运用overflow:hidden时,请慎用。
2、清除浮动,一说这个,大家肯定想到的是clear:both;
但是,它们并不完全相同,overflow:hidden的清除浮动,是等于把居于它上空的人拉下来,关进自己盒子
的那个层次(z-index)以下的空间,不能出去,所以产生了一个隐藏的效果,只有在盒子空间的那个缺口处,
(就是容器本身的宽高范围内的可视界面)。
关于css中overflow:hidden的使用的更多相关文章
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- 转:css中overflow:hidden 不起作用了吗?
css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...
- CSS中overflow:hidden
CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...
- css 中 overflow: hidden清楚浮动的真正原因
1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...
- CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
- 对CSS了解-overflow:hidden
overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...
- css ie7中overflow:hidden失效问题及解决方法
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- 在ie7中overflow:hidden失效问题及解决方案
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- CSS 的overflow:hidden 属性详细解释
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...
随机推荐
- BZOJ 1934: [Shoi2007]Vote 善意的投票 最小割
1934: [Shoi2007]Vote 善意的投票 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnl ...
- Android多媒体-人脸识别
1. 相关背景 Google 于2006年8月收购Neven Vision 公司 (该公司拥有 10 多项应用于移动设备领域的图像识别的专利),以此获得了图像识别的技术,并不是常快应用到免费的 Pic ...
- [置顶] Java编程笔试题之一 ----文件操作
题目:给定一个文件和一个字符串,判断文件是否包含该字符串,如果包含,请打印出包含该字符串的行号以及该行的全部内容. 思路: ①使用缓冲流(BufferedReader)读取文件,定义初始行号为0. ...
- ant例子
1.安装ant 下载解压→环境变量配置→cmd输入ant 出现 Buildfile: build.xml does not exist! 代表安装成功 参考文章:http://www.cnblogs. ...
- java技术栈:项目概述
学习使用java到现在也有三年多了,这三年基本是以项目驱动的方式学习,有好有坏,个人觉得好处在于,有一个清晰的目标让你解决,这会让你学习非常迅速有效.当然坏处就是片面,不成体系.这种学习方式在学校以小 ...
- 面试学到的css布局,细节影响了我的面试成绩
这几天的面试很纠结,也让我注意到我的前端知识确实不行,从两个小细节总结: 1:body体的居中样式. 这个在IE和非IE Firefox Chrome Opera下面的差别 IE下text-align ...
- Android开发了解——ODEX
ODEX是安卓上的应用程序apk中提取出来的可运行文件,即将APK中的classes.dex文件通过dex优化过程将其优化生成一个·dex文件单独存放,原APK中的classes.dex文件会保留.这 ...
- Unity3D之Ugui 制作弹框
创建一个UI控件. 这里通过按钮的点击取控制弹框的显示或者隐藏.给按钮Button绑定一个脚本. 将Panel初始化设置为隐藏.就可以实现了. using UnityEngine; using Sys ...
- OpenWebFlow0.9用户手册与设计说明
1. OpenWebFlow概述 OpenWebFlow是基于Activiti扩展的工作流引擎.Activiti (官方网站http://activiti.org/,代码托管在https://g ...
- Android寒假实训云笔记总结——欢迎页
欢迎页使用的是viewpager,需要适配器. 注意点: 1.判断是否是第一次进入这个app. 2.欢迎页小圆点的逻辑. 实现原理: 首先在activity_welcome放入viewpager和固定 ...