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. 006_go语言中的if else条件语句

    代码演示 package main import "fmt" func main() { if 7%2 == 0 { fmt.Println("7 is even&quo ...

  2. MyBatisPlus乐观锁,乐观锁竟然如此简单

    乐观锁 在便是过程中,我们经常会被问到乐观锁,悲观锁,都非常简单 乐观锁:顾名思义,思想十分乐观,总是认为不会出现问题,无论什么都不去上锁!如果出现了问题,就再更新测试 悲观锁:顾明思义,思想十分悲观 ...

  3. 一篇文章快速搞懂什么是GitHub

    导读:什么是GitHub?Git与GitHub之间是什么关系?我们为什么需要版本控制系统?GitHub如何使用?本文将带你一探究竟. 本文字数:1710,阅读时长大约:13分钟 一.什么是版本控制 按 ...

  4. 【Redis】Redis开篇与如何安装单机版Redis，这次我会了！！

    写在前面 很早之前,就有不少小伙伴微信留言说:冰河,你能不能写一个Redis专栏啊,我最近在学习Redis,看书看不下去,学习视频又觉得视频太长了,还是看你的文章比较给力!哈哈,原来我写的文章能够让小 ...

  5. C#设计模式之0-简单工厂模式

    简单工厂模式(Simple Factory Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/387 访问 ...

  6. C#LeetCode刷题之#203-删除链表中的节点（Remove Linked List Elements）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3826 访问. 删除链表中等于给定值 val 的所有节点. 输入: ...

  7. c++排序二叉树的出现的私有函数讨论，以及二叉树的删除操作详解

    c++排序二叉树的出现的私有函数讨论, 以及二叉树的删除操作详解 标签(空格分隔): c++ 前言 我在c++学习的过程中, 最近打了一个排序二叉树的题目,题目中出现了私有函数成员,当时没有理解清楚这 ...

  8. 【USACO13DEC】 最优挤奶 - 线段树

    题目描述 FJ最近买了1个新仓库, 内含N 个挤奶机,1 到N 编号并排成一行. 挤奶机i 每天能产出M(i) 单位的奶.不幸的是, 机器装得太近以至于如果一台机器i 在某天被使用, 那与它相邻的两台 ...

  9. 【SP2916】Can you answer these queries V - 线段树

    题面 You are given a sequence \(a_1,a_2,...,a_n\). (\(|A[i]| \leq 10000 , 1 \leq N \leq 10000\)). A qu ...

  10. 一文说通Jwt、Session、Cooike区别

    JWT 全称是 JSON Web Token,是目前非常流行的跨域认证解决方案,在单点登录场景中经常使用到. 有些人觉得它非常好用,用了它之后就不用在服务端借助 redis 实现认证过程了,但是,还有 ...