[TOC]
> ### 选择器
- 元素选择器
- class选择器
.classname{}
- id选择器
#id{}
- 分组选择器
用','隔开可以同时选择多个元素
- 兄弟选择器
div+p{} 选择div之后第一个同级P元素
div~p{} 选择div之后的所有同级p元素
- 后代选择器
.parent>p 亲儿子
.parent p 选中parent之后所有的p
- 伪类选择器
:hover //覆盖
:focus //聚焦
- 伪元素选择器
伪元素-->用css自定义生成的元素
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
content:''
}
- 属性选择器
div[class='test']{}
权重
嵌套越深，权重越大
id > class > 元素
> ### 盒子模型
content margin padding border
- 样式重置
*{
margin: 0;
padding: 0;
}
- 行高
line-height /*行高可以将一段文本撑开，让文字在行高中居中
设置行高就不用设置高度了*/
- 对齐方式
text-align (center 居中 left 左对齐 right 右对齐)
- 参数设置
设置两个参数 第一个：top,buttom 第二个：right, left
设置三个参数 第一个：top 第二个：right,left 第三个：bottom
> ### 标签分类
- 块标签
//特点
1.独占一行
2.能够设置width,height
//常用的块标签
div,h1~h6,p,ul,li,dl,dt,dd
- 内联标签
//特点
1.并排显示
2.不能设置width,height
3.不能设置margin-top,margin-bottom
a,span,em,strong
- 内联块
//特点
1.并排显示
2.可以设置宽高
//常用的内联块标签
button,img,input
> ### 水平居中
- 块元素水平居中
margin-left:auto;
margin-right:auto;
- a.如何让内联元素和内联块元素水平居中
display:block;
margin-left:auto;
margin-right:auto;
- b.如何让内联元素和内联块元素水平居中
//给父级加
text-align:center
