这是我参与「第五届青训营 」笔记创作活动的第15天
字体属性:(font)
设置字体相关的样式
| font-size | 大小、尺寸 | 可以使用多种单位 |
|---|---|---|
| font-weight | 粗细 | |
| font-family | 字体 | |
| font-style | 样式 | |
| font | 简写 |
文本属性
设置文本相关的样式
| 属性 | 含义 | 说明 |
|---|---|---|
| color | 颜色 | |
| line-height | 行高 | 行高度 |
| text-align | 水平对齐方式 | 取值:left、center、right |
| vertical-align | 垂直对齐方式 | 取值:top、middle、bottom可以用于图片和文字的对齐方式 |
| text-indent | 首行缩进 | |
| text-decoration | 文本修饰 | 取值:underline、overline、line-through |
| text-transform | 字母大小写转换 | 取值:lowercase、uppercase、capitalize首字母大写 |
| letter-spacing | 字符间距 | |
| word-spacing | 单词间距 |
背景属性
设置背景的颜色大小等等
| 属性 | 含义 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | 背景图片的重复方式 |
| background-position | 背景图片的显示位置 |
| background-attachment | 背景图片是否跟随滚动 |
| background |
定位方式
通过position属性实现对元素的定位,有四种定位方式
| 取值 | 含义 | 说明 |
|---|---|---|
| static | 默认值 | 按照常规文档流进行显示 |
| relative | 相对定位 | 相对于标签原来的位置进行的定位 |
| absolute | 绝对定位 | 相对于第一个非static定位的父标签的定位 |
| fixed | 固定定位 | 相对于浏览器窗品进行定位 |
浮动属性
通过float属性来实现元素的浮动,可以让块级元素脱离常规的文档流,向左或向右移动,在同一行显示,
- left左浮动
- right右浮动
- none不浮动,默认值
清除属性
通过clear属性来实现清除,设置元素的哪一侧不允许有浮动元素
- left左侧不允许出现浮动元素
- right右侧不允许出现浮动元素
- both两侧不允许出现浮动元素
- none允许两侧出现浮动元素,默值
display
通过display属性设置元素是否显示,以及是否独占一行
inline 显示为内联元素,行级元素的默认值
block 显示为块级元素,块级元素的默认值
inline-block 显示为内联元素,但是可以设置宽和高
visibility
visible 显示
hidden 隐藏