android webkit CSS3及Render初窥

原创 2013年12月02日 11:25:39

#############################################

本文为极度寒冰原创,转载请注明出处
#############################################


在理解如何渲染之前,有一个非常重要的概念一直没有搞的很明白。不是很清楚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.
                                                                                                                        

CSS3 动画实现方法大全

CSS3动画实现方式大全          .left {     width: 300px;     color: white;     background: #444444;   ...
  • qq_25226029
  • qq_25226029
  • 2016年06月13日 14:20
  • 2290

去掉div的滚动条的这个有用哦,CSS3滚动条-webkit-scrollbar简介~

最佳实践:仅在Chrome支持 webkit现在支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。 如果你想跳过介绍,直接看demo的话,请点击de...
  • timtimup123321
  • timtimup123321
  • 2015年11月11日 16:17
  • 2446

文字颜色渐变与动画原理(仅webkit)

我们经常希望我们制作的网站充满生气,那就需要动画来点缀。而网页的标题往往是做文章的好地方。 可能你对于制作一张渐变背景图比较熟悉了,但是不知道字体颜色如何使用渐变色来代替? 下面就展示一种...
  • hugh77
  • hugh77
  • 2015年02月03日 12:02
  • 1858

CSS3自定义滚动条样式 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢? ...
  • hanshileiai
  • hanshileiai
  • 2014年10月23日 15:23
  • 172512

CSS3自定义滚动条样式 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢? 前言w...
  • zhu1500527791
  • zhu1500527791
  • 2016年11月10日 19:34
  • 1226

CSS3自定义滚动条样式 -webkit-scrollbar

CSS3自定义滚动条样式 -webkit-scrollbar
  • hedianwei
  • hedianwei
  • 2016年12月05日 19:26
  • 533

(转载)CSS3自定义滚动条样式 -webkit-scrollbar

转载来至  韩世雷 程序员专栏 有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了...
  • a1034619934
  • a1034619934
  • 2016年04月26日 22:35
  • 151

CSS3自定义滚动条样式 -webkit-scrollbar

前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。 演示 来看看这2个滚动...
  • chinet_bridge
  • chinet_bridge
  • 2017年06月12日 15:54
  • 365

详解css3中webkit-animation

问题?详解css3中webkit-animation 原理:这是一个不需要触发就可以执行的css3的类似伪类属性,与伪类属性不同的是,伪类需要鼠标悬浮才能执行,而该属性不需要任何触发条件即可执行 ...
  • Mr_li13
  • Mr_li13
  • 2016年02月25日 21:39
  • 799

基于webkit浏览器开发html/css3的web应用程序

在当今web市场上已经有不少web站点开始引入html以及css3,但是短时间内几乎所有站点都得考虑兼容不支持html5以及css3的浏览器,如 IE系列(IE9虽然支持,但是再耐心等吧)。但是令人十...
  • freshlover
  • freshlover
  • 2013年05月21日 17:48
  • 1651
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android webkit CSS3及Render初窥
举报原因:
原因补充:

(最多只允许输入30个字)