1.CSS 的书写顺序：
- 定位/浮动/display
- 盒子模型
- 文字属性
2.CSS 的几种定位
a. 静态定位 这个是默认值, 标准流就是静态定位 下面的情况你改变 position 的位置不会有任何作用，改变宽和高有用。
position: static;
left: 1000px;
top: 200px;
width: 200px;
height: 200px;
b. 相对定位，相对定位的相对自己而言，有点像ios的bounds的概念。 特点：
- 占有原来的位置
- 仍然具体标签原有的显示模式特点
- 改变位置参照自己原来的位置
特别的注意的是：如果left和right都有, 以left为准; top和bottom都有以top 为准
c.绝对定位
原理：先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位; 有父级, 但父级没有定位, 就找父级的父级，逐层找下去，最后也没找到的话以浏览器窗口为参照为进行定位。 注意这里的父级的定位是绝对或者相对定位,固定定位都可以，唯独初始的静态定位（包括设置为静态定位和不设置定位两个）不行。
特点：
- 脱标, 不占位
- 改变标签的显示模式特点: 具体行内块特点(在一行共存, 宽高生效）
绝对定位需要注意的问题：
绝对定位的盒子不能使用左右margin auto居中，为什么呢？因为这两个本质都是在干一件事，让自己的位置相对于父元素改变，如果都生效可能会产生冲突。
- 所以使用绝对定位的盒子不能使用上面的居中，需要使用下面的代码居中元素
left: 50%;
top: 50%;
/* 位移: 自己宽度高度的一半 */
transform: translate(-50%, -50%);
注意事项二 ：绝对定位要相对 水平和竖直方向都要写，即便是0也要写，否则可能会出现错乱，这点非常重要。
d.固定定位：fixed
position: fixed;
left: 0;
top: 0;
特点：当浏览器里面内容滚动时候，fixed的元素位置固定不变。有点像tableview group样式的header
- 脱标-不占位置
- 改变位置参考浏览器窗口
- 具备行内块特点
3.元素层级问题
不同布局方式元素的层级关系: 标准流 < 浮动 < 定位
不同定位之间的层级关系:
• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
不同的定位元素改变层级： 属性名：z-index 属性值:数字
数字越大，层级越高，默认是0
4.结构伪类
作用主要针对的是，一个元素中父元素很多相同的元素，类似于数组，所以搞了个结构伪类选择器来快速选择想要的元素。
选中第一个
li:first-child
选最后一个
li:last-child
第几个
li:nth-child(n)
偶数
li:nth-child(2n)
奇数
li:nth-child(2n+1)
找到前3个
li:nth-child(-n+3)
4的倍数
li:nth-child(4n)
/* 找到第一个li 里面的 第三个a 设置文字颜色是红色 */
li:first-child a:nth-child(3) {
color: red;
}
注意前面一定是选择到很多个li标签，然后用first-child，注意结构伪类一定是先选择到当前的选择器，再从众多中选特定的。
5.伪元素
什么是伪元素？
伪元素 通过css创建标签, 装饰性的不重要的小图。本质就是CSS 创建标签。 步骤:找父级, 在这个父级里面创建子级标签 注意点：````父级元素::before 还是使用 父级元素::after ``` ,特别需要注意的是 content属性必须添加, 否则伪元素不生效 . 伪元素默认是行内元素，宽高不生效，需要你设置成行内块或者块元素。
.father::before {
/* 内容 */
/* content属性必须添加, 否则伪元素不生效 */
content: '';
color: green;
width: 100px;
height: 100px;
background-color: blue;
默认是行内元素, 宽高不生效
display: block;
}
6.浮动
浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离
浮动解决两个问题：
- 图文环绕
- 网页布局: 块在一行排列
浮动标签是顶对齐。 1.设置了浮动后的标签，具有行内块的特点，宽高可以生效。 2.宽度不够是，标签会自动换行 3.会半脱离标准流，也是盒子本来是独占一行的，可能不独占一行。可以想象地上很多盒子，盒子悬空了，后面的盒子可以靠着前面的盒子排了。又为什么说他是半脱流呢，是因为现在的盒子可以占着原来盒子的位置，但是内容还是要从前面盒子的边界以外开始布置。
float: left;
/* 因为有浮动, 不能生效 - 盒子无法水平居中 */
margin: 0 auto;
浮动带来的问题？ 由于设置浮动后其他的影响：简单的来说就是div这个元素本身是子元素都高度后，这个div也会有高度，但是如果你的子元素设置了浮动，父元素就没办法就撑开，需要加代码解决。
举一个例子： 比方说上面一个div 放个两个div，如果该父div没设置高度，两个子div设置了宽度和高度，如果再往父div 下面放一个div，下面的div会和上面的div y方向相同的布局。 需要父元素有高度，从而不影响其他网页元素的布局
解决办法：父元素设置 overflow : hidden 这个CSS属性
什么是通栏？ 就是宽度和浏览器一样宽。
7.CSS 的显示模式
块级元素：
1. 独占一行(一行只能显示一个)
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
元素有这些： div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......
行内元素
1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高
元素：a、span 、b、u、i、s、strong、ins、em、del,伪元素。
行内块
1. 一行可以显示多个
2. 可以设置宽高
元素： input、textarea、button、select......
8.CSS 三大特性：
1.继承性
可以继承的常见属性(文字控制属性都可以继承)
- color
- font-style、font-weight、font-size、font-family 3. text-indent、text-align
- line-height
2.层叠性
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效 ➢ 注意点:
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
3.优先级
选择器权重
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
important相关：
- !important写在属性值的后面，分号的前面!
- !important不能提升继承的优先级，只要是继承优先级最低!
- 实际开发中不建议使用 !important 。
实际操作的方法：
-
先判断当前的选择器最终是否选择到当前要比较的元素，如果没选择到，看他是不是继承的，如果两个要比较优先级的元素都是继承，那么首先要比较他们两个继承的层级，谁的层级高（谁是爷爷,谁是爹，爷爷层级高）谁先生效，如果层级一样，那么再计算层级的权重。还有一点如果是继承的话，比方说a标签，可能不会继承父标签的颜色，而会显示它内部的预置蓝色，这个其实也很好理解，其实相当于内部又进行了重写了color相关的东西。
-
如果不是继承，最终直接选择到要比较的元素，先看有没有 !important,如果有的话他的层级最高，否则按照要进行权重计算了，权重计算要按照 （行内样式，id选择器，类选择器，标签选择器）从括号里面的行内样式开始比较，特别需要注意的是没有这里没有像普通数字那样进位的概念，100 id选择器并没有人家的一个行内样式级别高。
9.盒子模型存在的问题？ 问题一：水平布局 的盒子，左右的margin正常，互不影响 。 最终两者距离为左右margin的和。
问题二：
合并现象
垂直布局 的 块级元素，上下的margin会合并
➢ 结果:最终两者距离为margin的最大值
问题三：塌陷现象 互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上 导致父元素一起往下移动。
解决办法：
- 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)
- 给父元素设置overflow:hidden
- 转换成行内块元素
- 设置浮动
