前端基础知识之css

选择器和权重

盒模型

*{box-sizing: border-box}
标准模型和ie模型的区别。默认content-box

js如何获取宽高?

dom.currentStyle.width
window.getComputedStyle(dom).width
dom.getBoundingClientReact().width 窗口位置。

BFC

边距重叠解决方案。margin合并
渲染规则:

  • BFC垂直边距会重叠
  • bfc区域不会和浮动重叠
  • 独立容器,外界 不会
  • 计算bfc高度,浮动不参与计算
    触发:
  • float 值不为none
  • position不是static relative
  • display table相关
  • overflow
    使用场景:
    比如清楚浮动。可以设置float overflow

    float

圣杯,双飞翼

Q:左侧100px,右侧200px,中间自适应。

  • 浮动。纯浮动,中间不需要指定宽度。left right center
  • 绝对定位。中间 left right 指定数值。
  • flex。 flex:1
  • 表格布局 table-cell
  • grid

定位

flex

重绘 回流

repaint reflow
重绘回流不可避免,我们优化的点是减少不必要的重绘回流
重绘,不脱离文档流,一些属性发生变化,比如颜色,背景等。
回流,DOM大小位置发生变化,浏览器需要重新渲染,或者全部重新渲染。

要进行优化,一般都是减少回流,比如先暂存DOM修改,一次性完成修改。

请我喝杯咖啡吧~