CSS权威指南 第6章 文本属性
6.1 缩进和行内对齐
在英语和现代中文中
块级方向: 放置块级元素的方向,即从上到下
行内方向: 块级元素中,行内元素的书写方向,即从左到右
6.1.1 缩进文本text-ident
缩进首行
- 只能用于块级元素,不能用于行内元素
- 可以使用负值
- 百分值相对于父元素的宽度计算
- 注意会被继承
6.1.2 文本对齐text-align
- 只能用于块级元素
- 只影响元素中的内容,对块级元素本身的对齐方式没有影响
起边和终边对齐
- start: 文本与元素所在
行框的起边对齐 - end: 文本与元素所在
行框终边对齐
两段对齐: 文本一行的两端,与父元素的边界对齐,单词/字母之间的空白会自动调整
6.1.3 对齐最后一行text-align-last
- 使用
<br>强制换行的也受影响 - 如果只有一行,
text-align-last比text-align的优先级高
6.2 块级对齐
作者说,行构成非常复杂,可以用一本书来介绍......有这么夸张么,可是我之前都不知道行还要由啥子东西来构成.可以自己是有多无知啊
6.2.1 行的高度line-heigh
line-height定义元素中文本行基线之间的最小距离
行的构成:
- 基线: 一行文字中,以
x下面为准的那条线 - 内容区: 由字体的高度决定,即
em方块(5.4中学的)组成的区域 - 行距: line-height - font-size 然后平均分配到内容上下边
- 行内框: 内容区 + 行距
- 行框: 最高的行内框的上边和最低的行内框的下边
直到这里,才真正清楚,一个行内元素到底是个啥玩意儿.
line-height的值
- 默认值
normal: 一般是字体高度的1.2倍 - 相对值
emex%相对于font-size计算 - 绝对值,没什么好说的
- 纯数字: 只是换系数 行高的继承
- 从父元素继承时
line-height时,相对值根据父元素的字号计算 - 使用纯数字时,继承的就只是换算系数,而不是计算得到的值
body { font-size: 10px; }
div { line-height: 1em; } // => 继承的font-size是10px, 计算后的line-height值是10px
p { font-size: 18px; } // => line-height,继承父元素的是10px
body { font-size: 10px; }
div { line-heiht: 1; } // => 继承font-size 10px 计算line-height 10px
p { font-size: 18px; } // => 继承line-height 1 计算font-size 18px
6.2.2 纵向对齐文本vertical-align
只能用于行内元素和置换元素
基线对齐: baseline元素的基线与父元素的基线对齐
- 图像,表单输入框等置换元素没有基线,就把将底边与父元素的基线对齐
下标和上标
sub: 元素的基线,低于父元素的基线.但是不同的浏览器正常的距离不一样super: 元素的基线,高于你元素的基线
底端对齐:
bottom元素的行内框底边与行框的底边对齐text-bottom行中文本的底边与父元素默认文本框的底边对齐- 默认的文本框由父元素的字号确定
顶端对齐
top: 与bottom相反
text-top: 与text-bottom相反
中线对齐: 行内框的中线与父元素的中线对齐
- 行内元素的中线: 行内框的中线
- 父元素的中线: 基线向上偏移
0.5ex距离的那条线 - 一般用在图像等置换元素上
百分数: 行内框的基线(或置换元素的底边),相对父元素的基线,抬升或下沉指定的量
- 值相对于元素自身的
line-height计算
绝对值 同百分数
6.3 单词间距和字符间距
单词是指,两边有空白的非空白字符串...呃,对象形文字不生效
6.3.1 单词间距word-spacing
word-spacing: 修改单词之间的间距
- 默认值
normal设置为0 - 只对英文和数字有效
6.3.2 字符间距letter-spacing
letter-spacing: 字符之间的间距
- 默认值
normal也是0 - 不过这个对中文有效
6.3.3 对齐方式对间距的影响
text-align是两端对齐
- word-spacing的值可能会被修改
- letter-spacing如果设置了值,则不会修改
- letter-spaing如果是normal,则可能会被修改
继承: 只能继承计算后的值
- 永远和父元素一样
- 不能像行高那样继承换算系数
6.4 文本转换text-transform
转变文本的大小写
- uppercase 大写
- lowercase 小写
- capitalize 首字母大写
- none 保持原样不变
这个属性所有浏览器都支持,我居然一直都不知道......
6.5 文本装饰text-decoration
- underline 下划线
- overline 上划线
- line-throught 删除线
注意这个属性不会被继承
发现新大陆,三个值可以同时写,就可以确定
ex方框的顶边,底边以及行内框的基线了
6.6 文本渲染效果text-rendering
- 是一个
svg属性 - 主要用于字体绘制的配置,优选考虑清晰,还是速度,还是精度
6.7 文本阴影text-shadow
length length length color
- 第一个是横向偏移
- 第2个是纵向偏移
- 第3个是模糊半径
- 第4个是颜色,如果不填和前景色一样
注意: 阴影过多,或者模糊半径过大会损耗性能
6.8 处理空白white-sapce
| 值 | 空白 | 换行符 | 自动换行 |
|---|---|---|---|
| pre-line | 折叠 | 保留 | 允许 |
| normal | 折叠 | 忽略 | 允许 |
| nowrap | 折叠 | 忽略 | 禁止 |
| pre | 保留 | 保留 | 禁止 |
| pre-wrap | 保留 | 保留 | 允许 |
一直以来只会用nowrap,用于不换行...没想到还可以保留空格,一直以为空格都只会显示一个的啊.....靠了
设定制表符宽度tab-size
- 默认是8字空格
6.9 换行和断字
hyphens: 断行提示
就是在一个单词内,如果行的宽度不够放这个单词,是否用连字符来标志断字
none: 不断字- 连字符,
­等断字会被忽略
- 连字符,
manual: 手动断字,即在相应的标志处断字- 只对英文有用
word-break: 单词换换行
normal: 文本在单词之间换行,中文就是每个字keep-all: 禁止在字符之间换行- 对中文无效
break-all: 在字符之间也可能断行,不会出现连字符
测试了一下,在中文上的效果有点和书上不一样.不深究了..反正用的也少
line-break
- loose: 宽松的换行规则
- normal: 常规
- strict: 严格
搞不懂,在chorme上测试中文没啥区别
overflow-wrap
感觉有了white-space这个属性没卵用了啊
6.10 书写模式
英文和中文都是从上到下,从左到右..所以这一节就不看了....至少目前看其他书写格式是浪费时间
