1.初始包含块，浏览器viewport大小

2.非根元素，position：relative/static，包含块为最近的块级框，表格单元或行内祖先框的内容区

3.非根元素，position：absolute，包含块为最近的position不是static的祖先元素，没有的话就是初始包含块

　　　　- 若祖先为块级元素，包含块为祖先块从border的内边界以内的部分，即padding+context

　　　　- 若为行内元素，根据文字方向确定。从左向右内容区左上角和右下角确定的框；从右向左为右上角和左下角确定的内容区

CSS中的包含块的更多相关文章

  1. CSS学习笔记——包含块 containing block

    以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定 ...

  2. 理解CSS中的BFC(块级可视化上下文)[译]

    开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元 ...

  3. CSS中包含块原理解析

    CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定 ...

  4. CSS中的视觉格式化模型

    视觉格式化模型 1. 简介 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树 ...

  5. CSS2.1SPEC：视觉格式化模型之包含块

    原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且 ...

  6. [HTML/CSS]盒子模型，块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

  7. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  8. 由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  9. CSS包含块containing block详解

    “包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称 ...

随机推荐

  1. 我还在生产玩 JDK7，JDK 15 却要来了!|新特性尝鲜

    自从 JDK9 之后,每年 3 月与 9 月 JDK 都会发布一个新的版本,而2020 年 9 月即将引来 JDK15. 恰巧 IDEA 每四五个月会升级一个较大的版本,每次升级之后都会支持最新版本 ...

  2. Windows10 无法完全关闭Hyper-V导致VirtualBox 虚拟机无法启动

    win10本来已经安装使用了VirtualBox. 突然心血来潮决定试试系统自带的虚拟机Hyper-V.发现并没有想象中的好用.随后在启用或关闭 Windows功能中关闭了Hyper-V. 这时我发现 ...

  3. Windows下使用命令行编译Qt项目（解决DLL丢失问题）

    一.前言 我之前用Qt做了个hello world,结果各种报错,一大堆DLL找不到,今天用命令行编译就通过了 二.准备工作 1.Visual Studio(有nmake就行) 2.Qt 3.把qma ...

  4. JavaScript 严格模式(strict mode)

    概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:'严格模式'.顾名思义,这种模式使得Javascript在更严格的条件下运行. 目的 1: 消除Javascript语法的一些不合 ...

  5. 极简 Node.js 入门 - 3.1 File System API 风格

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  6. Python3 执行JS出现JSON未定义问题

    two = function(e) { var t = e.data; e.url.match(/(https?:)?(\/\/)([^/]*)/) || (e.url = "https:/ ...

  7. 如何理解“异或（XOR）”运算在计算机科学中的重要性？（转自-阿里聚安全）

    XOR加密是一种简单高效.非常安全的加密方法 一. XOR 运算 逻辑运算之中,除了 AND 和 OR,还有一种 XOR 运算,中文称为"异或运算". 它的定义是:两个值相同时,返 ...

  8. SparkSQL DSL 随便写写

    @Testdef functionTest() = { Logger.getLogger("org").setLevel(Level.WARN) val spark = getSp ...

  9. pytest与Allure集成

    1.窗口的方式 重启jenkins,重新连接,继续上次的内容.(注意:点击launch,重新下载slave-agent文件,然后双击slave-agent文件进行连接.上次下载的slave-agent ...

  10. 使用grub2引导进入Linux或Window系统

    很多人在一通烂搞之后把自己的grub搞崩了(比如我当时手贱删除了boot分区)虽然后来又装了grub,但是进入grub后还是没有引导,只有一个孤零零的命令行界面 这时候应该怎么办呢?首先当然是想进入系 ...