首页 前端知识 多个盒子排列规则(视觉格式化模型) 多个盒子的排列 页面布局

多个盒子排列规则(视觉格式化模型) 多个盒子的排列 页面布局

2024-03-05 09:03:10 前端知识 前端哥 996 669 我要收藏

目录

  • 常规流
    • 常规流布局
    • 块盒的排列规则

常规流

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

视觉格式化模型(布局规则):页面中的多个盒子排列规则

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

  1. 常规流
  2. 浮动
  3. 定位

常规流布局

常规流、文档流、普通文档流、常规文档流

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

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

包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域。

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

意思是:
1.有一个父盒子,它里面还有一个子盒子,子盒子能够存在的地方是父盒子的content区里,如果父盒子通过margin-left进行移动,子盒子也会同时进行移动。如果想让子盒子撑满父盒子的content区,就要关闭子盒子的width,留下height的设置就可。
2.父盒子又是body的包含块。

如下所示:父盒子(图1)的content区宽是300,子盒子(图2)整个的宽度就是300.

图1父盒子
子盒子
图2

效果图:
在这里插入图片描述

块盒的排列规则

  1. 每个块盒(子盒子)的总宽度,必须刚好等于包含块(父盒子的content区)的宽度

在没有设置块盒宽度的时候,块盒content区的width的默认值是auto,它会自动计算,用父盒子的content宽度值减去块盒的两边的border=块盒的content值。

如图所示:
在这里插入图片描述

  1. margin的取值也可以是auto,默认值0

1) auto:将剩余空间吸收掉

2)当content的width设置成auto,margin也设置成auto时,margin拿不到任何的宽度值,因为width吸收能力强于margin。

3)若宽度(width)、边框(border)、内边距(padding)、外边距(margin)计算后,仍然有剩余空间,该剩余空间被margin-right、margin-left全部吸收
(如图3所示)

因为规定块盒必须把父盒子的content宽度占满
如果子盒子的宽度,被设置了,那么剩余的空间将由 margin:auto 来负责占满

4)在常规流中,块盒在其包含块中居中,可以定宽、然后左右margin设置为auto。(如图3所示)

在这里插入图片描述
图3

5)margin值可以设置成负数,当margin设置成负数的时候,子盒子就会想外边突出。(如图所示)

  • 子盒子的数值情况:
    content:363.352
    border: 1.818
    margin-right: -67

  • 父盒子的content:300px

由于子盒子的width没有进行设置:所以当margin-right变成负数的时候,子盒子剩下的空间值由content的width进行填充,所以子盒子的content值变成了363.352
计算过程:
300-(-67)-1.818-1.818=363.352

在这里插入图片描述

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

height:auto, 适应内容的高度,内容有多少就有多高

margin:auto, 表示0,这句话意思是,盒子上下的margin值为0,左右的margin(水平上)还是有值的。

  1. 百分比取值

padding、宽、margin可以取值为百分比

块盒以上的所有百分比相对于包含块的宽度。

意思是:子盒子所有的百分之的值=百分比乘以父盒子的宽度。
如图所示:
在这里插入图片描述

高度的百分比:

1). 包含块的高度是否取决于子元素的高度,答案是否,子盒子设置百分比无效
2). 包含块的高度不取决于子元素的高度,百分比相对于父元素高度

  1. 上下外边距的合并

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

两个外边距取最大值。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3248.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!