CSS(六)——视觉格式化模型(常规流)
前言
建议各位同学在本篇笔记中先看总结,然后再看正文,可能节省时间。
严格来说,CSS作为给页面元素添加样式的语言,严格来说只有三个方面是一定要吃透的:
- 属性值的计算过程(其中包括层叠、继承);
- 盒模型(行盒、块盒以及行块盒);
- 视觉格式化模型(布局规则)。
文章目录
视觉格式化模型(布局规则)
页面中多个盒子排列规则。
视觉格式化模型(布局规则)的分类
- 常规流;
- 浮动;
- 定位。
常规流(或称文档流、普通文档流、常规文档流)
【注】:所有元素在默认情况下都属于常规流布局。
规则
总体规则:块盒独占一行,行盒水平依次排列。
包含块(containing block):
每个盒子都有他的包含块,包含块决定了盒子的排列区域。绝大部分情况下是其父元素的内容块。
-
每个块盒的总宽度必须刚好等于包含块的宽度。:宽度的默认值为:auto。将剩余空间吸收掉。
-
margin也可以设置为:auto。但width的吸收能力要比margin强。
-
若宽度、边框、内边距计算后,仍然有剩余空间,该剩余空间被margin-right吸收掉。
【注】:也可以使用margin-left来吸收,但需要改变浏览器布局规则。
-
如果margin-left和margin-right都设置为auto,则两边平分。
以上说明的是平行方向上的样式==
在垂直方向上的auto
- height:auto。适应内容的高度
- margin:auto。表示0.
百分比取值
padding、宽、margin可以按照百分比取值——所有百分比相对于包含块的宽度
高度的百分比:
-
包含块的高度取决于子元素的高度,设置百分比无效。
-
包含块的高度不取决于子元素的高度,设置百分比有效。
综上所述,在垂直方向上的百分比取值是否有效,应取决于父元素是否能自行决定。如果父元素的高度取决于子元素的高度,而子元素的高度值为百分比则没有明确指定,即必须设定父元素的值为一个确定的数值。
上下外边距的合并:
-
两个常规流块盒,上下外边距相邻会进行合并。
两个外边距取最大值
-
父子元素之间的外边距的合并。同样取最大值
如果不想让父子元素之间的margin合并,则可以使父子元素之间的margin不相邻,即修改父元素的border或padding。
总结
本篇笔记在记录过程中可能比较杂乱,因为在这部分知识点本身较为复杂,那么总结一下:
-
在默认条件下,所有元素的布局均遵循常规流布局。而常规流布局中的总体规则是:行盒水平排列;块盒独占一行(承接了之前在HTML&CSS课程概述一文中超链接下的补充说明,即HTML5中摒弃了行元素和块元素的说法)。
-
包含块的概念:所谓包含块就是包含各个盒子的一个区域。每个盒子都有属于自己的包含块,且自己的包含块在绝大多数情况下都是自己父元素的内容盒(content)
-
先说宽度:每个块盒的宽度(content、padding、border、margin)应该是自己包含块的宽度,且块盒宽度默认为auto,如果自己设定的所有属性的宽度和并没有等于包含块的宽度,则会自动填充吸收为margin-right。
如果设置为auto,则要注意width的auto吸收能力强于margin,即二者同时设定为auto,则width会吸收剩余空间。
垂直方向上有两方面需要注意:
a)height的auto表示适应内容的高度
b)margin的auto表示为0。
-
百分比取值:
a)padding、宽度、margin的百分比取值是基于相当于包含块的宽度。
b)高度的百分比取决于父元素的高度是否为确定数值:如果为确定数值,则子元素的高度是基于父元素内容盒高度的百分比;如果没有确定高度,则无效。
-
margin合并:
块元素之间的margin如果相邻则会合并,且会是最大的那个margin。
父子元素之间的margin如果相邻则会合并,且会使最大的那个margin。
块元素和并尚且美观,父子元素的合并如果想避免可以更改父元素的border或padding。