Skip to content

Latest commit

 

History

History
141 lines (84 loc) · 7.04 KB

box&replace-element.md

File metadata and controls

141 lines (84 loc) · 7.04 KB

CSS深度学习之盒模型与置换元素

CSS视觉格式化模型

参考链接：

目标

理解以下名词，以及它们之间的关系。

  1. 块级元素，行内级元素
  2. 块级盒，行内级盒
  3. 块容器
  4. 块盒
  5. 匿名块盒，匿名行内盒

块级元素 & 行内级元素

display属性为block || list-item || table的称为块级元素。

使用场景

  • 常用的默认为块级元素的有(想都不用想，肯定是的)：

    div,form,p,pre,blockquote,h1~h6,table,ul,ol,li

  • h5中的块级元素(比较新的，但是可以想象出来是块级的)：

    article,canvas,footer,header,hgroup,noscript,video,section,output,figcation(图文信息组标题),figure(图文信息组)

  • 比较少见的,用的少,而且有些还觉得不像的：

    address,dd（定义列表中定义条目描述）,dl（定义列表）,hr（水平分割线）,tfoot(表标注)

当我们在写项目的时候，大部分经常直接使用div标签，再添加class，而后修改display属性来改变它的模型值。

熟话说，有对比就有“伤害”，在其它文章中，说完块级元素就开始介绍它的子级了，但是我认为，如果想记住一个理论，有对比就会更鲜明点。所以，下面就来看，什么是行内级元素。

行内级元素是指源文档中不为内容生成新块的那些元素；内容被分配在多行（例如，一个段落中的强调部分，行内图片等等）。下面的“display”值将元素变成行内级：“inline”，“inline-table”，和“inline-block”。行内级元素生成行内级盒，这些盒处于一个行内格式化上下文中。

  • 比较常见的行内级元素：

    img,br,a,script,strong,em（斜体）span,sub,sup,button,input,label,select,textarea

  • 比较少见的：

    • b(粗体文本),big(大号字体), bdo(覆盖默认文本方向)
    • abo, abbr(标记一个缩写),acronym(标记一个首字母缩写)
    • cite（标签通常表示它所包含的文本对某个参考文献的引用）, code（定义计算机代码文本）,
    • dfn(标签可标记那些对特殊术语或短语的定义),kbd（定义键盘文本）, samp,var(表示变量的名称，或者由用户提供的值。), -map,object,q,i,small,tt,

看了这些理论似乎还是没什么很强的概念，除了要记住标签，我们还可以看个效果图来找出块级和行内级元素的区别。

块级元素：

block-div

行内级元素 inline-div

可以发现特点是：

  • 块级元素会新起一行
  • 块级元素可以包含行内元素和其他块级元素
  • 行内级元素不可以定高宽，不会起新行
  • 一般情况下，行内级元素只能包含数据和其他行内元素。

块级盒 & 行内级盒

首先先了解什么是块格式化和行格式化上下文。格式化上下文

  • 块级盒（block-level boxes）是指那些作用在块格式化上下文中的盒。 每个块级元素生成一个主要块级盒，这个块级盒包含了块级元素的子孙盒以及生成的内容，并且同时参与定位方案。 除了主要块级盒外，有些块级元素还可能会生成额外的盒子：比如“list-item”元素。这些额外的盒子的位置与主要块级盒相关。
  • 行级元素生成行内级盒，作用于行格式化上下文。行内级盒子包括行内盒子和原子行内级盒子两种，区别在于该盒子是否参与行内格式化上下文的创建。
  • 行内盒子：inline box，参与行内格式化上下文创建的行内级盒子称为行内盒子。与块盒子类似，行内盒子也分为具名行内盒子和匿名行内盒子（anonymous inline box）两种。原子行内级盒子：atomic inline-level box，不参与行内格式化上下文创建的行内级盒子，原子行内级盒子的内容不会拆分成多行显示。

display属性为inline的非替换元素生成行内盒；inline-block元素是行内级元素，它自身作用于行格式化上下文，它生成的是块容器盒，该盒可以包含块级元素或行内级元素。

块容器 & 块盒

一个 块容器 要么只包含 块级盒，要么创建一个 IFC 而只包含 行内级盒，但不能同时包含 块级盒 和 行内级盒。

块容器 的 块级盒 称之为 块盒。

匿名块盒 & 匿名行内盒

  • 匿名行内盒：直接包含在块容器盒中的文本被当作是一个匿名行内盒。

  • 匿名块盒：为了满足块容器的布局要求而定义出来的一种不具名的块盒。

一个匿名盒是匿名行内盒或者是匿名块盒跟它所属的上下文相关。 （块级或者行内，这个块容器布局条件中只能包含块级盒或者只能包含行内盒相关联）。

置换元素

参考链接： 置换元素与非置换元素

在上个话题中，我们得出一个结论是行内级元素是不能定义高宽的，但是又有例外，比如img标签，它可以设置高宽。这个时候我们就会引入另一个名词来说明它，即 置换元素。

置换元素的解释：

一个 内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。即浏览器根据元素的标签和属性，来决定元素的具体显示内容。

比如 浏览器根据src 渲染 img的内容，根据 value 渲染 input , textarea等表单标签的内容。这些都是行内元素，同样也是置换元素，可以定义高宽。

浏览器在渲染 置换元素的时候遵循以下几个原则：

  1.     width: auto;
    height: auto;

    则img的高宽为 ：图片原始高宽 ， input 为 默认高宽

  2. width:auto;
height:100px;

    则img 的高度为100px，width 为 100px * 图片原始高宽比。比如原始高宽比为 1:2， 则 width = 200px;

    *宽度确定，height:auto;*可以类推

  3. 除了上面的情况

    当 width 的计算值为 auto 时，则宽度的使用值为 300px。比如iframe, canvas

    若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍。