介绍

我们的页面布局有多种方式，他们布局的具体原理是什么呢？

定位（position）和包含块 （Containing Block）

元素设置属性 （width、height、padding、margin和border， top、right、bottom和left）时有个“相对参考系”，所以这些有“相对参考系”的祖先元素，其容纳区域叫包含块。

  • static: 无法设置top、right、bottom和left这四个偏移属性，width、height、padding、margin相对参考系” 是其包含块（块级祖先元素（一般是父元素）的content box）（如果祖先元素是inline等，往上找直到找到块级元素）

  • relative： 尺寸属性（width、height等）“相对参考系” 是其包含块（块级祖先元素（一般是父元素）的content box）（如果祖先元素是inline等，往上找直到找到块级元素）偏移属性（top、right、bottom和left）的“相对坐标系”则是其在文档流原来的位置。

  • absolute：”相对参考系”是离这个元素最近的非static（relative、absolute和fixed）定位的祖先元素。若没有，为根元素的包含块（ICB）——viewport（可视窗口）的大小，比如bottom为0时出现在窗口最下面，但是会随着滚动而改变位置。
  • fixed：”相对参考系”为浏览器窗口，不跟着滚动而改变位置

文档流

文档流内的元素，相互尊重：有序排列，彼此识别

脱离文档流：父元素无法识别，不参与父元素高度计算。会出现“高度坍塌”。

  • 将元素设置为浮动元素
  • 将元素设置为absolute、fixed元素

浮动

  • 浮动起始位置
    浮动元素（包括左右）的浮动起始位置，为最后一行最左侧的空白位置，而不管空白位置是否能够容纳当前浮动元素；

  • 浮动方向
    左浮动元素的浮动方向为从起始位置向左浮动；
    右浮动元素的浮动方向为从起始位置向右浮动；

  • 浮动结束位置
    左浮动元素遇到第一个左浮动元素或包含块的最左侧padding时，结束浮动；
    右浮动元素遇到第一个右浮动元素或包含块的最右侧padding时，结束浮动；

1
2
3
4
5
6
7
8
9
<div class="fl" style="width: 30%; height: 100px;background: #A71F1F">左浮动元素－1（width: 30%; height: 100px;）</div>

<div class="fl" style="width: 30%; height: 200px;background: #FF92CB">左浮动元素－2（width: 30%; height: 200px;）</div>

<div class="fl" style="width: 30%; height: 100px;background: #8DB1E6">左浮动元素－3（width: 30%; height: 100px;）</div>

<div class="fl" style="width: 30%; height: 100px;background: #B0ED8A">左浮动元素－4（width: 30%; height: 100px;）</div>

<div style="width: 30%; height: 100px;background: #7242E0;float: right;">右浮动元素－4（width: 30%; height: 100px;）</div>

我们调整各类浮动属性，表现如下：

清除浮动

很多人都已经习惯说清除浮动，但是确切地来说是不准确的。
1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。

清除浮动：
clear：取值 left、right和both， 跟当前元素的是否是浮动元素或浮动方向没有任何关系，而取决于其前面声明的浮动元素的浮动方向，若取值和前一个浮动元素的浮动方向不同向，则不会换行

闭合浮动：

  • 在想要清除浮动的元素后面加：
  • 使用 br标签和其自身的 html属性：br 有 clear=“all | left | right | none” 属性
  • 父元素设置为BFC元素
  • 使用:after 伪元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    /* 为兼容IE6,IE7，因为ie6,ie7不能用after伪类 */
    .clearfix{            
        zoom:1;
    }

清除浮动后margin合并问题：
两个浮动元素之间，其垂直方向上的margin不会发生合并
非浮动的块级元素和浮动元素之间，其垂直方向上的margin会发生合并

行框

包含IFC内部的所有子元素的虚拟矩形区域，形成的每一行，称为line box

行高计算：

  1. 一个元素的行框高度，可由该元素的line-height属性设置；
  2. 一个元素的行框高度，可由不可置换（span、a、label等）子元素的line-height属性 和 内容高度（text-top到text-bottom的垂直距离）影响设置；
  3. 一个元素的行框高度，可由可置换行内元素（如img）或display属性为inline-block、inline-table的这一类inline-block-level子元素的margin box高度和vertical-align属性决定，当vertical-align为top或bottom时，行框的高度达到最小，刚好为子元素的margin box高度；
1
2
3
4
5
<div style="background: #A71F1F;">
    <span style='background: #7242E0;line-height: 64px;'>line height 64</span>
    <span style='background: #B0ED8A;line-height: 32p;'>line height 32</span>
    <img src="./timg2.jpg" style='height: 300px'>
</div>

vertical-align( 设置inline-level元素自身在“行框”内的垂直对齐方式，其控制范围在一行内。较常用的值有top、middle、baseline（默认值）和bottom)
vertical-align属性的另一个作用：就是table-cell元素用于控制其内部子元素在垂直方向上的对齐方式，而且这些子元素的类型不受限制，不仅可以是span，而且可以是div,图片也可以。