css学习笔记四
一.overflow
1.兼容性 IE7下width：100% 会出现滚动条，解决去掉width：100%
2.overflow：visible妙用
IE7浏览器下，文字越多，按钮两侧padding留白就越大
解决方法 给所用元素添加css样式overflow：visible
3.起作用的前提
3.1非display：inline水平
3.2对应方位的尺寸限制。width/height/max-width/max-height/absolute拉伸
3.3对于单元格td等，还需要table设置table-layout：fixed状态才行。
4.body/html与滚动条
无论什么浏览器，默认滚动条均来自<html>而不是body标签
IE7-浏览器默认：HTML{overflow-y:scroll；}
IE8+等浏览器默认：HTML{overflow：auto；}
去除默认滚动条，只需 HTML{overflow：hidden；}
5body、HTML与滚动条-js与滚动高度
5.1chrome浏览器：document.body.scrollTop;
5.2其他浏览器：document.documentElement.scrollTop;
因为不会同时存在，通常写法：
var st=document.body.scrollTop+document.documentElement.scrollTop；
应该这样写：
var st=document.body.scrollTop||document.documentElement.scrollTop；
6.overflow的padding-bottom缺失现象
如.box{width:400px;height:100px;padding:100px 0;overflow:auto;}
导致：不一样的scrollHeight(元素内容高度)chrome有值，其他浏览器没有
7.overflow:auto的潜在布局隐患
滚动条会占用容器尺寸，原本和谐的布局，滚动条出现后可能出现错位。
8.水平居中跳动问题
.container{width:1150px;margin:0 auo;}
修复方法：1种，HTML{overflow-y:scroll;}ie6,ie7
2种.container{padding-left:calc(100vw-100%)} 100vw是浏览器的宽度；100%-可用内容宽度 IE9+
9.自定义滚动条 -webkit
整体部分
::-webkit-scrollbar
两端按钮
::-webkit-scrollbar-button
外层轨道
::-webkit-scrollbar-track
内层轨道
::-webkit-scrollbar-track-piece
滚动滑块
::-webkit-scrollbar-thumb
边角
::-webkit-scrollbar-corner
10.overflow 与BFC应用IE7+
10.1清除浮动影响
.clearfix{*zoom:1;}
.clearfix:after{content:'';display:table;clear:both;}
10.2避免margin穿透问题
10.3两栏自适应布局
img.left(左浮动)
div.right(背景色)>img*2
11.两栏自适应布局
.cell{
display:table-cell;width:2000px;ie8+ bfc特性
*display:inline-block;*width:auto;ie7-伪bfc特性
}
12.overflow失效
就是包裹的子元素样式设置了absolute了
13.overflow避免失效方法
13.1 overflow元素自身为包含块；
<div style="position:relative" class="overflow-hide">
<img src=""/>
</div>
13.2 overflow元素的子元素为包含块；
<div class="overflow-hide">
<div style="position:relative">
<img src=""/>
</div>
</div>
13.3 任意合法transformer声明当作包含块；ie9+
14.resize拉伸
css3有个属性名为resize,可以拉伸元素尺寸：
14.1 resize:both水平垂直两边拉；
14.2 resize:horizontal 只有水平方向拉；
14.3 resize:vertical只有垂直方向拉；
但是，要想起作用，元素的overflow属性值不能是visible！
15 text-overflow：ellipsis 文字溢出点点点省略。要想起作用，元素的overflow属性值不能是visible！
