overflow
来源:互联网 发布:海淘用哪个软件 编辑:程序博客网 时间:2024/04/20 09:55
一、overflow基本属性
(1)visible默认 超出部分表现出来
(2)hidden 超出部分隐藏
(3)scroll 滚动条
(4)auto 哪侧溢出 那边出现滚动条
(5)inherit
二、作用的前提
(1)非display:inline
(2)对应方位的尺寸限制 width/height/max-width/max-height/absolute拉伸
三、overflow:visible妙用
IE7浏览器下,文字越多,按钮两侧的padding留白就越大,解决方法:
给所有按钮增加overflow:visible
四、overflow 与滚动条
滚动条出现的条件:overflow:auto/scroll
无论是什么浏览器,默认滚动条均来自html标签,而非body标签
IE7-:html{ overflow-y:scroll}(类似,overflow在IE8+才出现)
IE8+: html{overflow:auto}
故要去除页面默认的滚动条,只需要
html{ overflow:hidden}即可
js与滚动高度的计算:
chrome:document.body.scrollTop
others:document.documentElement.scrollTop
故较好的兼容语句:
var a = document.body.scrollTop || document.documentElement.scrollTop
五、overflow的padding-bottom确实现象
除了chrome浏览器外,其他所有浏览器的padding-bottom缺失,造成scrollHeight不同
六、overflow与块状格式上下文
BFC:Block formatting content ---块级格式化上下文
造成的页面结果是:内部元素再怎么翻云覆雨都不会影响外部,overflow可以触发BFC,但是并不是所有的属性都可以的,其中auto scroll hidden都行,而visible不可以,有如下三种应用
清除浮动影响
避免margin重叠问题
两栏自适应布局
but...
最好的清除浮动的一种写法是:
.clearfix{*zoom:1}
.clearfix:after{content:'';display:table;clear:both;}IE8+
七、over与sbsolute绝对定位
absolute可以不受overflow:hidden/auto的限制
八、锚点触发
有如下情况可以触发锚点
(1)url地址中锚链与锚点元素
(2)可focus的锚点元素处于focus状态
锚点定位的本质是改变容器的滚动高度
- overflow
- overflow
- overflow
- Overflow
- overflow
- overflow
- overflow
- overflow
- overflow
- overflow-x overflow-y
- overflow和text-overflow
- overflow、overflow-x、overflow-y初识
- CSS overflow
- overflow.c
- css overflow
- overflow:hidden
- PfAddStatDura: overflow
- overflow:auto
- Unified Model Language 之 用例图
- 表单重复提交与后台防重策略
- define与typedef的区别
- matlab图像调整
- Android-->打造流行的无数据空布局页面
- overflow
- 360手机权限开启方法
- spring 事务属性的种类
- 项目优化之——加载
- 栈和堆的区别
- 时间限制(烽火戏诸侯)
- 第48篇白板修复之铅笔选择三种粗细(二)
- 61. Rotate List
- redis集群实现(八)redis+twemproxy集群