- 参考资料：
一、什么是视觉格式化模型
二、关于模型的一些基础知识
2.1 包含块
- 包含块举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>包含块</title>
</head>
<body>
<div class="container">
<div class="div1">div</div>
<p class="p p1">the first paragraph</p>
<p class="p p2">
<em>the<strong>second</strong>paragraph</em>
</p>
</div>
</body>
</html>
2.2 正常流
- 指西方语言文本从左向右、从上向下显示。
- 要让一个元素不在正常流中，可通过使元素成为浮动元素或者定位元素。
2.3 非替换元素
- 非替换元素：
(X)HTML的大多数元素都是非替换元素，他们将内容直接告诉浏览器，将其显示出来
- 行内非替换元素特点：
- 行内非替换元素添加
padding-top或padding-bottom，不影响行框高度，但内容去高度会变化margin-top，margin-bottom对行框没有任何影响- 添加左右边距会影响行内非替换元素水平位置
- 以下这两个
demo是关于行内非替换元素与行内替换元素的对比：
- 行内非替换元素：【点击打开demo1】
- 行内替换元素：【点击打开demo2】
2.4 替换元素
- 替换元素：替换元素是浏览器根据元素的标签和属性，来决定元素的具体显示内容
- 替换元素：
audio和canvas在某些特定情况下为替换元素- 行内替换元素：
input/textarea/select(display:inline-block)；img/object/iframe(display:inline)
- 特点：
- 替换元素是其内容不受
css视觉格式化模型控制的元素- 在这些元素没有实际的内容，是个空元素
- 浏览器会根据元素的标签类型和属性来显示这些元素
- 替换元素也在其显示中生成了框 — 替换元素通常有其固有的尺寸（一个固有的宽度、一个固有的高度和一个固有的比率）
- 替换元素可增加其行框高度，带不影响
line-height— 内容区高度值 =pading-top+padding-bottom+margin-top+margin-bottom+height（要向替换元素居中，可设置line-height = height）
- 这个
demo是关于说明行内替换元素有哪些。【点击打开demo】
2.5 块级元素
- 当元素的
CSS属性display的计算值为block，list-item，table，flex或grid时，它是块级元素。- 块级元素在正常流中，会在其框前和框后生成“换行”，因此，处于正常流中的块级元素会垂直摆放。
- 一个元素的
width被定义为从左内边界到右内边界的距离- 一个元素的
height则是从上内边界到下内边界的距离
2.6 行内元素
- 行内元素不会在框前或框后生成“行分隔符”。
- 行内元素有：
strong、span、em、i、b
2.7 根元素
- 根元素就是位于文档树顶端的元素。
- 在
HTML文档中，就是<html>- 在
XML文档中，可以是该语言允许的任何元素