CSS视觉格式化模型

ゝ一纸荒年。 2022-03-08 08:56 111阅读 0赞

**1.CSS 视觉格式化模型**

CSS 视觉格式化模型是用来处理在视觉媒体上显示文档时使用的计算规则。

视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：  
1.盒子的尺寸：精确指定、由约束条件指定或没有指定  
2.盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）  
3.定位方案（positioning scheme）：普通流定位、浮动定位或绝对定位  
4.文档树中的其它元素：即当前盒子的子元素或兄弟元素  
5.视口尺寸与位置  
6.所包含的图片的尺寸  
7.其他的某些外部因素

该模型会根据盒子的包含块（containing block）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（overflow）。

参考文章：[https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Visual\_formatting\_model][https_developer.mozilla.org_zh-CN_docs_Web_Guide_CSS_Visual_formatting_model]

**2.CSS基础盒模型**

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Conent edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

内容区域 content area

内容区域 content area ，由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。

如果 box-sizing 为 content-box（默认），则内容区域的大小可明确地通过 width、min-width、max-width、height、min-height，和 max-height 控制。

内边距区域 padding area

内边距区域 padding area 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。

内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。

==边框区域 border area ==

边框区域 border area 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。

边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。

假如框盒上设有背景（background-color 或 background-image），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 background-clip 来改变。

外边距区域 margin area

外边距区域 margin area 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。

在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。

最后，请注意，除可替换元素外，对于行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）则由 line-height 属性决定，即使边框和内边距仍会显示在内容周围。

**3.盒模型中box-sizing**

参考文章：  
[http://zh.learnlayout.com/box-sizing.html][http_zh.learnlayout.com_box-sizing.html]  
[https://my.oschina.net/u/1165991/blog/740599][https_my.oschina.net_u_1165991_blog_740599]  
[http://ourjs.com/detail/5381581a7610019548000009][http_ourjs.com_detail_5381581a7610019548000009]  
[https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing][https_developer.mozilla.org_zh-CN_docs_Web_CSS_box-sizing]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]

由图可知，在标准盒模型下，width和height是内容区域即content的width和height。一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)。

IE盒子模型中，width和height除了content区域外，还包含padding和border。一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

所以，当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。

.simple {
      width: 500px;
      margin: 20px auto;
    }
    
    .fancy {
      width: 500px;
      margin: 20px auto;
      padding: 50px;
      border-width: 10px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 `box-sizing: border-box;`：

.simple {
      width: 500px;
      margin: 20px auto;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
    
    .fancy {
      width: 500px;
      margin: 20px auto;
      padding: 50px;
      border: solid blue 10px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]

[https_developer.mozilla.org_zh-CN_docs_Web_Guide_CSS_Visual_formatting_model]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220308/f645dd1d350a495ba04a4dac34506bcc.png
[http_zh.learnlayout.com_box-sizing.html]: http://zh.learnlayout.com/box-sizing.html
[https_my.oschina.net_u_1165991_blog_740599]: https://my.oschina.net/u/1165991/blog/740599
[http_ourjs.com_detail_5381581a7610019548000009]: http://ourjs.com/detail/5381581a7610019548000009
[https_developer.mozilla.org_zh-CN_docs_Web_CSS_box-sizing]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220308/ad4e391e0cdc4c1e8478b78f307673c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220308/b33a259626614a8aa41d1d789686a0fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220308/faad5cb06bcc44b58ac6f4bf0ff9d096.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220308/f57792c373544c76ac07d7fd1aa9888e.png