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

CSS的盒子模型、元素类型

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

盒子模型

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

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

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

  各个部分的含义

  • 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>

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

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

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

  • padding区域为inner-edge到border之间的区域,又称元素的内边距,padding区域的大小由paddingpadding-leftpadding-rightpadding-toppadding-bottom属性规定;默认情况下padding:0

  • margin区域为border到outer edge之间的区域,又称元素的外边距,可用通过它来控制页面上不同展示内容之间的间距,margin区域的大小由marginmargin-leftmargin-rightmargin-topmargin-bottom属性规定;默认情况下margin:0

  IE盒子

  IE盒子和W3C标准的盒子结构是一样的,不同之处在于,在IE盒子中,widthheight属性默认是指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-leftborder-rightpadding-leftpadding-right的大小由属性值决定,默认情况下为0,widthmargin-leftmargin-right的大小会根据如下规则动态进行调整,从而使得等式总是成立,元素盒子的宽度总是等于包含块的宽度;

  1. width``,margin-leftmargin-right都为auto时:margin-leftmargin-right被置为0,width根据公式(1)求解;

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

  1. margin-left为固定值,widthmargin-right为auto时:margin-right被置为0,width根据公式(1)求解;

  2. margin-right为固定值,widthmargin-left为auto时:margin-left被置为0,width根据公式(1)求解;

  3. widthmargin-leftmargin-right中有一个为auto时:为auto的那个属性值根据公式(1)求解;

6) widthmargin-leftmargin-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-topborder-bottompadding-toppadding-bottom的大小由属性值决定,默认情况下为0;当margin-topmargin-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中垂直居中定位。

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

  那么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元素来说,widthheight,以及垂直方向上的相关盒子属性padding-toppadding-bottommargin-topmargin-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的元素有divplist,最常见默认为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] 替换元素和非替换元素的学习

上一篇:第7章—SpringMVC高级技术—处理异常


下一篇:Git的基本了解与使用、向github提交代码