前端基础知识之css

选择器和权重 #

盒模型 #

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

js如何获取宽高? #

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

BFC #

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

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

float #

圣杯,双飞翼

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

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

定位 #

flex #

重绘 回流 #

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

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