#CSS的盒子模型、元素类型

CSS的盒子模型、元素类型

  本文首先介绍了CSS元素的统一内部结构模型，盒子模型；然后介绍了CSS元素基于不同分类标准定义的元素类型，包括基于不同内容设置方式定义的replaced元素和non-replaced元素，以及基于不同布局方式定义的block-level元素、inline-level元素、run-in元素。

盒子模型

  盒子模型其实有两种，一种是W3C标准的盒子模型，一种是IE盒子模型，除了IE8-的浏览器，其他浏览器默认采用W3C标准的盒子模型。

  下图是W3C盒子模型的结构图，它是一种嵌套模型。如图所示，盒子模型是由三个区域（height和width属性规定的content区域，padding区域，margin区域）和三个边缘（content 和 padding之间的inner edge，padding和margin之间的border，包围margin的outer edge）组成，但由于inner edge和outer edge是不能设置宽度的，所以实际上并不占位，盒子的大小是由content区域，padding区域，margin区域，border决定。

块级布局图

  各个部分的含义

  • inner edge为元素内容的放置边界，一般情况下，子元素的盒子不能超出这个边界；同时inner edge也是子元素定位的参照标准，比如我们设置子元素 position: absolute; top: 100px;它的意思就是子元素的top outer edge要与父元素的 top inner edge相距100px；

  • border为元素的展示边界，意思是我们在页面上可以看得到的盒子的内容是不可能超出border的，比如当我们设置元素的背景时，它只会填充盒子border即border内部的区域，如Example 1所示.

    Example 1： 给id为#th1-div的div填充了背景色，结果在页面上只有#th1-div标签的border及border内部的区域显示了背景色，而margin区域还是透明的；

      <style type="text/css">
  #container-div
  {
      height:200px;
      width: 200px;
  	background: cornflowerblue;
      border: dotted 1px black;
  }
  #th1-div
  {
      height: 50px;
      width: 50px;
  	margin-left:50px;
  	margin-top: 50px;
  	background: orange;
      border: dotted 2px black;
  }
  em 
  {
  	font-style: normal; 
  	color: white
  }
  </style>
  <div id="container-div">
  <div id="th1-div">
      <em>div1</em>
  </div>
  </div>

  • outer edge为元素实际所占空间的边界，多个处于一行的浮动元素就是根据outer edge对齐；

  • content区域为元素子元素的放置区域，可以通过设置元素的width和height属性来规定这个区域的长宽；默认情况下width：auto；height：auto；

  • padding区域为inner-edge到border之间的区域，又称元素的内边距，padding区域的大小由padding，padding-left，padding-right，padding-top，padding-bottom属性规定；默认情况下padding：0；

  • margin区域为border到outer edge之间的区域，又称元素的外边距，可用通过它来控制页面上不同展示内容之间的间距，margin区域的大小由margin，margin-left，margin-right，margin-top，margin-bottom属性规定；默认情况下margin：0；

  IE盒子

  IE盒子和W3C标准的盒子结构是一样的，不同之处在于，在IE盒子中，width和height属性默认是指border及border内部区域的长宽。

  盒子选择

  为了使得不同浏览器上的展示内容统一，IE浏览器最好也能以标准的W3C盒子来显示内容。可以通过在页面顶部加上如下<!DOCTYPE>申明来实现，<!DOCTYPE>的相关内容具体可参照HTML之DocType的几种类型;

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

  同时，CSS3提供了一个box-sizing属性，让我们可以自由的选择使用哪种盒子，默认box-sizing：content-box，即表示选择W3C的盒子；当box-sizing：box-box时，表示采用IE盒子，但这个属性IE8才开始不完全支持，比如当设置了元素的最小宽度，box-sizing：box-box就无效了，在IE11中才完全得到支持；

replaced元素和non-replaced元素

  CSS中大部分的元素都是non-replaced元素，CSS没有给出non-replaced元素的专门定义，我们先来看看replaced元素有哪些，那么剩下来的就都是non-replaced元素了。

   replaced元素的内容由元素的属性定义，其内容不受CSS视觉格式化模型控制。比如img标签，它的内容由src属性决定，input的显示样式由type属性确定。除此之外replaced元素还包括：textarea 、select、video、iframe、embed；又有些元素在特定的情况下才会转换成replaced元素：audio、canvas、object、applet；使用CSS的content属性来插入的对象是匿名replaced元素。

  replaced元素通过设置width、height确定元素内容区域的长宽，且它们的padding、margin属性总是有效。

CSS的三种元素类型

  Block-Level元素

  Block-Level元素总是单独存在于一行，它的盒子宽度等于它的包含块的content区域的宽度，也就是说在水平方向上，元素的盒子模型相关属性的值总是满足下述等式(1)；Block-Level元素的盒子高度由等式(2)决定；

等式(1)

box width = containing block width = margin-left + border-left + padding-left+ width + padding-right+ border-right-width + margin-right；

  等式(1)中，border-left，border-right，padding-left，padding-right的大小由属性值决定，默认情况下为0，width，margin-left，margin-right的大小会根据如下规则动态进行调整，从而使得等式总是成立，元素盒子的宽度总是等于包含块的宽度；

  1. width``，margin-left，margin-right都为auto时：margin-left，margin-right被置为0，width根据公式(1)求解；

2 )width为固定值，margin-left，margin-right为auto时：margin-left，margin-right的值相等，根据公式(1)进行求解，也就是说元素context区域将居中显示；

  1. margin-left为固定值，width，margin-right为auto时：margin-right被置为0，width根据公式(1)求解；

  2. margin-right为固定值，width，margin-left为auto时：margin-left被置为0，width根据公式(1)求解；

  3. width，margin-left，margin-right中有一个为auto时：为auto的那个属性值根据公式(1)求解；

6) width，margin-left，margin-right都为固定值时：当文档流顺序为从左到右，margin-right被置为auto；根据5)进行求解；否则margin-left被置为auto；根据5)进行求解；

等式(2)

box height =  margin-top + border-top + padding-top+ height + padding-bottom+ border-bottom-width + margin-bottom；

  等式(2)中，border-top，border-bottom，padding-top，padding-bottom的大小由属性值决定，默认情况下为0；当margin-top，margin-bottom为auto时，它们的值都被置为0，否则根据固定值设定；当height为auto时，height的大小由元素内容决定；否则根据固定值设定。

  Inline-Level元素

  Inline-Level元素可以与其他Inline-Level元素处于同一行；

  我们需要知道Inline-Level元素有一个Inline-box的概念，它是包含Inline-Level元素的一个盒子；Inline-box的主要作用就是与同行的其他Inline-Level元素的Inline-box一起决定元素所在行的行高（Line box的高度）；多个Inline-box是如何决定行高的将在CSS的两种格式化上下文：BFC和IFC中进行说明。我们先讲一下Inline-box与Inline-Level元素之间的关系。

  Inline-Level元素和Inline-box的关系可以用下图进行表示，Inline-box由元素的内容区域和两个等高的half-leading区域组成，只有当元素的Inline-box的高度大于元素的内容区域的高度，half-leading区域才会存在，也就是说元素的内容区域在它的Inline-box中垂直居中定位。

  那么Inline-box的高度由什么决定呢？

  对于non-replaced Inline-Level元素来说，Inline-box的高度由line-height属性决定：默认情况下，line-height属性等于元素内容区域（对于文本内容来说，就是由font-size属性决定，Inline-box的高度大概是font-size值的1.2倍）的高度；当line-height的属性值小于元素内容区域的高度时，元素的部分内容可能会与其他行发生重叠，除非该行的其他Inline-Level元素的Inline-box将行高（Line box的高度）撑开。

  而对于其他Inline-Level元素来说，Inline-box的高度由元素的盒子高度决定的，也就是元素的content、padding、border、margin区域的高度总和。对于这些元素，line-height属性是无效的。

  有些博客中提到，对于Inline-Level元素来说，width，height，以及垂直方向上的相关盒子属性padding-top，padding-bottom，margin-top，margin-bottom是不起作用的，Inline-Level元素的宽度和高度由它包含的内容决定。这一说法是不正确的。上述说法的对象应该改成non-replaced Inline-Level元素。

  Run-In元素

  Run-In元素会根据上下文环境自动调整为Block-Level元素或Inline-Level元素。其判定规则为：当元素不包含Block-Level元素，且下一个相邻兄弟元素为Block-Level元素时，元素调整为Inline-Level元素，且成为它下一个相邻兄弟元素的第一个Inline-Level元素；否则，元素为Block-Level元素。

  元素类型相互转换

  默认情况下，元素只有Block-Level和Inline-Level两种类别，如，最常见默认为Block-Level的元素有div，p，list，最常见默认为Inline-Level的元素有a,span,em。但元素的类型不是固定不变的，可以通过设置元素的display属性进行改变。具体如下：

  • 转换为Block-Level元素：display：block (listitem, table, table-row-group, table-header-group, tablefooter-group, table-row, table-column-group, table-column,table-cell, table-caption)
  • 转换为Inline-Level元素：display：inline (inline-block,inline-table, and ruby)
  • 转换为Run-In元素：display:run-in

参考资料：

[1] 想要清晰的明白（二）CSS 盒模型Block box与Line box

[2] CSS Pocket Reference

[3] 非替换元素和替换元素

[4] 替换元素和非替换元素的学习

posted on 2018-01-13 21:17  AmmyXu  阅读(325)  评论(0)  编辑  收藏  举报