文本居中
text-align 水平居中
-
text-align: center; 使得文字或者文字元素(inline元素)在具有宽高的容器中居中
image.png - text-align: left | right; 分别为居左和居右
line-height 垂直居中
- 当line-height和容器高度相同时，单行文字会在容器中垂直居中。
- 行高 默认为22px mac 22 windows 21
- 多行文字可使用display:table-cell 和 vertical-align:middle。
text-indent
- 文本缩进，可用于input输入框，段落文本缩进。
- 段落缩进通常使用 text-indent: 2em;
文字省略三大件
- overflow: hidden; //截断超出部分
- text-overflow: ellipsis; // 省略号 [ɪˈlɪpsɪs]
- white-space: nowrap; //不换行
- 多行文本，想省略时无法应用此三大件，需要通过处理数据或以下方法解决。
// 此写法只兼容webkit浏览器
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 指定有几行
-webkit-box-orient: vertical;
提示
- 文本的对齐方式是通过设置容器的属性决定的。span em i 等作为行内元素时，设置以上属性无效。作为block元素时，对齐属性生效。
text-decoration
- none 去掉划线
- underline 下划线
- line-through 中划线
待追究：em 如何在html标签定义font-size？？
光标 cursor [ˈkɜːrsər]
cursor
- pointer 让鼠标变小手
- not-allow 鼠标变禁止图标
块级 行内 行内块级
- 行内及行内块级之间如果有空格或回车渲染后会出现空格，解决办法去掉回车或空格。
伪类选择器
- 选择器后面直接跟伪类，可设置某种状态下元素的颜色
- 常见的伪类有 :hover :active :checked :disabled 等
