可视化格式模型-包含块

一个元素box的定位和尺寸,有时候会跟某一矩形框有关,这个矩形框,就被称作元素的包含块。而元素会为它的子孙元素创建包含块,那么,是不是说,元素的包含块就是它的父元素呢?答案是否定的,这是一个误区。

一个元素包含块的确定,跟元素自身和它的祖先元素的样式等有关系。

根元素的包含块

根元素,就是处于文档树最顶端的元素,它没有父节点。

根元素存在的包含块,被叫做初始包含块 (initial containing block)。具体,跟用户端有关。通常大小和 viewport 相同,原点与 canvas 重合。(详见 绝对定位bottom值为0的位置问题

“static”和”relative”定位的元素

对于其它元素:

如果该元素的定位(position)为 “relative” (相对定位)或者 “static”(静态定位),它的包含块由它最近的块级、单元格 (table cell)或者行内块(inline-block)祖先元素的内容框创建。

元素如果未声明 “position” 特性 ,那么就会采用 “position” 的默认值 ”static”。所以,一般元素都是静态定位的。

如果元素是固定定位 (“position:fixed”) 元素,那么它的包含块是当前可视窗口。

如果元素是绝对定位(”position: absolute”)元素,包含块由离它最近的 position 属性为 “absolute”、“relative” 或者 “fixed” 的祖先元素创建。

1. 如果其祖先元素是行内元素,则包含块取决于其祖先元素的 “direction” 特性。如果 ‘direction’ 是 ‘ltr’,包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ,右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges) 。

例如:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p style="border:1px solid red; width:200px; padding:20px;">

T

<span style="background-color:#C0C0C0; position:relative;">

这段文字从左向右排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。

可以通过它们绝对定位的位置来判断它们包含块的边缘。

<em style="position:absolute; color:red; top:0; left:0;">XX</em>

<em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>

<em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>

</span>

</p>

</body>

</html>

提示:你可以先修改部分代码再运行。

以上代码中,文字采取默认从左到右的方式排列。红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。它们定位需要参照包含块,按照标准来说,它们包含块的左顶边是 SPAN形成的第一个框(即第一行的灰色部分)的顶、左内边距边,包含块的右、下边是SPAN 生成的最后一个框(最后一行灰色的部分)的右、下内边距边界。

行内元素内形成的包含块,在各浏览器中各不相同,存在兼容性问题。上面的例子蓝色的 “XX”的位置在一些浏览器里会变现不同。

当行框是这样的时候,比较纠结:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p style="border:1px solid red; width:200px; padding:20px;">

TEXT TEXT TEXT

<span style="background-color:#C0C0C0; position:relative;">

这段文字从左向右排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。

可以通过它们绝对定位的位置来判断它们包含块的边缘。

<em style="position:absolute; color:red; top:0; left:0;">XX</em>

<em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>

<em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>

</span>

</p>

</body>

</html>

提示:你可以先修改部分代码再运行。

这时,会造成包含块的宽度为负。这时,绝对定位元素定位起来,肯定也很纠结。

如果 ‘direction’ 是 ‘rtl’,包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界(padding edges) ,左、下边是祖先元素生成的最后一个框的左、下内边距边界(padding edges) 。

例如:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p style="border:1px solid red; width:200px; padding:20px;direction: rtl;">

<span style="background-color:#C0C0C0; position:relative;">

这段文字从右向左排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。

可以通过它们绝对定位的位置来判断它们……

<em style="position:absolute; color:red; top:0; left:0;">XX</em>

<em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>

<em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>

</span>

</p>

</body>

</html>

提示:你可以先修改部分代码再运行。

2. 其他情况下,如果祖先元素不是行内元素,那么包含块的区域应该是祖先元素的内边距边界。

例如:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<div id=”container” style="padding:50px; background-color:#c0c0c0; position:relative; width:200px; height:200px;">

<div id=”div1” style="width:100%;height:100%;border:2px solid blue;">

<div id=”content” style="border:1px solid red; position:absolute; left:0; top:0;">absolute element</div>

</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

如上代码中,content的父元素虽是 div1,但,按照标准它的包含块应该是 container。

如果不存在这样的祖先元素,那么它的包含块就是初始包含块。

其实也很清晰了,只要弄清楚包含块是由哪个祖先元素创建的,以及创建的包含块区域。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏zaking's

CSS(CSS3)选择器(2)

该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器:                         24:E ~ ...

2636
来自专栏Python爬虫与数据挖掘

Python正则表达式初识(五)

正则表达式的内容很丰富,今天小编继续给大家分享Python正则表达式的基础知识。今天要给大家的讲的特殊字符是竖线“|”。竖线“|”实质上是一个或的关系。

784
来自专栏编程

前端学习自学笔记:day01

在这里要跟大家说声抱歉,本人拖更太久啦.现在在自学前端,我每天会把自己的总结笔记发上来分享给大家,希望对大家有帮助. 在此之前先为大家显示下前端工程师的路线图:...

1765
来自专栏吾爱乐享

php学习之css入门(一)

1232
来自专栏IT 指南者专栏

前端系列之CSS基础知识概述

1、什么是DIV (1)、div就是html一个普通标签,进行区域划分。div特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。 (2)、d...

37011
来自专栏Python爬虫与数据挖掘

Python正则表达式初识(五)

正则表达式的内容很丰富,今天小编继续给大家分享Python正则表达式的基础知识。今天要给大家的讲的特殊字符是竖线“|”。竖线“|”实质上是一个或的关系。

642
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,...

1807
来自专栏用户2442861的专栏

css display table-cell

display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

491
来自专栏企鹅号快讯

jquery版购物车源代码

shop.jsp页面代码和CSS代码在上课的时间已经下发,就不重复发了 效果图: ? ? ? 鼠标移入图片时可以浏览大图 // JavaScript Docum...

2198
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(一)选择器

CSS 全称为 Cascading Style Sheets,中文翻译为“层叠样式表”,简称 CSS 样式表,所以称之为层叠样式表(Cascading Styl...

774

扫码关注云+社区