css部分属性汇总,包括文本、字体、边框和弹性盒子
Text(文本)
属性 | 描述 | CSS |
---|
color | 设置文本颜色 | |
direction | 设置文本方向。 | |
letter-spacing | 设置字符间距 | |
line-height | 设置行高 | |
text-align | 对齐元素中的文本 | |
text-decoration | 向文本添加修饰 | |
text-indent | 缩进元素中文本的首行 | |
text-shadow | 设置文本阴影 | |
text-transform | 控制元素中的字母 | |
unicode-bidi | 设置或返回文本是否被重写 | |
vertical-align | 设置元素的垂直对齐 | |
white-space | 设置元素中空白的处理方式 | |
word-spacing | 设置字间距 | |
text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
text-shadow | 向文本添加阴影。 | 3 |
Fonts(字体)
属性 | 描述 | CSS |
---|
font | 在一个声明中设置所有的字体属性 | |
font-family | 指定文本的字体系列 | |
font-size | 指定文本的字体大小 | |
font-style | 指定文本的字体样式 | |
font-variant | 以小型大写字体或者正常字体显示文本 | |
font-weight | 指定字体的粗细。 | |
Border(边框)
属性 | 描述 | CSS |
---|
border | 简写属性,用于把针对四个边的属性设置在一个声明。 | |
border-style | 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 | |
border-width | 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 | |
border-color | 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 | |
border-bottom | 简写属性,用于把下边框的所有属性设置到一个声明中。 | |
border-bottom-color | 设置元素的下边框的颜色。 | |
border-bottom-style | 设置元素的下边框的样式。 | |
border-bottom-width | 设置元素的下边框的宽度。 | |
border-left | 简写属性,用于把左边框的所有属性设置到一个声明中。 | |
border-left-color | 设置元素的左边框的颜色。 | |
border-left-style | 设置元素的左边框的样式。 | |
border-left-width | 设置元素的左边框的宽度。 | |
border-right | 简写属性,用于把右边框的所有属性设置到一个声明中。 | |
border-right-color | 设置元素的右边框的颜色。 | |
border-right-style | 设置元素的右边框的样式。 | |
border-right-width | 设置元素的右边框的宽度。 | |
border-top | 简写属性,用于把上边框的所有属性设置到一个声明中。 | |
border-top-color | 设置元素的上边框的颜色。 | |
border-top-style | 设置元素的上边框的样式。 | |
border-top-width | 设置元素的上边框的宽度。 | |
div(盒子)
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
属性 | 描述 | CSS |
---|
display | 指定 HTML 元素盒子类型。 | |
flex-direction | 指定了弹性容器中子元素的排列方式 | |
justify-content | 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。 | |
align-items | 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。 | |
flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 | |
align-content | 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐 | |
flex-flow | flex-direction 和 flex-wrap 的简写 | |
order | 设置弹性盒子的子元素排列顺序。 | |
align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 | |
flex | 设置弹性盒子的子元素如何分配空间。 | |