深入理解CSS

文本属性

2016-11-27  本文已影响9人  hcxowe

缩进与水平对齐

缩进文本

p{ 
text-indent: 3em; /*相对于字体大小*/ 
text-indent: 10%; /*相对于包含块元素的宽度*/ 
text-indent: 10px;/*绝对长度*/ 
}

水平对齐

p{ 
text-align: left;(默认) 
text-align: center; 
}

垂直对齐

行高

Paste_Image.png
div{
 font-size: 10px;
 line-height:1em; 
} 
p{ 
font-size: 18px;
 }
Paste_Image.png

由于行高可以继承,导致段落行高小于字体高度
当父元素line-height指定值为一个数值时,所有子元素的行高会根据自身的font-size设置line-height

垂直对齐文本

所有垂直对齐的元素都会影响父元素的行高,行框要足够包含最高行内框的顶端与最低行内框的底端

字间隔和字符间隔

字间隔

字符间隔

文本转换

文本装饰

文本阴影

 p{
 text-shadow: green .4em 5px 10px; 
/*取值: x偏移 y偏移 模糊半径 颜色*/ 
}

处理空白符

上一篇 下一篇

猜你喜欢

热点阅读