CSS布局原理之可视化模型

最新推荐文章于 2024-05-10 15:35:51 发布

键盘独行侠

最新推荐文章于 2024-05-10 15:35:51 发布

阅读量128

点赞数

文章标签： css 前端 html css3

本文链接：https://blog.csdn.net/ljp341621/article/details/129336348

版权

概述

视觉格式化模型作用是定义User Agents如何在视觉介质(Visual Media)上处理文档树(document-tree)
文档树每个元素(Element)根据盒子模型的定义生成0个或者多个盒子
影响盒子布局的因素
- 盒子的外形尺寸和类型
- 定位方案（Positioning schema）主要由正常流、浮动、绝对定位
- 文档树中元素的关系
- 其他外部信息（视口大小、图片自身大小等）
视觉格式化模型中定义的各种属性对连续介质和分页介质都适用，但是外边距属性(margin)应用到分页介质时会表现得不一样
视觉格式化模型并没有定了格式化得所有方面，对于没有定义的，一般由User Agent代理处理，所以不同的User Agent的视觉表现有所差别

在连续介质(Continous Media)上User Agent通常会提供一个可视化的范围(可以是窗口、也可以是屏幕上的一块区域)供展示文档，这个可视化的范围就是视口(Viewport)
一般时候大小发生变化后User Agent会重新布局文档

通过指定盒子代表元素的display属性来控制生成盒子的类型
块级元素和块盒子
- 块级元素生成块级盒子(block-level box)，并且会参与到一个块级格式化上下文(BFS)中来
- 每个块级元素都会生成一个主块级盒子包含子孙盒子和产生的内容，块级盒子同时也是定位方案所使用的盒子
- 一个块级盒子(除了表格盒子和可替换元素外)也是一个块容器盒子(block container box)
- 如果块级盒子同时也是块容器盒子，就称之为块盒子(Block box)
匿名块盒子
行内元素和行内盒子
- 行内级元素生成行内级盒子，并且参与到行内格式化上下文中来
匿名行内盒子
display属性
- block:使一个元素生成块盒子
- inline-block:使一个元素生成一个行内级别块容器，内部元素被格式化为块盒子，本身格式化为原子行内级盒子
- inline:使元素生成一个或多个行内盒子
- list-item:使一个元素生成一个基本的块盒子和一个标记盒子
- none:使元素及其子孙不出现在格式化结构中，不参与盒子生成和布局
- table系列:使元素具有表格元素一样的特性

正常流模型
- 块级盒子的块格式化
- 行内级盒子的行内格式化
- 块级盒子和行内级盒子的相对定位
浮动模型
- 先在正常流中布局
- 然后从正常流中取出，然后浮动到左边或右边
绝对定位模型
- 从正常流中取出盒子
- 通过给定相对于其包含块的位置来定位
Position定位类型
- static:元素在正常流中布局，此时top/right/bottom/let属性值不起作用
- relative：通过指定相对于在正常流中的位置的偏移来定位
- absolute：通过指定相对于其包含块的左上角的偏移值来定位
- fixed
盒子的偏移
- 通常如果一个元素有设置position属性，且值不为static,那么称这个元素被定位了，被定位了的元素生成定位盒子，并且由以下四个值来布局
- 以下四个属性如果指定的是百分比，则是相对于其包含块的百分比
  - top
  - right
  - bottom
  - left

正常流中的盒子参与到格式化上下文，块级盒子参与到块格式化上下文，行内盒子参与到行内格式化上下文
块格式化上下文
- 浮动、绝对定位元素和块容器不是块盒子
- 如果块盒子指定了overflow而不是visible，那么将为它的内容新建新的块格式化上下文
- 在块格式化上下文中，盒子在包含块中由顶开始垂直排列，盒子间的间距由margin指定
- 在块格式化上下文中相邻的块级盒子的垂直方向的外边距将会引起折叠
行内格式化上下文
- 行内格式化上下文中，从左侧开始在水平方向排列，包含盒子的矩形区域组成一个线盒子
- 线盒子的宽度取决于包含块，高度取决于line-height的计算
相对定位
- 一旦一个盒子经由正常流或浮动定位后，可以在定位后的基础上设置相对偏移值，此方法叫相对定位