【CSS学习笔记——视觉格式化模型 visual formatting model】的更多相关文章

CSS学习笔记——视觉格式化模型 visual formatting model

CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻译自W3C官方文档,其中加上了自己的一些理解.相关链接:https://www.w3.org/TR/CSS2/visuren.html#block-boxes. 1.可替换元素(Replaced element) 下面的一段话引自MDN: 典型的可替换元素有 <img>. <object&g…

CSS中的视觉格式化模型

视觉格式化模型 1. 简介 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 额外的信息(比如视口的大小,图片的原始尺寸等) 1.1 视口(viewport) 连续媒体(continuous media)的UA(user agent)通常会给用户提供一个视口,一般为一个窗口或者屏幕上的一片可视区域.用户通过这个视口查看文档(document).当视口的大小改…

CSS学习笔记07 盒子模型

1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. 用公式表示就是:盒子=边框+内边距+内容区域+外边距 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 注意:背景应用于由内容和内边距.边框组成的区域.       可以看到背景色穿…

CSS学习笔记：盒子模型

盒子模型(CSS basic box model):When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties(color, background, bord…

CSS学习笔记之框模型

1.概述 为了更好的处理 元素内容.内边距.边框 和 外边距 之间的关系,CSS 定义了框模型如下: 内边距.边框 和 外边距 的默认值都是零,可以通过设置元素的 padding.border 和 margin 属性来覆盖这些默认的浏览器样式.另外,要注意的是 width 和 height 属性可以分别用于设置内容区域的宽度和高度 2.内边距 padding 属性定义元素的内边距,其接受长度值和百分数值,要注意的是百分数值是相对于其父元素的 width 属性计算的 一般情况下,我们需要指定四个值…

可视化格式模型(visual formatting model)

原文 简书原文:https://www.jianshu.com/p/7632f16ff555 大纲 1.认识可视化模型 2.可视化模型的内容 3.可视化模型的影响因素 1.认识可视化模型 盒子模型是CSS中所有元素产生的box的自身构成,而可视化格式模型则是把这些box,按照规则摆放到页面上,也就是通常所说的布局.换句话说,可视化格式模型是整个页面的模型,这个模型规定了怎么在页面里摆放box,box相互作用等等.属于CSS的最为核心的概念之一. 可视化格式模型,官方的说法是,它规定了用户端在媒介…

CSS学习笔记09 简单理解BFC

引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style type="text/css"> .div1 {background-color: #FCE38A; width: 200px; height: 1…

大前端学习笔记整理【二】CSS视觉格式化模型

1. 概念 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 额外的信息(比如视口的大小,图片的原始尺寸等) 1.1 视口(viewport) 连续媒体(continuous media)的UA(user agent/用户代理)通常会给用户提供一个视口,一般为一个窗口或者屏幕上的一片可视区域.用户通过这个视口查看文档(document).当视口的大小改变时,…

CSS视觉格式化模型

CSS视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.这是CSS 2.1的一个基础概念.视觉格式化模型根据CSS盒模型为文档的每个元素生成0,1或多个盒.每个盒的布局由如下内容组成: 盒尺寸:明确指定,受限或没有指定 盒类型:块级盒(block-level box),行内级别盒(inline-level box),行内盒(inline-box),原子行内级别盒(atomic inline-level box) 定位方案(position…

CSS2.1SPEC：视觉格式化模型之包含块

原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且结合具体的实例进行具体分析,特别是对于CSS2.1支持并不完善的IE6/7.由于经验尚浅,文中肯定存在一些问题,希望大家可以多多包涵并且指出问题.   阅读本文前,应当对于CSS盒模型以及视觉格式化模型中会产生的各种框(box,也可以成为盒子)以及各种不同的布局方式有比较准确的认识,可以阅读杜瑶大神…