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. 【Python 实例】面向对象 | 请输入一周中某天的名称的第一个字母来判断以下是星期几，如果第一个字母一样则继续判断第二个字母

    [Python 实例]面向对象 | 请输入一周中某天的名称的第一个字母来判断以下是星期几,如果第一个字母一样则继续判断第二个字母 题目: 解答: 运行结果: 题目: 请输入一周中某天的名称的第一个字母 ...

  2. 7、Prototype 原型模式 通过复制创造实例 创造型模式

    2020-07-19 发哥讲 发哥讲 其实上一节的末尾讲到如何去生成对象,其中有一个关于clone的,这其实就是Prototype原型模式. 通过克隆(拷贝)的方式生成对象 1.了解Prototype ...

  3. 比原链CTO James | Go语言成为区块链主流开发语言的四点理由

    11月24日,比原链CTO James参加了Go中国举办的Gopher Meetup杭州站活动,与来自阿里.网易的技术专家带来Kubernetes.区块链.日志采集.云原生等话题的分享.James向大 ...

  4. ~/.ssh/目录找不到解决方法

    执行 cd ~/.ssh发现.ssh目录找不到 原因是因为没有用root用户ssh登录过,执行一下ssh操作就会自动生成了

  5. data argumentation 数据增强汇总

    几何变换 flip:水平翻转,也叫镜像:垂直翻转 rotation:图片旋转一定的角度,这个可以通过opencv来操作,各个框架也有自己的算子 crop:随机裁剪,比如说,在ImageNet中可以将输 ...

  6. java web应用启动报错：Caused by: java.lang.ClassNotFoundException: ServletContext

    ServletContext是个接口,不同的WEB容器(tomcat, jboss等)都有各自的实现. 一般是缺少servlet-api.jar包 在Java Build Path的Libraries ...

  7. leetcode刷题笔记-1. 两数之和（java实现）

    题目描述 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,数组中同一个元素不能使 ...

  8. 2020-03-27：分布式锁的问题，假如a线程在获得锁的情况下 网络波动 极端情况是断网了，这种情况是怎么处理的

    福哥答案2020-04-04:超时释放锁.

  9. golang 设计模式

    前言 不做文字的搬运工,多做灵感性记录 这是平时学习总结的地方,用做知识库 平时看到其他文章的相关知识,也会增加到这里 随着学习深入,会进行知识拆分和汇总,所以文章会随时更新 参考的文章过多.很杂很乱 ...

  10. leetcode刷题记录——哈希表

    1.两数之和 可以先对数组进行排序,然后使用双指针方法或者二分查找方法.这样做的时间复杂度为 O(NlogN),空间复杂度为 O(1). 用 HashMap 存储数组元素和索引的映射,在访问到 num ...