文本:
color | 设置文本颜色 |
direction | 设置文本方向。 |
letter-spacing | 设置字符间距 |
line-height | 设置行高 |
text-align | 对齐元素中的文本 |
text-decoration | 向文本添加修饰 |
text-indent | 缩进元素中文本的首行 |
text-shadow | 设置文本阴影 |
text-transform | 控制元素中的字母 |
unicode-bidi | 设置或返回文本是否被重写 |
vertical-align | 设置元素的垂直对齐 |
white-space | 设置元素中空白的处理方式 |
word-spacing | 设置字间距 |
字体:
font | 在一个声明中设置所有的字体属性 |
font-family | 指定文本的字体系列 |
font-size | 指定文本的字体大小 |
font-style | 指定文本的字体样式 |
font-variant | 以小型大写字体或者正常字体显示文本。 |
font-weight | 指定字体的粗细。 |
列表:
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
list-style-image | 将图像设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。 |
list-style-type | 设置列表项标志的类型。 |
定位:
bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 | auto length % inherit |
2 |
clip | 剪辑一个绝对定位的元素 | shape auto inherit |
2 |
cursor | 显示光标移动到指定的类型 | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
2 |
left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | auto length % inherit |
2 |
overflow |
设置当元素的内容溢出其区域时发生的事情。 | auto hidden scroll visible inherit |
2 |
overflow-y |
指定如何处理顶部/底部边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content |
2 |
overflow-x |
指定如何处理右边/左边边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content |
2 |
position | 指定元素的定位类型 | absolute fixed relative static inherit |
2 |
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | auto length % inherit |
2 |
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | auto length % inherit |
2 |
z-index | 设置元素的堆叠顺序 |
number auto inherit |
浮动:
clear | 指定不允许元素周围有浮动元素。 | left right both none inherit |
1 |
float | 指定一个盒子(元素)是否可以浮动。 | left right none inherit |
对齐:
文本在元素内居中对齐,可以使用 text-align: center;
图片居中对齐, 可以使用 margin: auto;
我们可以使用 position: absolute; 属性来对齐元素:
绝对定位元素会被从正常流中删除,并且能够交叠元素。
body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; }
我们也可以使用 float 属性来对齐元素:
我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:
垂直居中 - 使用 line-height
垂直居中 - 使用 position 和 transform
如果要水平和垂直都居中,可以使用 padding 和 text-align: center: