css相关

css选择器的优先级

1. 常用的css选择器： id，class，标签，伪类，通配符
2. 选择器的优先级： important>行内标签>id>class>标签>通配符

px，em,rem,vw,vh的区别

• px就是像素pixel的缩写
• em是相对单位，1em是相对于当前元素的1font-size的大小，比如： text-indent: 2em
• rem是css3新增的相对单位，1rem等于html的1font-size的大小
• vw和vh，是相对单位，1vw是适口宽度1%，1vh是适口高度的1%

css中哪些样式可以继承 css中只要跟文字相关的才是可以继承的

• 文字字体：font，font-family,font-size,font-weight,font-style
• 文字修饰: color,text-indent,text-align,line-height,word-spacing,letter-spacing

你对BFC的理解

• 什么是BFC？
  • BFC(blocking formatting context)块级格式化上下文的缩写
  • 是一个独立的空间里边子元素的渲染不影响外边的布局
• BFC的作用
  • 清除margin塌陷
  • 清除浮动
• 如何触发BFC
  • overflow：hidden
  • position: absolute/fixed
  • display: inline-block/table-cell/flex

你对盒子模型的理解

• 什么是盒子模型
  • 盒子模型就是当前元素在网页中占据的实际大小
• 盒子模型的计算方式
  • 盒子模型 = width/height + border + padding
• box-sizing
  • 默认值是content-box
  • 当box-sizing的值为border-box的时候，盒子模型的大小就是width/height的大小
• offsetWidth
  • javascript中获取盒子模型的方式是 obj.offsetWidth/offsetHeight

div水平垂直居中

• position+ margin负值（固定宽高）
• position+ margin: auto(固定宽高)
• display:tabel-cell + verticacl-alig: middle,+ margin:auto (固定宽度)
• position + transform（不需要固定宽高）
• display: flex; align-item: center,justify-content: center（不需要固定宽高）

如何清除浮动

• 设置overflow： hidden
• 父级也浮动
• 父级增加clearfix类

    clearfix: after {
        content: "";
        display: block;
        clear: both
    }

• 父级尾部增加一个元素，class=“clear”（不常用），.clear: clear: both