css那些事

1. 盒模型

• 标准模型width=content
• IE模型width=content+padding+border
• box-sizing中content-box为标准模型，border-box为IE模型

2.BFC 块级格式化上下文

• BFC区域不会与浮动元素的布局重叠
• BFC是一个独立的区域，外面的不会影响里面的布局，里面的也不会影响外面的布局
• 计算BFC高度的时候，浮动元素也会参与计算
• 同一个BFC下边距会发生重叠
• 创建BFC

  body根元素
  overflow不为visible
  float不为none
  position的值不为static或relative
  display属性为inline-block,table-cell,table-caption,flex,inline-flex
  

3.选择器

• 元素选择器
• 类选择
• ID选择器
• 通用选择器
• 组合器

       A,B  匹配A或B的任意元素
       A B  匹配A的后代B元素
       A>B  匹配B是A的直接子节点
       A+B  匹配B是紧跟A的兄弟节点
       A~B  匹配B是A 之后的任意兄弟节点
       
  

• 属性选择器

  [attr]
  [attr=val]
  [attr~=val]
  [attr|=val]
  [attr^=val]
  [attr$=val]
  [attr*=val]
  

• 伪类和伪元素
• 权重

  从0开始，
  一个行内样式+1000，
  一个id选择器+100，
  一个属性选择器、class或者伪类+10，
  一个元素选择器或者伪元素+1，
  通配符+0
  

4.定位

• static
• relative 占据之前的位置 相对于之前的位置移动
• absolute 脱离文档流 相对于父元素的realtive
• fixed 脱离文档流 相对于浏览器视口本身
• sticky

5.flex布局

• 主轴如果选择row/row-reverse方向是沿着inline方向延伸，如果选择column/column-reverse方向是沿着block排列的方向
• flex-flow:主轴方向 还不换行
• flex-basis定义了元素的空间大小
• flex-grow在主轴上增加空间问题
• flex-shink处理flex元素收缩的问题

6.层叠上下文

• 谁大谁上
• 后来居上

7.水平垂直居中

• flex布局
• 定位
  • 父元素相对
  • 子元素绝对
  • top left 50%
  • margin:减去机身宽高一半
• 使用transform
• table-cell实现
  • vertical-align:middle
  • 不要使用float和absolute

8.浮动