您现在的位置是：课程教程文章
css浏览器的渲染过程
2023-12-13 23:41课程教程文章 人已围观
HTML+CSS项目实战，开发青竹电商平台【马
HTML+CSS项目实战，开发青竹电商平台【马报名课程之后请务必加上老师的微信 邀请你进入专门学习解答群 微信：mmss85...-
工程造价全过程精细化管控/合同价款调整
工程造价全过程精细化管控/合同价款调整师说法苑 建工法律课堂 —— shi shuo law —— 课程时间：40分钟 难度等级：★★... -
原创鲁班土建软件加手算工程造价预算全
原创鲁班土建软件加手算工程造价预算全原创刘大人教程淘宝店铺名： 刘中华原创工程造价教程 定位：独立 精通 自信... -
Vue3开发教程 5.绑定CSS样式
Vue3开发教程 5.绑定CSS样式本节课介绍为DOM元素动态绑定CSS样式的方法。 5.1 绑定class属性 5.1.1 绑定对象类...
说明
1、根据HTML构建HTML树（DOM）。
2、根据CS构建CSS树（CSSOM）。
3、将两棵树合并成一颗渲染树（render tree）。
4、Layout布局。
（文档流、盒模型、计算大小和位置）
5、Paint绘制。
（把边框颜色、文字颜色、阴影等画出来）
6、Compose合成。
（根据层叠关系展示画面）
如果是块级元素，就会设置好宽高，不存在任何问题。但如果是图片，此时是无法得知高度的（行内元素），只有等待第五步绘制以后再能确定高度。而图片的绘制需要时间，在尚未绘制完成的时候，获取到的高度则会出现问题。合理的解决方案是使用setTimeout延时获取div的高度。
<div></div>
<script>
varodiv=document.getElementById('bgImg');
odiv.innerHTML='<imgsrc="test.jpg">'
setTimeout(()=>{
varoHeight=odiv.scrollHeight;
console.log(oHeight);
},100)
</script>以上就是css浏览器的渲染过程，希望对大家有所帮助。更多css学习指路：css教程
本文教程操作环境：windows7系统、css3版，DELL G3电脑。
课程教程：css浏览器的渲染过程上一篇：http代理服务器有哪些
下一篇：没有了
