text-shadow: rgb(99, 36, 35) 2px 2px 10px;
overflow 与 BFC
overflow触发BFC auto,scroll,hidden
BFC block formatting context 内部变化不影响外部
如果 overflow-x overflow-y 相等,则等同于overflow
如果值不同,其中一个是visible ,另外一个是hidden,scroll.auto,则前一个会被重置为auto
#宽度滚动条设定机制
.box{
width:400px;
height:100px;
overflow:auto;
}
.content{
width:100%;
height:200px;
backgroud-color:##f5f5f5;
}
ie7会出现横向滚动条(ie7会把竖直的滚动条宽度也计算了 删除宽度100%就可以解决了),ie8不会
overflow:visible;去除ie7按钮文件越长,两侧空白越大的问题
滚动条来自于html,不是body
去除默认滚动条
html{overflow:hidden;}
滚动高度计算:
var height = document.documentElement.scrollTop || document.body.scrollTop
overflow padding-bottom 会缺失在chrome下
ie9+支持
.container{
padding-left:calc(100vw-100%);100vw 浏览器宽度
}
ie7 、8
overflow-y:scroll;
overflow触发BFC auto,scroll,hidden
清除浮动影响 父元素不会高度塌陷(ie6不支持)
.clearfix{overflow:hidden;_zoom:1;} #ie6不支持
---最佳方案
.clearfix{*zoom:1;}
.clearfix:after{content:'';display:table;clear:both;}
避免margin穿透 (内部 margin背景显示) 边框,padding margin bfc化
两栏自适应布局
### BFC两栏自适应布局
1. 左浮动,右普通 (文字环绕)
.left{float:left;width:128px;margin-right:22px;}
.right{min-heght:190px;background-color:#beceeb;}
2.左浮动,右margin-left padding-left
.right{min-heght:190px;margin-left:150px;background-color:#beceeb;}
在加上clear:both;会因为float的块的破坏性,right会在下一行显示
3. 左浮动,右overflow
.right{min-heght:190px;overflow:hidden;background-color:#beceeb;}
两栏自适应布局
.cell{
display:table-cell;width:20000px; //ie8+ bfc特性
*display:inline-block;*width:auto; //ie7- block标签元素
}
---\
overflow:hidden; 自适应,但溢出不可见
float 包裹性+破坏性 无法自适应,块装浮动布局
position:absolute 脱离文档流
display:inline-block 包裹性 无法自适应 ie67水平不相识(无包裹)
display:table-cell 包裹性,无溢出,绝对宽度也能自适应
overflow与absolute
隐藏(剪裁)失效与滚动失效(固定)
#剪裁失效
overflow:hidden 在图片比较大(absolute)与父容器 中间时,剪裁会失效
#滚动失效
overflow:auto 在图片比较大(absolute)与父容器 中间时,滚动会失效
#原因
absolute不是总是父级overflow属性影响,
特别当overflow在absolute元素及包含块(含块position:relative/absolute/fixed声明的父级元素或body)之间的时候
#避免方法
overflow元素自身为包含块、子元素为包含块、任意合法transform子元素声明
overflow与resize
.content{
resize:both;
overflow:hidden;
}
textarea{
overflow:auto; //天生就有的
}
text-overflow:ellipsis 文字溢出省略号表示
# 按钮文字省略号
white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
overflow 与锚点
# 容器可滚动 定位元素在容器内
.box{
overflow:hidden;
}
网友评论