visual formatting model details简译 <一> 之 Containing box的定义

最新推荐文章于 2024-08-14 12:22:11 发布
最新推荐文章于 2024-08-14 12:22:11 发布
阅读量829 收藏
点赞数
分类专栏： 浏览器 文章标签： 文档 div float html css

如果要计算一个box的位置以及宽高，那么必须知道它的containing box，然后才能在containing box的基础上计算出box的位置、宽高。选取containing box的方法是固定的，具体如下：

1）文档根节点的containing box也被称为initial containing box。Initial containing box是以文档左上角作为原点，view-port的宽高作为自己宽高的矩形框。

2）其他in-flow box的containing box是距离自己最近的、作为容器的block box的content边界。

3）fixed box的containing box就是窗口的view-port，没有固定位置。因此，fixed box永远可见，也会随着滚动条滚动。

4）absolute box的containing box与距离自己最近的absolute、fixed、relative祖先的box有关。如果这个祖先是inline结点，那么containing box是第一个child box 的padding边界与最后一个child box 的padding边界做并运算得到的。如果这个祖先是block节点，那么containing box就是祖先的block box的padding边界。如果absolute box不存在absolute、fixed、relative祖先，那么absolute box的containing box就是initial containing box。

如下的html代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Illustration of containing blocks</TITLE>
  </HEAD>
  <BODY id="body">
    <DIV id="div1">
    <P id="p1">This is text in the first paragraph...</P>
    <P id="p2">This is text <EM id="em1"> in the 
    <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
    </DIV>
  </BODY>
</HTML>

这段代码中box，containing box的对应规则如下表所示。

Box对应的文档结点Containing box对应的文档结点
HTMLinitial containing box
bodyhtml
div1body
p1div1
p2div1
emp2
strongp2


如果这个网页增加一条css规则

#div1 { position: absolute; left: 50px; top: 50px }

那么box, containing box的对应规则变为，

Box对应的文档结点Containing box对应的文档结点
HTMLinitial containing box
bodyhtml
div1initial containing box
p1div1
p2div1
emp2
strongp2


如果再增加一条css规则，

#em1 { position: absolute; left: 100px; top: 100px }

Box对应的文档结点Containing box对应的文档结点
HTMLinitial containing box
bodyhtml
div1initial containing box
p1div1
p2div1
emdiv1
strongem

对上表需要多做一些解释。原本EM是inline 结点，它的box也是inline box。在em被设置为abolute之后，它就变为了block box。
css2.1标准中描述了 display、position、float三个属性值会彼此影响。具体来说有3条规则：1）如果display属性值为none，那么position、float不发挥作用; 2）如果规则1不满足且position属性值为absolute、fixed，那么float属性值被作为none, display属性值按照最下面的表发生变化; 3）如果规则1、规则2都不满足且float属性值不是none，那么display属性值按照最下面的表发生变化。
display属性的变换规则
原值新值
inline-tabletable
Inline, table-row-group, table-column, table-column-group, table-header-group,table-footer-group, table-row, table-cell, table-caption, inline-blockBlock
其他不变

shuimuniao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS布局与定位,flow流,float
chq11106004389的博客
01-02 3810
块元素的位置:从上向下流，元素之间自动换行 内联元素的位置:水平方向上排列,总体上会从左上方流向右下方
css 包含块(Containing Box)
阿渊博客
09-05 3061
1. 什么是CSS包含块（Containing Block）:包含块（Containing Block）是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形(包含块就是一个矩形)，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。切记的就是包含块和定位属性position并不是绝对有关系的，两者只是一个归属关系。 2. 包含
css的flex box布局
youshigay的博客
09-11 1378
Flex也就是flexable box，即为“弹性布局”，为盒模型提供了最大的灵活性。 采用flex布局的元素，称之为“flex容器”（flex container），而在容器里面的元素称之为“flex项目”（flex item）； 首先需要理解的是flex容器的轴；水平的主轴和垂直的交叉轴；项目默认按照主轴排列； 在了解基本的容器轴之后，看看flex容器的基本属性； 有以下6个属性：
CSS 框模型( Box module )
baoaoba9317的博客
11-28 177
框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处。CSS 可以说是页面表现的基础， CSS 可以控制布局，控制元素的渲染。 布局是讲在电影画面构图中，对环境的布置、人物地位的调度、人物之间的关系、人物和景物的关系等的安排。大同小异，CSS 的布局也是一样。 CSS 的布局，包含两个大部分： 元素：元素及其组成，类似电影布局中人物的高矮胖瘦、衣着配饰...
PyGobject（四十七）布局容器之FlowBox
Yu的专栏
07-30 2139
Gtk.FlowBox流式布局。根据窗口大小，自动调整子部件所在的位置。
visual formatting model details简译 <二> 之 box的宽度
shuimuniao的专栏
03-11 776
1. width属性 width属性定义了box的content区域的宽度。 width的属性值可以是具体数值，可以是百分数，也可是”auto”。如果结点是non-replacedinline类型，或者是table row类型，或者是rowgroup类型，那么即使设置了结点的width属性，该属性也不会影响作为结点box的宽度。对于除了上述三种类型之外的结点来说，width属性都会影响结点bo
visual formatting model details简译 <三> 之 box的高度
shuimuniao的专栏
03-15 729
height属性 height属性定义了box的content区域的高度。 height的属性值可以是具体数值，可以是百分数，也可是”auto”。如果结点是non-replaced inline类型，那么即使设置了结点的height属性，该属性也不会影响box的高度。 如果height属性值为”auto”，那么在布局时会根据某些规则计算height属性值。如果height属性值为百分数，那么
Basic Visual Formatting in CSS
11-29
- **替换元素**：如`<img>`标签，其尺寸是由外部资源决定的。 了解这两种元素的区别可以帮助开发者更准确地预测和控制页面布局。 #### 结语 《基本视觉格式化在CSS》是一本实用指南，适合初学者以及希望深化CSS...
css布局之BFC模式（block formatting context）
09-24
主要介绍了css布局之BFC模式（block formatting context），通过BFC盒子的一些特性和应用场景解释了BFC模式，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
html-formatting-fun
05-22
在"index.html"文件中，我们可能看到各种HTML标签的使用，如`<h1>`到`<h6>`定义不同级别的标题，`<p>`用于段落，`<a>`用于创建链接，`<img>`插入图像，以及`<ul>`、`<ol>`、`<li>`用于无序和有序列表。此外，`<div>`...
CSS的自适应两栏/七种三栏布局
maid_04的博客
12-07 726
写本文主要是为了解决利用CSS的流体特性实现自适应的两栏/三栏布局 #先来了解一下什么是BFC 1.BFC的定义 全称Block Formatting Context，中文直译为块级格式上下文。BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的B
Vue中的高频内置指令：v-text、v-html、v-cloak、v-once、v-pre
PleaSure乐事的博客
08-11 945
Vue——v-text、v-html、v-cloak、v-once、v-pre指令
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 703
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
css实现水滴效果图
yinge0508的博客
08-12 1154
【代码】css实现水滴效果图。
CSS 基础
jht_520的博客
08-10 335
比如，增加内边距可以使元素内部的内容与边框之间有更多的空间，而调整外边距可以控制元素与周围元素的距离。通过使用媒体查询，我们可以针对不同的屏幕宽度设置不同的 CSS 规则。例如，在小屏幕设备上，可以隐藏一些不必要的元素，或者改变导航栏的样式，以提供更好的用户体验。它可以决定网页中文字的字体、大小、颜色，还能设置元素的背景颜色、边框样式等。比如，通过 CSS 我们可以将网页的标题设置为醒目的大字号、独特的字体和鲜艳的颜色，使其更加吸引用户的注意力。CSS，即层叠样式表，是网页设计中不可或缺的一部分。
【playwright篇】CSS 选择器 详细用法
最新发布
qadnkz的专栏
08-14 845
在 Playwright 中，CSS 选择器是非常重要的，因为它们用于定位页面上的元素。CSS 选择器允许您通过 HTML 元素的属性、类名、ID 等来定位元素。以下是 CSS 选择器的一些基本用法和示例。
CSS（层叠样式表）
Chujun123528的博客
08-09 1245
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
Sass/Scss基础
若末lan的博客
08-07 352
是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。Sass 生成良好格式化的 CSS 代码，易于组织和维护。定义变量用@），Sass 变量可以存储的类型有。Sass 完全兼容所有版本的 CSS。Sass 扩展了 CSS3，增加了。一款css预处理语言，
What is the difference between <strong>, <b>tags and<em>,
04-25
<strong> and <b> tags both apply bold formatting to text, but <strong> has semantic meaning and is used to indicate important or emphasized content, while <b> is purely presentational. and <i> tags both apply italic <em>formatting to text, but also has semantic meani<em>ng and is used to indicate stress, emphasis, or a change in meaning, while <i> is purely presentational.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值