css重难点
普通流 inline
text-align:center
文字排列 行内元素适用
可以在块级元素外层包一个div 然后设置 text-align:center
普通流block
margin :0 auto
上下外边距为0 左右自适应
浮动元素
设置了左浮动的块级元素
进行居中
position:relative 相对原来的位置
left:50%
margin-left:-width/2 OR transform:translateX(-50%)
绝对定位
postion:absolute
left:0
right:0
margin：0 auto //使用了绝对定位可以使用块级元素的
postion:absolute
left:0
right:0
left:50%
margin-left:-width/2 OR transform:translateX(-50%)
清除浮动(出现浮动塌陷)
浮动就是儿子飘了（float）,老子管不住儿子了（儿子高度为空）
浮动塌陷 包含块(父级块)没有设置高度或者为自适应 内部元素浮动脱离文档流 浮动元素的高度就不会计算在内，包含块内容不能撑起来形成塌陷 就会出现包含块对应浮动元素的位置的背景颜色直接没了
清除浮动三种方法
1.
给儿子介绍一个对象，管住儿子不要乱跑， 对象添加 clear:both
父元素容器内最底部加一个
然后给
设置属性clear:both
2.
把儿子锁在家里，bfc ，就是给老爷子设置 overflow:hidden / overflow:auto
给父元素设置属性overflow:hidden / overflow:auto
或者老爷子出去逮住小崽子，一起浮动 老爷子设置 float
3.
使用伪元素，就是给儿子介绍一个网恋对象（实际不存在，老爷子装的）
给老爷子添加 类class=clearfix 添加伪元素 ：
.clearfix::after { content:' '; display:block ; clear:both}
上面三种，我最经常犯的错误是给错误的对象加错东西，
所以再总结一下
第一种：发媳妇 给儿子后面的元素加 clear :both
第二种：给门上锁 给父亲加 overflow 或者 float
第三种：父亲假扮网恋 给父亲加 ::after 然后 display:block clear:both
我经常是把css 错加给儿子 然后怎么试都不成功，子不教，父之过，应该定准浮动的父亲做文章，就不会有问题了
外边距塌陷
段落间垂直方向间隔 块级元素
外边距计算
-
正数&&正数 取最大的数
-
负数&&负数 绝对值最大的数
-
正数&&负数 相加的和
圣杯布局
中间元素优先加载 div顺序 主左右
左中右元素设置左浮动
清除浮动消除塌陷
给父元素设置内边距 padding: 0 100px;
左右区域width:100px
使用负外边距
- 主区域设置宽度 width:100%
- 左区域设置 margin-left:-100%
- 右区域设置 margin-left:-100px
- 左区域设置 position:relative left:-100px
- 右区域设置 position:relative right:-100px
双飞翼布局
给主区域加一个父容器
左右区域width:100px
左中右元素设置左浮动
-
左区域设置 margin-left:-100%
-
右区域设置 margin-left:-100px
-
主区域设置margin:0 100px
-
主区域容器设置 width:100% float:left
伪类和伪元素
伪类(可以多个进行拼接)
基于DOM 添加了对元素修饰
状态类 结构类 表单类 语言类
伪元素
创建对象
rem和em
根选择器
：root{}
html{}
rem
根据根的font-size来定基准 不断变化迭代
em
chrome中 1 em=16px
继承了浏览器的字体大小
查找是否设置了font-size
如果没设置去找父元素font-size
父元素没有再去找根的font-size
line-height
每行文字之间基线的距离
行距=(line-height)---(font-size)
(line-height)=(font-size) 行距为0
(line-height)<(font-size) 行距小于0
垂直居中
padding设置左右内边距
line-height 单行文字 
flex布局 多行文字
table布局
grid布局
