css记录

1.css如何实现标准模型与ie盒模型的切换

content+padding+border+margin

box-sizing:content-box;(标准盒模型)  content

box-sizing:border-box;(ie盒模型)  宽高计算  content+padding

2.css如何实现文字反过来的效果

上下镜像翻转  transform:rotate(180deg)

左右对称翻转 unicode-bidi: bidi-override; direction: rtl;

3.css的优先级

  !important>style>id>class>标签

  A---内联样式

  B---ID

  C---class 属性 伪类选择器

  D---标签 伪元素 选择器

  #test li{....}   ul.list li{......}    li{....}

  (0,1,0,1)    >    (0,0,1,2)   >      (0,0,0,1)

4.重排(回流)和重绘   reflow和repaint的区别

   什么时候回重排回流reflow----元素的位置尺寸大小发生了变化，浏览器需要重新计算元素的几何属性，这个时候就会重排

   页面窗口大小发生了变化

   calc计算宽高的方式

   添加或者删除元素

   元素的位置，尺寸发生改变

   元素内容发生变化

   页面一开始渲染的过程

 

  什么时候重绘----在构造渲染树和重排时，已知节点的可见性，几何位置尺寸等属性，将节点转化为屏幕上的实际像素的阶段叫做重绘

   v-show  切换的过程就会发生重绘 因为几点的可见性属性发生了变化

  如何减少重排和重绘

  使用translate的方式改变元素位置  而不是直接改变left  top

  position  fixed  ansolute   这样元素会图片里文档流

  读取节点属性时，先存成变量再重复使用

  样式集中改变  用类名  或者cssText的方式

   少使用getBoundingClientRect()   getComputedStyle()  offsetXXX   clientXXX  scrollXXX  这些事元素的布局信息，调用时回强制刷新浏览器的操作队列，造成回流

   transform  opacity filters   will-change

 

  

标签：box,---,记录,元素,content,重排,重绘,css
来源： https://www.cnblogs.com/carolddz/p/16372910.html