CSS2文本属性-优快云博客

本文详细介绍了CSS中关于文本布局的几个关键属性，包括text-indent、text-align、line-height、vertical-align及white-space等，帮助读者更好地掌握网页排版技巧。

1.text-indent:缩进文本,首行缩进

值: <length> | <percentage> | inherit

初始值: 0

应用于: 块级元素

继承性: 有

百分数: 相对于包含快的宽度

计算值: 对应百分数,要根据指定确定;对于长度值,则为绝对长度

例: 首行缩进 p {text-indent: 2em;} p {text-indent:20px;} p{text-indent: 10%;}

2.text-align:水平对齐

值: left | center | right|justify|inherit

初始值: 用户代理特定的值

应用于: 块级元素

继承性: 有

计算值: 根据指定确定

3.line-height:行高

值: <length>| <percentage>| <number>|<normal>|inherit

初始值: normal

应用于: 所有元素

继承性: 有

百分数: 相对于元素的字体大小(font-size)

计算值: 对应长度和百分数值是绝对数值;否则, 根据指定确定

**当一个块级元素从另一个元素继承line-height时,其值要从父元素计算,而不是在子元素上计算

例:

body{font-size:10px;} 
div {line-height:1em;}/*即10px*/ 
p{font-size:18px;}

<div>
  <p>
    这个段落的font-size是18,但是继承的行高line-height为10px
  </p>
</div>

对于以上问题,可以给行高设置一个缩放因子,这个数会应用到该元素以及其所有子元素,使得个元素都根据自己的font-size计算:

body{font-size:10px;}
div {line-height:1;}
p{font-size:18px;}

4.vertical-align:文本垂直对齐

初始值: baseline(基线)

应用于: 行内元素和表单元格

继承性: 无

百分数: 相对于元素的line-height值

计算值: 对应长度和百分数值是绝对数值;否则, 根据指定确定

说明: 应用到单元格时,只能识别 baseline| top | middle | bottom

5.处理空白符:white-space

值: normal|nowrap| inherit (这里省略了一些属性值)

初始值: normal

应用于: 所有元素

继承性: 无

计算值: 根据指定确定

** p {white-space:nowrap;} 设置文本不换行

转载于:https://my.oschina.net/langgege/blog/1501651