overflow属性失效分析

overflow可以控制超出框内容的显示方式:隐藏、显示、滚动显示

可以取值scroll,表示但凡超出框的内容可以通过滚动条实现浏览,但是如下demo却没有实现滚动显示的功能。

于是仔细看了下overflow的定义:overflow 属性规定当内容溢出元素框时发生的事情。

对比发现, 我理所当然地把body视为元素框了, 于是用div试了下, 发现果然问题出在body上面了。

由此看来:body不是一个元素框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Demo</title>
 6     <style>
 7         span{
 8             font-size:30px;
 9         }
10         .demo-body{
11             width:30vw;
12             height:20vh;
13             border: solid red 2px;
14             overflow: scroll;
15         }
16     </style>
17 </head>
18
19 <body>
20 <div class="demo-body">
21     <span>
22         测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
23     </span>
24 </div>
25
26 </body>
27 </html>

下来又发现了scroll和auto有意思的地方,

scroll: 无论内容有多少,哪怕一个字,这个元素框都会显示滚动条;

auto:只有内容超出文本框的内容区,才会出现滚动条;

时间: 2025-01-05 06:21:51

overflow属性失效分析的相关文章

overflow:hidden失效的原因

项目中常常有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗? 其实看似不合理的现象背后都会有其合理的解释. 我们知道,overflow属性值有这几种: visible:声明内容不会被剪裁.比如内容可能被渲染到容器外面. hidden:声明内容将被剪裁,并且也甭想使用滚动条来查看剪裁掉的内容. scroll:声明内容将被剪裁,但有可能出现滚动条来查看被剪裁掉的内容.滚动条出现的位置在inner border ad

在ie7中overflow:hidden失效问题及解决方案

css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效. 解决方法: 我们在IE7内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden. 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug

overflow:hidden失效

overflow:hidden失效 为了页面的健壮性,我们常常需要使用overflow:hidden.有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文.但是,很多人对这个属性是存在着一定的误解的. 网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度(或高度)可以强制隐藏内部的超出容器的内容.包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时,都认为overflow:hidden造成了特殊

css ie7中overflow:hidden失效问题及解决方法

css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效. 解决方法: 我们在IE7内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden. 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug

IE6,IE7上设置body{overflow:hidden;}失效Bug

IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一下: 设置body{overflow:hidden;}:IE6 IE7下不生效.IE6下横向纵向滚动条都在,IE7下纵向滚动条还在: 分析原因:chrome.firefox会初始付值给html{overflow:visible;} IE6 初始付值html{overflow-x:auto;overf

android:clipChildren属性的分析——是否剪裁子View

MainActivity如下: package cc.testclipchildren; import android.os.Bundle; import android.app.Activity; /** * android:clipChildren属性的分析 * 该属性默认值为android:clipChildren="true" * 单从字面意思理解clipChildren的意思是:裁剪(缩短)孩子 * 我们将其值设置为false后那么当子控件的高度高于父控件时 * 也会完全显示

android:clipToPadding属性的分析——以ListView的&quot;别样&quot;padding为例

MainActivity如下: package cn.com.bravesoft.testlistviewloadmore; import java.util.ArrayList; import java.util.HashMap; import android.app.Activity; import android.os.Bundle; import android.widget.ListView; import android.widget.SimpleAdapter; /** * Dem

关于CSS中的overflow属性

定义和用法: overflow属性规定当内容溢出元素框时发生的事情. 这个属性定义溢出元素内容区的内容会如何处理.如果值为scoll,不论是否需要,用户代理都会提供一种滚动机制.因此,有可能即使元素框中可以放下所有内容也会出现滚动条. overflow属性值 1.visible:默认值.内容不会被修剪,会呈现在元素框之外. 2.hidden:内容会被修剪,并且其余内容是不可见的. 3.scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. 4.auto:如果内容被修剪,则浏览器则

Overflow属性——定义元素(如Div)内容区溢出情况

说明:overflow属性规定当内容溢出元素框时发生的事情. 注释:属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有可能即使元素框中可以放下所有内容也会出现滚动条.默认值是 visible. 可用的值: visible:默认值.内容不会被修剪,会呈现在元素框之外. hidden:内容会被修剪,并且其余内容是不可见的. scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. auto:如果内容被修剪,则浏览器会显示