缩进与水平对齐
缩进文本
- text-indent
- 应用元素：块级元素
- 继承型： 继承
- 取值： 长度值或者百分数
p{
text-indent: 3em; /*相对于字体大小*/
text-indent: 10%; /*相对于包含块元素的宽度*/
text-indent: 10px;/*绝对长度*/
}
水平对齐
- text-align
- 应用元素：块级元素
- 继承性： 继承
- 取值：left | right | center | justify | inherit
不影响元素的对齐，只影响内部元素
p{
text-align: left;(默认)
text-align: center;
}
垂直对齐
行高
- line-height
- 应用元素： 所有元素
- 继承型： 继承
- 取值： 百分数-相对于元素的字体大小，长度值**行内定义如下几条线：
Paste_Image.png
div{
font-size: 10px;
line-height:1em;
}
p{
font-size: 18px;
}
Paste_Image.png
由于行高可以继承，导致段落行高小于字体高度
当父元素line-height指定值为一个数值时，所有子元素的行高会根据自身的font-size设置line-height
垂直对齐文本
- vertical-align
- 应用元素： 行内元素和表单单元格
- 继承性： 无继承
- 取值： 百分数-相对于元素line-height的值， 长度值
- baseline 基线对齐:行内元素基线或者替换元素的底端与父元素基线对齐
- sub supper 下标 上标：相对于父元素的基线进行向下/向上进行一小段的偏移，便宜距离由浏览器决定
- bottom top 底端对齐 顶端对齐：元素的底端与父元素的行高底端对齐，元素的顶端与父元素的行高顶端对齐
- middle 居中：行内元素的中点与父元素基线上方0.5ex处的点对齐，可以认为是中线对齐
- 百分数：元素的基线相对于父元素的基线升高或者降低指定高度，指定的百分数是相对于该元素line-height的
- 长度值：元素相对于父元素基线升高或者降低指定的长度值。如：vertical-align:5px;
所有垂直对齐的元素都会影响父元素的行高，行框要足够包含最高行内框的顶端与最低行内框的底端
字间隔和字符间隔
字间隔
- word-spacing
- 应用元素： 所有元素
- 继承性： 继承 - 取值： 长度值
字符间隔
- letter-spacing
- 应用元素： 所有元素
- 继承性： 继承
- 取值： 长度值
文本转换
- text-transform
- 应用元素：所有元素
- 继承性： 继承
- 取值：uppercase | lowercase | capotalize | none | inherit
文本装饰
- text-decoration
- 应用元素：所有元素
- 继承性： 不继承
- 取值： none | unserline | overline | line-through | blink | inherit
文本阴影
- text-shadow
- 应用元素：所有元素
- 继承性： 不继承
p{
text-shadow: green .4em 5px 10px;
/*取值： x偏移 y偏移 模糊半径 颜色*/
}
处理空白符
- white-space
- 应用元素： 所有元素
- 继承性： 不继承
- 取值：
- normal： 合并连续的空白符为一个，忽略元素中的换行 允许自动换行
- nowrap: 合并连续的空白符为一个，忽略元素中的换行 不允许自动换行
- pre： 保留连续的空白符为一个，保留元素中的换行 不允许自动换行
- pre-line：合并连续的空白符， 保留元素中的换行 允许自动换行
- pre-wrap: 保留连续的空白符为一个，保留元素中的换行 允许自动换行
