CSS中常规流-视觉格式化模型的深度理解

常规流

盒模型:规定单个盒子的规则

视觉格式化模型(官方):页面中多个盒子的排列规则
布局规则(我们一般的称呼):页面中的多个盒子的排列规则

视觉格式化模型,大体上将页面中的盒子的排列分为三种方式:

  • 常规流
  • 浮动
  • 定位

常规流的总体规则

常规流的现行叫法:常规流、文档流、普通文档流、常规文档流

所有元素,默认情况下,都属于常规流布局

总体规则:块盒独占一行,行盒水平依次排列

包含块的概念

包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的活动范围

绝大部分情况下:盒子的包含块,为其父元素的内容盒(父元素的内容盒就是子元素的包含块)

块盒

(水平方向上的)

1.每个块盒的总宽度,必须刚好等于包含块的宽度

宽度的默认值是auto
auto:将剩余空间吸收掉
width吸收能力强于margin

a. 若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间全部被margin-right吸收
b. 在常规流中,块盒在其包含块中居中,可以定宽,然后左右margin设置为auto

margin:0 auto;

一个神奇的现象:

width:1000px;
margin:0 -100px;

(垂直方向上)

2.每个块盒垂直方向上的auto值

height:auto 适应内容的高度
margin:atuo 表示0
百分比取值
padding、宽、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度 --非常重要,无论是高度、宽度、margin、padding水平还是垂直方向上都是相对于包含块宽度的百分比

3.高度的百分比:

  1. 包含块的高度是否取决于子元素的高度,以下情况设置百分比无效
    如果父元素的高度没有设置,父元素的高度由其子元素的高度决定,这时候,height设置为百分比,这就造成了父子元素的矛盾
    父元素对子元素说:你有多高我有多高
    子元素对父元素说:你有多高我是你的一半(height:50%)
  2. 包含块的高度不取决于子元素的高度---父元素写死,百分比相对于父元素的高度
    父元素对子元素说:我就这么高,你多高管我屁事?
    子元素对父元素说:你多高,我是你的一半

4.两个常规流块盒,上下外边距相邻,会进行合并

两个外边距取最大值,兄弟元素和父子元素的情况都是适用的
解决常规流块盒,上下外边距相邻,会进行合并的问题
1.设置父元素的border
2.设置父元素的padding等于子元素的margin
3.创建bfc

如果您发现文章中有不妥之处请与我联系,我将感激不尽
转载著明:sayc.cc 菠萝吹雪的博客

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×