精华内容
下载资源
问答
  • CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制。这是 CSS 的一个基础概念。 视觉格式化模型根据 CSS 盒模型为文档的每个元素生成 0,1 或多个盒。每个盒的布局由如下内容...
  • 视觉格式化模型基础

    2015-07-11 12:30:31
    (ps:盒子就是框,不同翻译而已) 概念:  是用来处理文档并将它显示在视觉媒体上的机制 ... 将元素描述为一个盒子,就能确定元素的大小,尺寸和属性,方便浏览器根据视觉视觉格式化模型机制来进行渲染。
    (ps:盒子就是框,不同翻译而已)
    
    概念:
        是用来处理文档并将它显示在视觉媒体上的机制


    盒模型:
        处理文档时会为每一个元素生成相应的盒。
        就是一套机制/模型,描述了盒子的内容占用空间组成,包含四块:外边距,边框,内边距,内容。
        将元素描述为一个盒子,就能确定元素的大小,尺寸和属性,方便浏览器根据视觉视觉格式化模型机制来进行渲染。




    一个盒子的布局:
        盒子的尺寸和类型。
        定位方案(正常排版,浮动和绝对定位)。
        文档树中元素之间的关系。
        外部信息(例如,视口大小,图形的固有尺寸等)。




    相关术语:
        包含块:许多框的位置和大小都根据一个名为包含块的矩形框边缘来相对计算得到。每个框会被给予一个相对于其包含块的位置,但它不会被局限在其包含块内;它有可能会溢出。
              有两种,框所处的包含块即框的包含块;框为他的字元素创建的包含块;


        块级元素:display值为:block,list-item,table的元素
        块级框:块级元素生成一个主要的块级框(用来包含其子框和生成的内容,同时任何定位方案都会与这个主要的框有关)。某些块级元素还会在主要框之外产生额外的框:例如“list-item”元素。这些额外的框会相对于主要框来放置
        块容器框:1.除了table框,和可替换元素外的块级框
                2.不可替换的行内块和不可替换的table cell,这两种不是块级框
                一个块容器框要么只包含块级框,要么创建一个行格式化上下文而只包含行内级框
        块框:是块级框的块容器框称作块框
        匿名块框:为了使格式化简单,在某些情况下浏览器自动添加的块框。
                如::如果一个块容器框(如上例中为DIV生成的框)有一个块级框(如上例中的P),那么我们强制它只包含块级框在其中。
                <DIV>
                  Some text
                  <P>More text
                </DIV>
                有一个匿名块框围绕在"Some text"周围
                又如:当一个行内框包含一个属于正常排版的块级框,这个行内框(及与其位于同一行框的行内祖先)会被从周围的块级框(及其连续的块级兄弟Note.png)中分离出来,把行内框分离成两个框,它在块级框两边。在打断之前和打断之后的行框都附入匿名块框,并且该块级框与匿名块框成为兄弟。当这样的行内框受到相对定位影响,任何产生的移动同样影响到包含在行内框内的块级框。


        行内级元素简称行级元素:display值为:inline, inline-table, inline-block
        行级框:行级元素生成行级框
        行内框:'display'值是'inline'的非替换元素生成的行级框
        原子行级框:不属于行内框的行级框(例如可替换的行级元素、行内块元素、行内表格元素)
        匿名行内框:如:<P>Some <EM>emphasized</em> text</P> P元素生成一个块框,其内还有几个行内框。"emphasized"的框是由行内元素(EM)产生的一个行内框,而其它的框("Some"和"text")是块类元素(P)产生的行内框。后者就称为匿名行内框,因为它们没有与之相关的行级元素。




        ps:匿名框的继承属性会从包含它的非匿名框(这里只说是框,没有具体说明是块框还是行内框,注意区别)那里继承。匿名框的非继承属性将取其初始值。例如,匿名框的字体属性继承自DIV,但是外边距是0。 




    定位方案:
        1.正常排版。CSS 2.1 中,正常排版包括对块级框的块格式化,对行级框的行格式化,对块级框和行级框的相对定位。(格式化:指如何布局排版)
        2.浮动。在浮动模型中,一个框先按照正常排版来摆放,再将它从排版流中取出并尽可能地向左或向右偏移。其它内容可以排在一个浮动的周围。
        3.绝对定位。在绝对定位模型中,一个框会从排版流中完全脱离出来(它对后续的兄弟没有影响),并相对其包含块来指定其位置。


        排版流之外(out of flow)的元素:浮动、绝对定位或根元素
        排版流之内的(in-flow)的元素:不是排版流之外的元素




    正常排版Normal flow
        框在正常排版中必然**属于**一个格式化上下文,要么是块格式化上下文,要么是行格式化上下文。块级框**参与**块格式化上下文。行级框**参与**行格式化上下文。


        块级格式化上下文(BFC):可以理解为是一个独立的布局容器/区域,这个布局容器提供了一个环境,元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。
                            有这几种框会为其内容创建新的块格式化上下文:浮动框、绝对定位框、非块框的块容器、'overflow'属性非'visible'的块框。
                            表示规则:在块格式化上下文中,框会从包含块的顶部开始,一个接一个地,垂直向下地摆放。两个兄弟框之间的垂直距离由 [[|CSS2/box#propdef-margin'margin']] 属性来决定。在同一个块格式化上下文中,相邻的块级框之间的垂直外边距会出现折叠。
                                    每个框的左外边距边要紧贴其包含块的左边。即使在有浮动的情景下也是如此,除非框创建了一个新的块格式化上下文(在这种情况下该框可能会为了避开浮动框而变窄)。


        行内格式化上下文(IFC):类似于BFC,只是环境中的规则不一样。并且它不像BFC一样可以有某些框来生成,它存在于行框内
                            能把在一行上的框都完全包含进去的一个矩形区域,被称为该行的行框。
                            表现规则:在行格式化上下文中,框会从包含块的顶部开始,一个接一个地水平摆放。摆放这些框的时候,它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上,这些框可能会以不同形式来对齐:它们可能会把底部或顶部对齐,也可能把其内部的文本基线对齐。




    影响框的生成和布局的三个属性——'display','position'和'float'——间的相互关系如下:
        如果'display'值为'none',那么'position'和'float'无效,元素不生成框。
        否则,如果'position'值为'absolute'或者'fixed',框绝对地定位'float'计算的值为'none',并且 display根据下面的表格进行设定(计算值)。框的位置由'top', 'right', 'bottom'和'left'属性和包含块决定。
        否则,如果'float'的值不是'none',该框是浮动的,且'display'值根据下面的表格进行设定(计算值)。
        否则,如果元素是根元素,'display'值根据下面的表格进行设定(计算值),除了其在CSS2.1里面没有定义是否指定值'list-item'对应计算值'block'或者'list-item'。
        否则,'display' 的计算值为指定的值。


        指定值                                                                                                                                                             计算值
        inline-table                                                                                                                                                       table
        inline, table-row-group, table-column, table-column-group, table-caption,  table-header-group, table-footer-group, table-row, table-cell, inline-block             block

        其他                                                                                                                                                               与指定值相同



    相关链接:

    https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model

    http://www.w3.org/html/ig/zh/wiki/CSS2/visuren#visual-model-intro
















    展开全文
  • CSS2.1SPEC:视觉格式化模型之包含块

    千次阅读 2015-12-26 22:43:46
    原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制。...阅读本文前,应当对于CSS盒模型以及视觉
    原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制。本文首先从包含块写起,一方面总结标准中相应的阐述,并且结合具体的实例进行具体分析,特别是对于CSS2.1支持并不完善的IE6/7。由于经验尚浅,文中肯定存在一些问题,希望大家可以多多包涵并且指出问题。

    阅读本文前,应当对于CSS盒模型以及视觉格式化模型中会产生的各种框(box,也可以成为盒子)以及各种不同的布局方式有比较准确的认识,可以阅读杜瑶大神的两篇文章,这两篇文章也是对标准中相关章节的翻译和阐述。

    或直接阅读CSS2.1 SPEC中的相关章节:
    (1) Box model

    在讲包含块之前还是想先简单说一下视觉格式化模型

    1、CSS视觉格式化模型
    标准中对于视觉格式化模型的阐述为:
    how user agents  process the document tree for visual media.
    用户代理在视觉媒体下如何处理文档树,用户代理最常见的比如浏览器,而负责页面解析和渲染的就是浏览器的渲染引擎(现在更多地直接称为浏览器内核),文档既可以包括HTML文档,也包括其他通用标记语言所编写的文档。在视觉格式化模型中,文档树中的每个元素都会根据盒模型产生0个或多个框,影响这个框的布局的因素有:
        (1)框的尺寸和类型,比如块级框和行内级框的布局方式就是不同的。
        (2)框的定位方式,display属性绝对了一个元素所产生的框的定位方式,定位方式不同的框在布局时也有不同的规则。
        (3)与其他框的关系,假如有两个框,它们之间是包含关系还是同辈关系而所产生的布局是不相同的。
         (4)其他的额外信息(比如视口的大小,置换元素的固有尺寸等)
    从这个角度讲,视觉格式化模型就是对上述这些因素是如何影响一个框的布局而进行的详细描述。

    2、视口(viewport)
    第一部分中出现了视口这个词,直观上看,我觉得视口可以理解为用户代理用来呈现解析和渲染后的文档树的区域,用户通过这个区域可以阅读文档得内容,在浏览器中,视口一般就是浏览器用于呈现网页的区域。
    标准中对于视口的阐述为:
    User agents for continuous media generally offer users a viewport (a window  or other viewing area on the screen) through which users consult a document. 
    注意加粗的continuous media,我们平时所浏览的网页就属于连续媒体,而通过打印机打印的文档内容必须是分页的,所以就是分页媒体,即paged media(此处的解释略粗糙,仅是个人的简单看法)。网页是连续的媒体,那么问题就来了,视口不可能跟随网页的大小而变化,因此视口在小于文档的尺寸时,必须提供一种滚动机制,最常见的就是浏览器的滚动条,通过滚动条我们就可以浏览超出视口的文档部分,也就是文档中阐述的:
    When the viewport is smaller than the area of the canvas on which the document  is rendered, the user agent should offer a scrolling mechanism. 

    当然关于视口的知识点可不只是上述的这么简单,比如在移动web中,viewport的相关属性对于移动web的开发至关重要,但本文暂不涉及其他关于视口的知识点。

    3、包含块(containing block)
    一个网页是由一个一个的框(box)所组成的,每一个框在页面中都有自己的尺寸、位置以及其他的渲染属性(如背景色,字体等),那么这些框在布局的时候,它们的位置是如何决定的呢?另外,如果没有为框定义显示的尺寸(width,padding,border,margin)等,那么它们的尺寸又是如何确定的呢?答案的关键点就是包含块,个人认为,包含块是学习CSS布局时基础中的基础,不过还好,这个概念也并不难理解。
    首先看一下标准中对于包含块的阐述:
    The position and size of an element's box(es) are sometimes calculated relative to a  certain rectangle, called the containing block of the element.
    即视觉格式化模型中所产生的各种框,它们的位置 往往都是根据一个特定的 矩形框边缘 来计算得到的, 这个矩形框就是这个box的包含块。
    注:如果讲 一个框的包含块时,指的是它 所处的包含块,而不是它 形成的包含块

    那么该如何确定一个框的包含块呢?标准中规定了相应的规则:
    3.1根元素的包含块

    根元素(HTML中就是html标签)的包含块称为 初始包含块:对于 连续媒体(比如网页),它具有 视口的尺寸并且定位在 画布的原点(可以直观理解为视口的内容起始位置,如果初始包含块的direction属性为ltr,那么起点位置就是视口的左上角,如果为rtl,那么就为视口的右上角)。初始包含块的direction与根元素的direction属性相同,默认为ltr,即从左到右。

    特别注意:初始包含块具有视口的尺寸,也就是说宽高都是和视口相同的,即使视口中出现了滚动

        
    3.2元素定位为static(默认值)或relative(相对布局)时的包含块

    对于定位属性为 static(默认值)或 relative(相对布局)的元素,其包含块是由最近的 祖先块容器框内容区域构成。
    这一点也比较好理解,虽然出现了块容器框和内容区域两个词,对于CSS盒模型和视觉格式化模型中的各种框有所了解后应该就能明白。下面有个简单的例子:
    ##DEMO 1:static或relative定位的元素的包含块
    CSS代码:
    .container{
    width: 1000px;
    margin: 50px auto;
    border: 2px solid #000000;
    padding: 50px;
    }
     
       
    HTML代码:
     
        
    <div class="container" style="">
    <div class="static-div-1" style="background: #CCCCCC;">
    static定位的元素
    </div>
    </div>

    带黑色边框的container有50px的padding,可以看到class为static-div-1元素是基于container的内容区域(content area)来定位的,这一点IE6/7也都是遵循标准的。

           
    3.3元素定位为absolute时的包含块

    对于position为absolute的元素,其包含块为最近的拥有非static定位属性(即position为relative,absolute或fixed)的元素所产生,有下面两种情况:
         <1>如果这个元素为一个 块容器框元素,那么包含块由这个元素的 内边距边界(padding edge)形成
         <2>如果这个元素是一个 行内元素,那么这个包含块由 包围该行内级元素的第一个行框和最后一个行框的box形成。如果行内元素被分割成了多行,那么在CSS2.1中,包含块则是未定义的。
         如果没有这样的祖先,那么其包含块就是 初始包含块
    注:在分页媒体中包含不一样的情况,本文暂不讨论分页媒体中的情况

    absolute的情况相对复杂一些,看以下例子:
    ##DEMO 2:绝对定位元素的包含块(1)-块容器框形成包含块
    CSS代码:
    .container{
    width: 1000px;
    margin: 50px auto;
    border: 2px solid #000000;
    padding: 50px;
    position: relative;
    }
    .absolute-div-1{
    position: absolute;
    left: 0px;
    top: 0px;
    }
    HTML代码:
    <div class="container">
    <div class="absolute-div-1">
    absolute定位的元素
    </div>
    </div>
    效果如下:
    
    
    可以看到,absolute-div-1的元素是绝对定位,并且定位起点为左侧0px,上部0px,虽然container有50px的padding,但由于绝对定位的元素是根据块容器框的padding edge来定位,所以absolute-div-1还是紧贴左上角显示。
    ##DEMO 3:绝对定位元素的包含块(2)-行内元素形成包含块
    DEMO3中,我们把container换成行内元素span,为了更明显地显示效果,我们给body加了一个高度并且设置了背景色,并且为span和absolute-div-1设置了不同的字体颜色,代码如下
    CSS代码:
    body{
    margin: 0px;
    font-size: 14px;
    height: 500px;
    background: #a0b3d6;
    }
    .container{
    margin: 50px auto;
    position: relative;
    color: #eeeeee;
    }
    .absolute-div-1{
    position: absolute;
    color: #ff0000;
    left: 0px;
    top: 0px;
    }
    HTML代码:
    <span class="container">
    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块
    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含
    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含
    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含
    <div class="absolute-div-1">
    absolute定位的元素
    </div>
    </span>
     
       
    效果:
    在IE6/7中效果也相同,另外我们提到过,如果元素是一个行内级元素,那么这个包含块由 包围该行内级元素的第一个行框和最后一个行框的box形成。我们来验证标红部分的阐述,即把absolute-div-1的top定位改为bottom,即bottom:0px,效果如下:
    这也验证了标准中所阐述的内容。

    注:在IE6中,绝对定位元素如果只用bottom定位,但是形成包含块的元素没有触发hasLayout时,bottom不会根据包含块的底部来定位,这个bug通过zoom:1等属性触发hasLayout可以解决。
    ##DEMO 4:绝对定位元素的包含块(4)-行内元素被分割成多行时
    视觉格式化模型中描述过,如果一个行内级元素包含了块级元素,那么这个行内级元素就会被分割成2块,并且都成为了块级元素。我们把DEMO3中的container改动一下:
    < span  class= "container" >
        行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块
    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含
    <div style="background: #eeeeee">中间出来了一个div</div>
    <div class="absolute-div-1">
    absolute定位的元素
    </div>
    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含
    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含
    </span>
    此时的效果在不同的浏览器中存在差异:IE6+和firefox中的效果为:

    而chrome中的效果为:

    可以看出,chrome中的绝对定位元素在定位时是基于被分割后形成的第二个框来定位的,而如果我们把绝对定位元素移动到分割元素之前,即:
    <span class="container">
    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块
    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含
    <div class="absolute-div-1">
    absolute定位的元素
    </div>
    <div style="background: #eeeeee">中间出来了一个div</div>
    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含
    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含
    </span>
     
       
    那么chrome中的效果就成了:
     
        
    
    
     
       
    可见,chrome中的位置是与绝对定位元素在代码中的位置相关的。

    ##DEMO 5:绝对定位元素的包含块(4)-初始包含块作为包含块
    如果一个绝对定位元素找到有非static定位属性的祖先,那么初始包含块就作为其包含块,这里需要注意的是初始化包含块的尺寸问题,2.1节中曾经讲过初始包含块具有视口的尺寸,即使存在滚动时,DEMO代码如下:
    CSS代码:为了出现滚动,我们为body加了1000px的高度
    .body-for-demo4{
    height:1000px;
    background: #a0b3d6;
    }
    .absolute-div-2{
        height: 100px;
    width: 100px;
    background: #03a9f4;
    position: absolute;
    bottom: 0px;
    left:0px;
    }
    HTML代码:
     
       
    <body class="body-for-demo4">
    <div class="absolute-div-2">
    </div>
    </body>
     效果如下:
       

     可以看到,虽然body的高度超出了初始包含块使得滚动条出现,但是初始包含块的尺寸时没有发生改变的。
        
    如果我们把body设置一个position:relative的属性,那么绝对定位框就会跑到页面底部了。

    2.4元素定位为fixed时的包含块

    元素定位属性为fixed时,对于连续媒体,包含块由视口形成,对于分页媒体,则由页面区域形成。
    position为fixed的元素特点是不随页面的滚动而滚动,它的包含块由视口形成,这一点也比较好理解。但是IE6不支持fixed的属性,可以使用css表达式或者hack的方式使IE6支持fixed。可参考:
     
     另外CSS2.1标准的原文第10章第1节中也有包含块的示例,标准中的示例更加基础,同样也可以参考。
             
    展开全文
  • 文章目录视觉格式化模型的简介1.显示类型2.盒模型尺寸3.定位方式 视觉格式化模型的简介  在可视化格式模型(Visual formatting model)即可视化媒体处理DOM树的方式。  DOM树由若干盒子组成,这些盒子的布局受如下几...

    视觉格式化模型的简介

    • 可视化格式模型(Visual formatting model),即浏览器处理DOM树的方式。

    布局

    DOM树由若干盒子组成,这些盒子的布局受如下几点因素控制:

    1. 盒类型与显示属性(display:block,inline,inline-block,flex,etc.)
    2. 盒模型尺寸(width,height,padding,border,margin)
    3. 定位方式(normal flow, float, and absolute)
    4. 格式化上下文(BFC,IFC,GFC,FFC)
    5. 元素间关系(父子,兄弟等)
    6. 额外信息(viewport,置换元素如图片的实际尺寸等)

     接下来,将分篇幅解析这些控制因素。

    1.盒类型与显示属性

    展开全文
  • 视觉类型的媒体 根据CSS的视觉格式化模型(Visual formatting model)的规则来处理文档树中的元素,从而将(X)HTML转化成制作者设计的样子。我曾在《别具光芒:CSS属性、浏览器兼容与网页布局》一书中,讲解过这些...

    视觉类型的媒体 根据CSS的视觉格式化模型(Visual formatting model)的规则来处理文档树中的元素,从而将(X)HTML转化成制作者设计的样子。

     

    例如:

    • 如何生成元素框;
    • 处理各元素之间的关系;
    • 根据框的尺寸、定位等CSS属性来确定元素的位置等;

    因此,要掌握使用CSS控制页面内元素的技巧,就需要深入了解框模型(Box Model)视觉格式化模型 的原理。

     

    文档树 中的元素都产生矩形的框(Box),这些框影响了元素 内容之间的距离、元素内容的位置、背景图片的位置等等。而浏览器根据视觉格式化模型(Visual formatting model)来将这些框布局成访问者看到的样子。

     

    我曾在《别具光芒:CSS属性、浏览器兼容与网页布局》一书中,讲解过这些概念,但是很多读者反映内容比较晦涩难懂,这也是让我很困扰的一件事情。 因为这些是CSS手册中最抽象的概念,有时候为了准确翻译手册的定义,可能会使得语句很拗口。

    同时,由于出版社对于措辞的要求,让一些句子也变得不那么“平易近人”。

    所以,我再次重新尝试,把这部分内容重新来编排一下,看看是否能把这些重要的内容讲得更易懂一些。

     

    本文会随着内容的增加而不断更新,希望大家仔细阅读,并提出意见和建议。

     

    视觉格式化模型中也有“布局(layout)”的概念,但是这个与页面设计经常用到的类似“3行2列”或者“3行3列”中的“排版布局”的概念不 同,视觉格式化模型中的“布局”是指每个元素该如何来显示。

    CSS 2.1中,一个控制框的布局可以根据三种定位方案:

    1. 常规流向 。CSS 2.1中,常规流向包含块框的块格式化,行内框的行内格式化,块框或行内框的相对定位,以及插入框的定位。
    2. 浮动 。在浮动模型中,一个框首先根据常规流向布局,再将它从流中取出并尽可能地向左或向右偏移。内容可以排列 在一个浮动的边上。
    3. 绝对定位 。在绝对定位模型中,一个框整个地从常规流向中脱离(它对后续的兄弟元素没有影响),并根据包含块来 分配其定位。

    在理解视觉格式化的概念之前,要明确一点:包含块(Containing Block) 是视觉格式化 模型的一个重要概念,它也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

    【未完待续……】

    展开全文
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Example of inline flow on several lines</TITLE> <STYLE type="text/css">...
  • 描述:我们通常可以很轻易地用一些专业的建模软件呈现出一个视觉化的3D模型,但是通过破译3D模型的信息,可以实现用文本编辑器直观而精确地看到3D模型存储的数据值(点、面等)以ply格式为例。如果不加处理的话,...
  • 因此,要掌握使用CSS控制页面内元素的技巧,就需要深入了解框模型(Box Model)及视觉格式化模型的原理。 文档树中的元素都产生矩形的框(Box),这些框影响了元素内容之间的距离、元素内容的位置、背景图片的位置...
  • Dlib模型之驾驶员疲劳检测一(眨眼)

    万次阅读 多人点赞 2019-12-10 17:09:48
    目录序目的技术背景正文(1)环境搭建(2)下载开源数据集(3)视觉疲劳检测原理(4)主要代码思路 序 目的 经查阅相关文献,疲劳在人体面部表情中表现出大致三个类型:打哈欠(嘴巴张大且相对较长时间保持这一状态...
  • 主要从物理光学的反射特性、神经生理学的视知觉组织理论、视觉心理学的格式塔认知原理以及视-脑信息的同步整合概念等方面进行了综合分析,阐明了一种视觉计算模型——目标-背景表征模型,为自适应图像目标检测技术...
  • 视觉词袋模型BOW学习笔记及matlab编程实现

    万次阅读 热门讨论 2016-04-25 22:04:41
    视觉词袋模型及MATLAB实现
  • 今天介绍中国科学技术大学和微软亚洲研究院朱西洲老师团队在ICLR2020...VL-BERT采用简单且功能强大的Transformer模型作为基础,并对其进行扩展,以视觉和语言的嵌入特征作为输入。其中,作为输入的特征来自输入句子...
  • CVPR 2021 | 视觉Transformer的可视

    千次阅读 2021-03-08 14:21:13
    点击下方卡片,关注“CVer”公众号AI/CV重磅干货,第一时间送达本文转载自:极市平台导读可视对于Transformer的模型调试、验证等过程都非常重要,FAIR的研究者开源了一种T...
  • 吐血整理|3D视觉系统学习路线

    千次阅读 2019-12-12 20:54:47
    原文首发于微信公众号「3D视觉工坊」:吐血整理|3D视觉系统学习路线 我们生活在三维空间中,如何智能地感知和探索外部环境一直是个热点难题。2D视觉技术借助强大的计算机视觉和深度学习算法取得了超越人类认知的...
  • 深度学习实验大多是在服务器端进行的,在实际的应用中,想要把训练好的模型投入实际的应用中去的时候往往需要转化为适应于边缘端或者是移动端计算的格式,一是缩减模型大小降低原有的参数体量,二是借助于硬件环境的...
  • ASM是对图像中的shape进行建模的可变模型(deformable model),得到的形状模型既可以用来分析新的形状(拟合模型到新形状,见第4节),也可以用于生成形状(在给定图像中搜索形状,见第5节)。首先需要给出shape的...
  • 计算机视觉中的词袋模型(Bag-of-words)

    千次阅读 2019-05-12 21:11:06
    模型 介绍 Bag of words模型最初被用在文本分类中,将文档表示成特征矢量。它的基本思想是假定对于一个文本,忽略其词序和语法、句法,仅仅将其看做是一些词汇的集合,而文本中的每个词汇都是独立的。简单说就是讲...
  • 可视化模型预测。 显示类的后验分布,回归任务中的错误等。 对于调试模型和检查其行为很有用。 支持分类,多标签分类和回归。 进行了整齐的可视化,以可视化自然语言处理(任务)任务的注意机制的权重。 目前,...
  • 这是视觉问答论文阅读的系列笔记之一,本文有点长,请耐心阅读,定会有收货。如有不足,随时欢迎交流和探讨。 一、文献摘要介绍 This paper presents a unified Vision-Language Pre-training (VLP) model. The ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,256
精华内容 14,102
关键字:

视觉格式化模型