android webkit CSS3及Render初窥
16lz
2021-01-23
#############################################
本文为极度寒冰原创,转载请注明出处 #############################################在理解如何渲染之前,有一个非常重要的概念一直没有搞的很明白。不是很清楚RenderBox,RenderLayer这些内容的具体对应部分和各种模型的作用。 首先先看一个现象,我们在用chrome浏览器打开网页时,选择右键的审查元素,会看到这个的一个图。
这个图想要表达的就是今天想分析的第一个问题。Box的模型。 还是从一个简单的网页开始看起。
<html> <head> <style type="text/css"> #adiv { width:300px; backgroud-color: #efefef; boarder: 2px solid black; } .aclass { border: 5px solid red; margin: 150px 100px 10px 40px; padding: 15px 20px 25px 30px; color: green; } </style> </head> <body> <p>This is test webpages! </p> <div id="adiv"> <div class="aclass">A B C D</div> </div> </body></html>这个网页的显示效果如下图所示:
这个是什么意思呢? margin: 边界,元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。 padding:内边距,其判断的依据即边框离内容正文的距离。 border: 边框。即为红色的部分。 Content:内容。即为网页显示的内容。在本例中为“A B C D”。
在一个正常显示的网页中,具体的盒子模型是这么定义的。
------------------------------------------------------------------------------------- margin |-----------------------------------------------------| | border | | |-------------------------------------------| | | | padding | | | | |--------------------------------| | | | | | content | | | | | |--------------------------------| | | | | | | | |-------------------------------------------| | | | |-----------------------------------------------------|--------------------------------------------------------------------------------------在浏览器解析的时候,我们会去将每一个element按照相对位置进行布局,然后进行排版位置的确定。
content的内容基本就是想展示给用户的最想表达的内容。
另外在Render里面,有很多的类。这些类具体是怎么对应的呢? RenderObject: 这个类是所有Render Node的一个基类, 作用和Dom树中的Node的作用相似。在这个类中,就包含了插入render树的链表操作的指针。 RenderBox: 这个类主要对应的是Css3中的box模型。 而box模型,根据上面的描述应该比较清楚了。 RenderFlow: 主要用来描述Css模型中用来处理的Inline-flow,block-flow的操作,inline和block是在css中对应的text的具体情况。 RenderBlock: 主要对应CSS3的block-level元素, --> <div> RenderInline: 主要对应CSS3的inline-level元素, ---> <spin> RenderText: 对应Dom tree的text的node RenderImage: 对应Dom tree的image的node RenderView: 对应Render tree的根节点。 RenderStyle: 主要用来对应RenderObject可能涉及的CSS的属性。 主要对象是m_style.
更多相关文章
- Android EditText属性介绍及监听内容变化
- 移动web在ios和android下点击元素出现阴影问题
- Android防止内容溢出
- android文本内容自动朗读实例教程
- Android 4.0 Launcher2源码分析——Laucher界面元素分解(主布局文
- unity3d开发一:入门知识+导入模型+旋转脚本
- Android可折叠收缩伸展的Expandable分组RecyclerView:模型抽象和
- Android 中如何将带有html格式的文章转换成能在Android中显示的
- android:layout_marginLeft指该控件距离边父控件的边距, android: