网页设计中的包含块

  • 2019-02-26 18:25:06
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

本章较早前讨论过网页设计中浮动元素的包含块。对于浮动元素,其包含块定义为最近的块级祖先元素。对于定位,情况则没有这么简单。CSS2.1定义了以下行为:

“根元素”的包含块(也称为初始包含块)由用户代理建立,在HTML中,根元素就是html元素,不过有些浏览器会使用body作为根元素。在大多数浏览器中,初始包含块是一个视窗大小的矩形。

对于一个非根元素,如果其position值是relative或static,包含块则由最近的块级框、表单元格或行内块祖先框的内容边界构成。

对于一个非根元素,如果其position值是absolute,包含块设置为最近的position值不是static的祖先元素(可以是任何类型)。这个过程如下:

—如果这个祖先是块级元素,网站建设包含块则设置为该元素的内边距边界,换句话说,就是由边框界定的区域。

—如果这个祖先是行内元素,包含块则设置为该祖先元素的内容边界。在从左向右读的语言中,包含块的上边界和左边界是该祖先元素中第一个框内容区的上边界和左边界,包含块的下边界和右边界是最后一个框内容区的下边界和右边界。在从右向左读的语言中,包含块的右边界对应于第一个框的右内容边界,包含块的左边界则取自最后一个框的左内容边界。上下边界也是一样。

—如果没有祖先,元素的包含块定义为初始包含块。

这里有一点很重要:网站建设里元素可以定位到其包含块的外面。这与浮动元素使用负外边距浮动到其父元素内容区外面很类似。这也说明,“包含块”一词实际上应该是“定位上下文”,不过,由于规范使用的是“包含块'所以我也沿用了这个说法(我已经在尽力减少由此带来的误解,真的!)。

当前文章标题:网页设计中的包含块

当前URL:http://www.lyjtt.cn/news/wzzz/containing-block.html

上一篇:网页设计中的定位类型

下一篇:​网页设计中的偏移属性

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)