标签：box --- 记录 元素 content 重排 重绘 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。