美文网首页CSS
[CSS] 包含块模型

[CSS] 包含块模型

作者: 何幻 | 来源:发表于2016-03-06 10:46 被阅读64次

包含块模型(Containing Block)

当WebKit计算元素的箱子的位置和大小时,WebKit需要计算该元素和另外一个矩形区域的相对位置,这个矩形区域成为该元素的包含块

包含块的具体定义如下:
(1)根元素的包含块称为初始包含块,通常它的大小就是可视区域(Viewport)的大小。
(2)对于其他位置属性设置为static或者relative的元素,它的包含块就是最近祖先的箱子模型中内容区域(Content)。
(3)如果元素的位置属性为fixed,难么该元素的包含块脱离HTML文档,固定在可视区域的某个特定位置。
(4)如果元素的位置属性为absolute,那么该元素的包含块由最近的含有属性absolute,relative,fixed的祖先决定。

相关文章

  • [CSS] 包含块模型

    包含块模型(Containing Block) 当WebKit计算元素的箱子的位置和大小时,WebKit需要计算该...

  • day02-前端面试技巧-(盒模型)

    css盒模型: CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内...

  • css包含块

    如果想要给一个元素做absolute定位,就要考虑他的包含块,这个元素的父级元素只有在将position属性设置为...

  • CSS包含块

    根元素:初始包含块 static/relative 元素:由它最近的 block、table cell(类似 ...

  • CSS包含块

    1,写在前面的话 CSS目前还不被认可是一门真正的编程语言,虽然现在已经有像less、saas、stylus这样的...

  • html页面绘制方面

    1.css盒子模型 CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content...

  • CSS 盒模型总结

    概念 CSS盒模型 包含:content padding border margin 类型 CSS盒模型分为 标准...

  • CSS布局基础

    CSS 布局模型 CSS 包含 3 种基本的布局模型,用英文概括为:Flow、Layer 和 Float。 在网页...

  • CSS 盒模型 BoxModel

    CSS中任意元素都是一个盒子,学习盒模型能够帮助我们理解CSS,建立复杂的CSS架构模型。 块与内联块 Block...

  • 2017-06-13

    CSS布局模型 CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。 在网页中,元素...

网友评论

    本文标题:[CSS] 包含块模型

    本文链接:https://www.haomeiwen.com/subject/xadnkttx.html