选择器
- 简单选择器
- class选择器
- ID选择器
- 标签/元素选择器
- 属性选择器
- 伪类
:hover:nth-child - 复合选择器
- 关系选择器
- 父子选择器
- 后代选择器
- 组合选择器
属性
1. 样式
- 字体
| 常用属性名 | 含义 | 常用属性值 |
|---|---|---|
font-family |
字体 | "微软雅黑" "Microsoft YaHei" |
font-size |
大小 | 12px |
font-style |
风格 | italic |
font-weight |
粗细 | bold |
- 文字
| 常用属性名 | 含义 | 常用属性值 |
|---|---|---|
color |
颜色 | 十六进制值 |
line-height |
行高 | - |
text-align |
对齐 |
center right left
|
text-decoration |
修饰 |
underline none
|
text-indent |
缩进 | 1em等于1个字符的宽度 |
white-space |
空白处理 | nowrap |
- 背景
| 常用属性名 | 含义 | 常用属性值 |
|---|---|---|
background-color |
背景颜色 | 十六进制颜色值 |
background-image:url(图片地址) |
背景图 | - |
background-position |
位置 | - |
background-repeat |
重复 |
repeat repeat-x repeat-y no-repeat
|
background-attachment |
关联 | fixed |
- 列表
| 常用属性名 | 含义 | 常用属性值 |
|---|---|---|
list-style-type |
类型 |
none disc circle square
|
list-style-image:url(图片地址) |
图片作为列表项 | - |
- 表格
| 常用属性 | 含义 |
|---|---|
border-collapse:collapse; |
边框合并 |
border-collapse:separate; |
边框分开 |
border-spacing |
单元边框间距 与<table cellspacing="">相似。 |
caption-side:bottom; |
与<caption align="bottom">相似。 |
- 轮廓
轮廓与边框相似，但在边框外边，紧贴着边框。
2. 盒模型
- 边框
| 常用属性名 | 含义 | 常用属性值 |
|---|---|---|
border-color |
边框颜色 | 十六进制颜色值 |
border-style |
边框风格 |
solid dotted
|
border-width |
边框宽度 | - |
border |
简写 | - |
- 外边距
margin - 内边距
padding - 宽高
widthheight
3. 定位
- 绝对
position:absolute; - 相对
position:relative; - 固定
position:fixed - 浮动
float:rightfloat:left
最佳实践
toprightleftbottomz-index不能单独使用，必须设置position为absolute\relative\fixed
