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!

你可能感兴趣的:(css学习笔记四)