一 、深入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)