1. 选择器
选择器是CSS3中一个重要内容，使用选择器可以大幅度提高开发人员书写和修改样式表的效率，减少冗杂的代码，便于开发。选择器包括基础选择器，层次选择器，伪类选择器，伪元素选择器，属性选择器。
1.1 基础选择器
1.1.1 通配选择器（通配符）
如果所有的元素都需要定义相同的样式效果就用通配选择器。
*{
font-family: Arial;
font-size:14px;
margin: 0;
padding: 0;
border: none
}
1.1.2 标签选择器
统一定义常用标签的基本样式。
<style>
/*标签选择器*/
p{
font-size:15px;
}
</style>
1.1.3 类选择器
类选择器能为相同对象定义不同的样式，为不同的对象定义相同的样式，以“.”前缀开头，然后自定义一个的类名，例如：.one。
<style>
/*类选择器*/
.one {
font-size: 18px;
font-weight: bold;
color: red;
}
</style>
1.1.4 ID选择器
ID选择器以“#”开头，然后接一个自定义的ID名。HTML所有的标签都支持ID选择器，只要在标签中定义id属性就行了。ID选择器一般是用来定义HTML框架结构的布局效果，因为元素ID都是唯一的。
<style>
#one{
font-size: 25px;
margin: auto;
text-align: center;
}
</style>
1.2 层次选择器
通过html的dom元素间的层次关系获取元素，主要层次关系有 后代、父子、相邻兄弟和通用兄弟。
1.2.1 后代选择器
作用的是选择元素的后代元素。包括子元素、孙辈元素等。
.div p{
color：blue；
}
1.2.2 子代选择器
作用的是某元素的所有子元素，不能包括孙辈元素。
.div > h2{
color:blue;
}
1.2.2 兄弟选择器
作用的是选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。
- 邻近兄弟选择器
p + h2{
color:blue;
}
- 普通兄弟选择器
p ~ h2{
color:blue;
}
1.3 伪类选择器
结构化伪类选择器是CSS3的新增选择器。常用的结构化伪类选择器有:root 选择器、:not 选择器、:only-child 选择器、:first-child 选择器、:last-child 选择器、:nth-child(n) 选择器、:nth-last-child(n) 选择器、:nth-of-type(n) 选择器、:nth-last-of-type(n) 选择器、:empty 选择器、:target 选择器。
1.3.1 :root 选择器
:root 选择器用于匹配文档根元素，使用“:root 选择器”定义的样式对所有页面元素都生效。对于不需要该样式的元素，可单独设置样式进行覆盖。
1.3.2 :not 选择器
排除子结构元素。
1.3.3 :only-child 选择器
匹配有且仅有一个孩子。
1.3.4 :first-child & :last-child 选择器
分别应用于第一个或最后一个子元素设置样式。
1.3.5 :nth-child(n) & :nth-last-child(n) 选择器
1.3.6 :nth-of-type(n) & :nth-last-of-type(n) 选择器、
1.3.7:empty 选择器
1.3.8:target 选择器
1.4 伪元素选择器
所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。常用的伪元素选择器有:before选择器和:after选择器。
1.5 属性选择器
CSS3在CSS2的基础上新增了3个属性选择器，分别是E[attr^=“value”]、E[attr$=“value”]、E=[attr*=“value”]。三个新增的选择器和已定义的E[attr]、E[attr=“value”]、E[attr~=“attr”]、E[attr|=“value”]共同构成强大的HTML属性过滤器。
2. 盒子
盒子是网页布局的基础。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子。
盒子居中：
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
2.1 盒子模型
清零
*{
margin: 0;
padding: 0;
border: none;
}
- 盒子的主要部分：content内容，height高度，width宽度，border宽度，padding内边距，margin外边距
默认情况下width和height属性只是设置content（内容）部分的宽和高。盒子真正的宽和高按下面公式计算：
盒子的宽度 = 内容宽度width + 左填充padding-left + 右填充padding-right + 左边框 border-left + 右边框border-right + 左边距margin-left + 右边距margin-right
盒子的高度 = 内容高度height + 上填充padding-top + 下填充padding-bottom + 上边框border-top + 下边框border-bottom + 上边距 margin-top + 下边距margin-bottom - margin
margin塌陷：父元素与子元素都有上外边距时，此时父元素会塌陷较大的外边距值
/*同时设置四条边的边距相等*/
margin: 10px;
/*上下边距，左右边距*/
margin: 10px 10px;
/*上边距，左右边距，下边距*/
margin: 10px 10px 10px;
/*上边距，右边距，下边距，左边距*/
margin: 10px 10px 10px 10px;
/**/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
- 只有块级元素可以水平居中
2.2 背景属性
rbackground-color属性性设置元素的背景颜色。
颜色值有三种：color值；transparent透明，为默认的值；inherit，继承父元素的color。
元素的背景是元素的总大小，包括填充（padding）和边界（但不包括边距margin）。
当我们为元素设置padding、border和margin属性时，背景颜色会渲染到padding,而不会渲染到border和margin。
background-image属性设置一个HTML元素的背景图片，元素的背景是元素的总大小，包括填充（padding）和边界（但不包括边距margin）。默认情况下，图片会在垂直和水平方向重复显示。
写法：background-image: url('url');
background-repeat属性定义图片是否在垂直和水平方向上重复显示。
写法：background-repeat: repeat-y||repeat-x||no-repeat; 分别表示在垂直方向上重复、在水平方向上重复、不重复显示。
background-size属性定义背景图片的大小。
写法：background-size: 10px 10px; 分别表示宽、高，若只写一个值，表示宽、高为一个值。
没有规定 background-repeat属性，默认在水平和垂直方向都重复显示背景图片。
背景复合属性：
background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-size] [background-clip] [background-orgin];
2.3 渐变属性
渐变属性包括线性渐变和径向渐变。
2.3.1 线性渐变
background-image: linear-gradient(direction, color1, color2 [stop]...);
background-image: linear-gradient(渐变角度，颜色值1，颜色值2…颜色值n);
direaction：表示线性渐变的方向。有以下三种表示方法。
to left：设置渐变为从右到左。
to bottom：设置渐变从上到下。这是默认值。
to right：设置渐变从左到右。
to top：设置渐变从下到上。
top：设置渐变从上到下。这是默认值。
bottom：设置渐变从下到上。
left：设置渐变从左到右。
right：设置渐变为从右到左。
角度用数字+单位来进行表示，单位使用deg。所有的颜色都是从中心出发，0deg是to top的方向，顺时针是正，逆时针是负。
stop：color后面可以加上stop，stop可以使百分值也可以是像素值，表示某个颜色在stop位置处固定
2.3.2 径向渐变
径向渐变指从一个中心点开始沿着四周产生渐变效果。由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。
background-image: radial-gradient(<shape> <position> color1,...colorn)
background-image: radial-gradient(渐变形状 圆心位置，颜色值1,…,颜色值n)
渐变形状：可以是定义水平和垂直半径的像素值和百分比（例如“80px，50px”），也可以是关键字“circle”（指定圆形径向渐变）和“ellipsre”（指定椭圆形径向渐变）。
圆心位置：用“at”加上关键字或参数值定义径向渐变的中心位置。
2.3.3 重复渐变
3. 定位
3.1 文档流
- 空白折叠现象
- 高矮不齐底部对齐
3.2 浮动定位
浮动可以使元素脱离标准文档流，实现多个元素在同一行。
float属性
clear属性
清除浮动
3.3 层定位
position属性
fixed固定定位：相对浏览器窗口定位
pssition:fixed;
top:10px;
bottom:10px;
left:10px;
right10px;
relative相对定位：
absolute绝对定位：