css学习笔记二

2015年7月12日
一、absolute
1.注释符有去空格效果
2.absolute有跟随性，最佳定位效果
3.图片居中效果--在父元素里设置absolute，test-align：center 图片前用一个&nbsp;空字符串然后图片<img src=""/>
4.absolute不占空间，不影响页面布局
5.absolute时z-index不起作用
6.top ,bottom,left,right有拉伸作用IE7+可以替代width/height，内部元素可以自动拉伸。
7.比较
正常情况下
内部元素支持百分比width/heigt值，但要想起作用，需要父级容器的height值不是auto。
absolute下
即使父级元素的height值是auto，只要容器绝对定位拉伸形成，百分高度也支持。
8.width/height和top,botton,right,left拉伸同时存在，设置的尺寸是width/height大于top,bottom,left,right即优先级
但是当在设置margin：auto是两个是合作关系。IE8+下
二、line-height 行高，两行文字基线之间的距离
1.line-height可以让单行文本居中
2.line-heiht与行内框盒子模型
四中盒子
3.内联元素的高度由line-height决定的。
4.内容区域+行间距=行高
5.内容区域高度只与字号以及字体相(有)关与行高无关
6.在simsun字体下内容区域高度等于文字大小值
7.消除图片底部间隙的方法,行高不影响图片高度
7.1图片块状化-无基线对齐
img{display:block;}
7.2图片底线对齐
img{vertical-align:bottom;}
7.3行高足够小-基线位置上移
.box{line-height:0;}
8.图片水平垂直居中 ie8+
.box{line-height:300px;text-align:center;}父级
.box>img{vertical-align:middle;}
9.多行文本水平垂直居中ie8+
.box{line-height:250px;test-align：center;}
.box>.text{display:inline-block;line-height:normal;
text-align:left;vertical-align:middle;max-width:100%}
10.ie6,ie7 line-height代替height的
.out{display:inline-block;/*或者folat:left*/}
.in1{display:block; height:36px;}
.in2{display:block; line-height:36px;}
<span class="out">
<span class="in1">height :36px;</span>
</span>
<span class="out">
<span class="in2">line-height: 36px;</span>
</span>