哪些网站可以做自媒体,网站开发合同是否要交印花税,网络优化工程师简历,网站外部链接做多少合适呢今日励志 不论你在什么时候开始#xff0c;重要的是开始之后不要停止。 前言 对于部分前端工程师来讲#xff0c;有时候CSS令他们很头疼#xff0c;明明设置了某个样式#xff0c;但是布局就是不起作用。 如果你也有这种问题#xff0c;那么是时候学习下什么是css视觉格式… 今日励志 不论你在什么时候开始重要的是开始之后不要停止。 前言 对于部分前端工程师来讲有时候CSS令他们很头疼明明设置了某个样式但是布局就是不起作用。 如果你也有这种问题那么是时候学习下什么是css视觉格式化模型了。知己知彼方能解决问题。 CSS 视觉格式化模型visual formatting model是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。 视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子每个盒子的布局由以下因素决定 盒子的尺寸精确指定、由约束条件指定或没有指定盒子的类型行内盒子inline、行内级盒子inline-level、原子行内级盒子atomic inline-level、块盒子block定位方案positioning scheme普通流定位、浮动定位或绝对定位文档树中的其它元素即当前盒子的子元素或兄弟元素视口尺寸与位置所包含的图片的尺寸其他的某些外部因素该模型会根据盒子的包含块containing block的边界来渲染盒子。通常盒子会创建一个包含其后代元素的包含块但是盒子并不由包含块所限制当盒子的布局跑到包含块的外面时称为溢出overflow 盒子生成介绍 盒子的生成是 CSS 视觉格式化模型的一部分用于从文档元素生成盒子。盒子有不同的类型不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS 的display属性。 块级元素与块盒子 当元素的 display为 block、list-item或 table时该元素将成为块级元素。一个块级元素会被格式化成一个块例如文章的一个段落默认按照垂直方向依次排列。 每个块级盒子都会参与块格式化上下文block formatting context的创建而每个块级元素都会至少生成一个块级盒子即主块级盒子principal block-level box。有一些元素比如列表项会生成额外的盒子来放置项目符号而那些会生成列表项的元素可能会生成更多的盒子。不过多数元素只生成一个主块级盒子。 主块级盒子包含由后代元素生成的盒子以及内容同时它也会参与定位方案。 一个块级盒子可能也是一个块容器盒子。块容器盒子block container box要么只包含其它块级盒子要么只包含行内盒子并同时创建一个行内格式化上下文inline formatting context。 能够注意到块级盒子与块容器盒子是不同的这一点很重要。前者描述了元素与其父元素和兄弟元素之间的行为而后者描述了元素跟其后代之间的行为。有些块级盒子并不是块容器盒子比如表格而有些块容器盒子也不是块级盒子比如非替换行内块和非替换表格单元格。 一个同时是块容器盒子的块级盒子称为块盒子block box。 匿名块盒子在某些情况下进行视觉格式化时需要添加一些增补性的盒子这些盒子不能用CSS选择符选中因此称为匿名盒子anonymous boxes。 CSS选择器不能作用于匿名盒子(anonymous boxes)所以它不能被样式表赋予样式。也就是说此时所有可继承的 CSS 属性值都为 inherit 而所有不可继承的 CSS 属性值都为 initial。 块包含盒子可能只包含行内级盒子也可能只包含块级盒子但通常的文档都会同时包含两者在这种情况下就会在相邻的行内级盒子外创建匿名块盒子。 示例节考虑下面的HTML代码假设 和 都保持默认的样式即它们的 display 为 block divSome inline textpfollowed by a paragraph/pfollowed by more inline text.
/div 此时会产生两个匿名块盒子一个是 元素前面的那些文本Some inline text另一个是元素后面的文本followed by more inline text.。此时会生成下面的块结构 显示为 Some inline textfollowed by a paragraphfollowed by more inline text. 对这两个匿名盒子来说程序员无法像p元素那样控制它们的样式因此它们会从div那里继承那些可继承的属性如 color。其他不可继承的属性则会设置为 initial比如因为没有为它们指定 background-color因此其具有默认的透明背景而 元素的盒子则能够用CSS指定背景颜色。类似地两个匿名盒子的文本颜色总是一样的。 另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时包含块盒子的盒子会拆分为两个行内盒子分别位于块盒子的前面和后面。块盒子前面的所有行内盒子会被一个匿名块盒子包裹块盒子后面的行内盒子也是一样。因此块盒子将成为这两个匿名块盒子的兄弟盒子。 如果有多个块盒子而它们中间又没有行内元素则会在这些盒子的前面和后面创建两个匿名块盒子。 行内级元素和行内盒子节如果一个元素的display属性为inline、inline-block或inline-table则称该元素为行内级元素。显示时它不会生成内容块但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容如强调文本、图片等的段落就可以由行内级元素组成。 行内级元素会生成行内级盒子该盒子同时会参与行内格式化上下文inline formatting context的创建。行内盒子既是行内级盒子也是一个其内容会参与创建其容器的行内格式化上下文的盒子比如所有具有display:inline样式的非替换盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建则称其为原子行内级盒子。而通过替换行内级元素或display值为inline-block或inline-table的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。 注意开始的时候原子行内级盒子叫做原子行内盒子这并不准确因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过当你见到某些文章中使用了“原子行内盒子”的时候你尽可以将其理解为“原子行内级盒子”因为这仅仅是一个名字的修改。 在同一个行内格式化上下文中原子行内级盒子不能拆分成多行 style span {display: inline; /* default value*/
}/style
div stylewidth:20em;The text in the spanspancan be split in several lines as it/spanis an inline box.
/div 可能会显示为 The text in the span can be split into several
lines as it is an inline box. 而 style span {display: inline-block;
}/style
div stylewidth:20em;The text in the spanspancannot be split in several lines as it/spanis an inline-block box.
/div 则可能显示为 The text in the span
cannot be split into several lines as it is an
inline-block box.其中的“cannot be split into several lines as it”永远不会换行。 匿名行内盒子 类似于块盒子CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中因此是匿名的它们从父元素那里继承那些可继承的属性其他属性保持默认值initial。 一种常见的情况是CSS引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文在这种情况下这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子因为空格有可能会由于white-space的设置而被移除从而导致最终的实际内容为空。 其他类型的盒子 行盒子 行盒子由行内格式化上下文创建用来显示一行文本。在块盒子内部行盒子总是从块盒子的一边延伸到另一边译注即占据整个块盒子的宽度。当有浮动元素时行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。 行盒子更多是以技术性目的而存在的Web开发者通常不需要关心。 Run-in 盒子 Run-in 盒子通过display:run-in来定义它可以是块盒子也可以是行内盒子这取决于紧随其后的盒子的类型。Run-in 盒子可以用来在可能的情况下将标题嵌入文章的第一个段落中。 注意Run-in 盒子已经在CSS 2.1的标准中移除了但可能会在CSS 3中作为一个实验性的内容再次加入。因此最好不要将其用于正式项目。 由其他模型引入的盒子 除了行内格式化上下文和块格式化上下文之外CSS还定义了几种内容模型这些模型同样可以应用于元素。这些模型一般用来描述布局它们可能会定义一些额外的盒子类型 表格内容模型可能会创建一个表格包装器盒子和一个表格盒子以及多个其他盒子如表格标题盒子等多列内容模型可能会在容器盒子和内容之间创建多个列盒子实验性的网格内容模型或flex-box内容模型同样会创建一些其他种类的盒子定位规则一旦生成了盒子以后CSS引擎就需要定位它们以完成布局。下面是定位盒子时所使用的规则 普通流按照次序依次定位每个盒子浮动将盒子从普通流中单独拎出来将其放到外层盒子的某一边绝对定位按照绝对位置来定位盒子其位置根据盒子的包含元素所建立的绝对坐标系来计算因此绝对定位元素有可能会覆盖其他元素普通流介绍 在普通流中盒子会依次放置。在块格式化上下文中盒子在垂直方向依次排列而在行内格式化上下文中盒子则水平排列。当CSS的 position 属性为 static 或 relative并且 float 为 none 时其布局方式为普通流。 浮动介绍 在浮动定位中浮动盒子会浮动到当前行的开始或尾部位置。这会导致普通流中的文本及其他内容会“流”到浮动盒子的边缘处除非元素通过 clear 清除了前面的浮动。一个盒子的 float 值不为 none并且其 position 为 static 或 relative 时该盒子为浮动定位。如果将 float 设置为 left浮动盒子会定位到当前行盒子的开始位置左侧如果设置为 right浮动盒子会定位到当前行盒子的尾部位置右侧。不管是左浮动还是右浮动行盒子都会伸缩以适应浮动盒子的大小。 绝对定位介绍 在绝对定位中盒子会完全从当前流中移除并且不会再与其有任何联系译注此处仅指定位和位置计算而绝对定位的元素在文档树中仍然与其他元素有父子或兄弟等关系其位置会使用 top、bottom、left 和 right 相对其包含块进行计算。如果元素的 position 为 absolute 或 fixed该元素为绝对定位。 对固定位置的元素来说其包含块为整个视口该元素相对视口进行绝对定位因此滚动时元素的位置并不会改变。 参考资料MDN文档https://developer.mozilla.org... 你可能喜欢 打开微信扫一扫关注早读君每天早晨为你推送前端知识度过挤地铁坐公交的时光
