HTML+CSS进阶学习摘录(文本效果)(四)
2017-07-08 15:07
148 查看
一 、深入text-indent
(1)"text-indent : 2em ;"实现段落首行缩进(2)"text-indent: -9999 px ; " 隐藏标题h1内容,使用LOGO图片作为h1的背景图片。display:none 隐藏元素,搜索引擎会直接忽略(搜索引擎优化)。
二、深入text-align
text-align对文字、inline元素以及inline-block元素起作用,但对块元素不起作用。img属于inline-block元素。对于块元素,需使用"display: inline-block;"转化后,"text-align: center;"才有效。
" text-align:center;"与 "margin: 0 auto;" 的区别
(1)" text-align:center;"实现的是文字、inline元素以及inline-block元素的水平居中。
(2)"margin: 0 auto;" 实现的是对块元素的水平居中。
(3)" text-align:center;"在父元素中 定义,"margin: 0 auto;"在当前元素中定义。
三、深入line-height
行高(line-height)指的是两行基线之间的垂直距离 。(1)定义height和line-height这两个属性值相等 ,就可以实现单行文字的垂直居中。
(2)line-height取值为百分比值、em值
当前元素的行高是相对于父元素的font-size来计算的。
line-height = (父元素 font-size )* (百分比)
line-height = (父元素 font-size)*(em值 )
子元素会继承父元素行高。
(3)line-height取值为无单位数字
line-height = (当前元素的font-size)*(无单位数字)
子元素会继承父元素的系数。
四、深入vertical-align
(1)vertical-align 属性用于定义“周围的文字、inline元素以及inline-block元素”相对于该元素基线的垂直 对齐方式。(2)vertical-align 对 table-cell类型元素有效。
(3)vertical-align取值 负值、百分比、关键字(top,middle,baseline,bottom)
相关文章推荐
- jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
- HTML开发——项目心得(CSS实现导航栏选项卡炫酷渐变效果以及图片替换文本显示)
- HTML中实现指定行的文本以...结尾(类似text-overflow:ellipsis效果)
- html 文本输入框效果
- HTML-CSS常用样式文本溢出处理效果
- html 文本输入框效果
- html 文本输入框效果
- HTML基础 body标签text属性将普通文本颜色改为白色,实现有趣的密文效果
- textview 显示图文信息,html文本,实现activity的跳转、跑马灯效果。
- jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
- 使用jQuery淡入淡出HTML文本效果
- OAF 中对文字实现html效果及对超级长文本实现默认换行,对只读的messageTextInput中的内容自动换行
- html 文本输入框效果
- html 文本阴影效果
- [HTML] CSS3 文本效果
- html 文本输入框效果
- html 文本输入框效果
- HTML文本格式
- html table td 边框效果
- HTML鼠标在单元格上单击,单元格反色,可以利用方向键移动反色效果