一、选择器的权重

类型选择(元素选择器)：0001
class选择器：0010
id选择器：0100
伪类选择器:0001
层级(包含)选择器：多个选择器的权重之和
群组选择器: 分开看每个选择器的权重
谁的权重的值大，谁的优先级就高

二、浮动

• 标准流：块标签一个占一行，从上往下布局。默认宽度是100%
  行内标签一行可以显示多个，从左往右布局，知道遇到边界就自动换行

• 脱流：浮动、定位
  1.浮动：就是让竖着显示的标签横着来,块的默认宽度是内容的宽度
  float: left和right

注意:
1.如果要使用浮动，那么同一级的所有的标签都要浮动
2.如果父标签浮动，那么子标签的位置会跟着一起动
3.布局基本顺序：从上往下，从左往右

三、文字环绕

文字环绕: 被文字环绕的标签浮动，文字标签不浮动

四、清除浮动

1.清除浮动：

是指清除因为浮动而产生的问题(高度塌陷) --- 问题不是什么时候都会产生的

2.怎么清除浮动？

a.添加空的div：
在父标签(高度塌陷的标签)的最后添加一个空的div,并且设置这div的样式表: clear:both
（可能会产生大量的额外的代码）
b.设置overflow：
在父标签中设置样式表的overflow的值为hidden
c.after{display:block;clear:both;content:".";visibility:hidden;height:0;} clear{zoom:1;}

五、display属性

1.HTML中标签分为块和行内
2.CSS中中标签分为3类：块、行内块、行内（display）
（在标准流中）
block:块（一个占一行，默认宽度是100%，高度默认根据内容来确定；直接设置宽高有效）
inline-block:行内块(一行可以有多个，默认宽高是内容的宽高；直接设置宽高有效)
inline:行内(一行可以有多个，默认宽高是内容的宽高；设置宽高无效)

通过改变标签的display的值，可以让一个标签在块、行内块个行内之间任意切换

注意：inline-block标签的右边默认都有一个间隙，不能和其他标签无缝连接(这个间隙目前没有办法清除)

六、定位

1.距离
top: 标签顶部距离其他标签的位置
bottom: 标签的底部距离其他标签的位置
left: 标签的左边距离其他标签的位置
right: 标签的右边到其他标签的位置

2.position
想要设置标签的top,bottom,left,right的值有效，必须设置标签的参考方法
--- initial:（默认值）没有参考对象
absolute: 相对第一个position的值是非static,非initial的父标签进行定位
relative: 正常位置定位（按标准流定位）
fixed: 相对于浏览器定位
sticky: 不滚动的时候按标准流布局，滚动的时候相对浏览器定位

七、盒子模型

每一个标签都是由4个部分组成：
1.内容：显示标签内容的部分，可见的（设置宽和高的值，就是设置内容部分的大小）
2.内边距(padding):可见的，不能显示内容（通过设置padding来改变其值，默认是0）
3.边框(border):可见的，如果有内边距边框就显示在内边距上，否则显示在内容上
4.外边距(margin):不可见的，但是会占据浏览器的空间