css学习笔记二
2015-07-12 23:56
726 查看
2015年7月12日
一、absolute
1.注释符有去空格效果
2.absolute有跟随性,最佳定位效果
3.图片居中效果--在父元素里设置absolute,test-align:center 图片前用一个 空字符串然后图片<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>
一、absolute
1.注释符有去空格效果
2.absolute有跟随性,最佳定位效果
3.图片居中效果--在父元素里设置absolute,test-align:center 图片前用一个 空字符串然后图片<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>
相关文章推荐
- css3实现网页平滑过渡中注意事项
- Web前端从入门到精通-6 css简介——选择器优先级
- CSS3动画理解与应用
- CSS中的文本属性
- 学习CSS(1)
- 自定义表单样式之checkbox和radio
- 用实例详细讲解将PSD转成HTML&CSS
- CSS3学习(二)CSS3动画
- CSS3学习(一) css基础补充
- CSS vertical-align属性的用法
- CSS的SASS样式编程指南
- CSS3的REM设置字体大小
- css3 选择器记
- CSS中overflow:hidden在ie6、ie7无效不能隐藏解决办法
- 在HTML文档中嵌入CSS的三种常用方式
- CSS3文字立体效果
- CSS+Js在段落文字最后自动加入隐藏文字
- 使用brackets编译scss文件
- CSS层叠样式表
- css中box-shadow属性与text-shadow属性