使用overflow:hidden处理元素溢出和坍塌
2018-02-28 18:50
281 查看
溢出
css溢出示意如图,子元素(背景为粉色)的长度或宽度超出父元素(背景为绿色)。通过为父元素赋 overflow:hidden 样式可将子元素超出父元素的部分隐藏起来。
也可为父元素赋 overflow:auto 或 overflow:scroll 样式来裁剪子元素,使其可通过滚动条查看超出部分。
overflow:auto 样式只裁剪超出父元素的长或宽,overflow:scroll 样式会将子元素的长或宽都裁剪。
overflow溢出 属性
值: visible | hidden | scroll | auto | inherit初始值: visible
应用于: 块级元素、替换元素、表单元格
继承性: 无
overflow-X | overflow-y 属性
overflow-x和overflow-y的属性原本是IE浏览器独自拓展的属性,后来被CSS3采用,并标准化。overflow-x主要用来定义对水平方向内容溢出的剪切,而overflow-y主要用来定义对垂直方向内容溢出的剪切[注意]如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同,且其中一个值显式设置为visible或未设置默认为visible,而另外一个值是非visible的值。则visible值会被重置为auto
值: visible | hidden | scroll | auto | inherit | no-display | no-content
初始值: visible
应用于: 块级元素、替换元素、表单元格
继承性: 无
坍塌
<div class="container"> <div class="div1"></div> </div>
.container { background-color:deepskyblue; } .div1 { background-color: green; width: 100px; height: 100px; margin-top: 40px; }
当为子div设置margin-top属性时,出现如下的显示,为高度塌陷。
原因:对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。
对于上下两个并列的div块而言,上面div的margin-bottom和下面div的margin-top也会塌陷,就是会取上下两者margin里最大值作为显示值,所以从这个意义上说:CSS及浏览器的设计者们希望我们在布局时,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可。解决方法:
1. 为父元素设置属性overflow:hidden.container { background-color:deepskyblue; overflow: hidden; }
2. 为父元素设置边框(边框颜色可为透明)
border:1px solid transparent;
3.为父元素设置padding,或者只设置padding-top属性
padding-top:1px ;
溢出图片截取自https://www.cnblogs.com/xiaohuochai/p/5289653.html
相关文章推荐
- overflow :hidden 和 clear:both 与 clearfix撑起高度坍塌的父元素应用
- 父元素overflow: hidden;子元素position: fixed;子元素溢出部分居然不显示。
- 深入理解:overflow:hidden——溢出,坍塌,清除浮动
- 深入理解:overflow:hidden——溢出,坍塌,清除浮动
- overflow:hidden——溢出,坍塌,清除浮动
- 深入理解:overflow:hidden——溢出,坍塌,清除浮动
- 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处
- jquery 使用animate来改变高度自动添加样式overflow:hidden的问题
- 设置inline-block元素的overflow:hidden意外增加元素总体高度的问题
- 丶使用 checked 关键字处理 溢出 错误信息
- 如何使用 HTML5 的picture元素处理响应式图片
- 对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效
- 使用text-overflow:ellipsis实现溢出文本省略号显示无需js
- 溢出文本显示为省略号的效果及其text-overflow:ellipsis;的使用
- 一般处理程序中使用隐藏域来实现非Form表单元素上数据的改变
- overflow:hidden同样会隐藏position:absolute的子元素
- php array_walk_recursive 使用自定的函数处理数组中的每一个元素
- jQuery使用之(四)处理页面的表单元素
- jQuery使用之(三)处理页面的元素
- 使用overflow:hidden防止框架被撑破