盒模型、定位

2017-09-04 本文已影响0人陆lmj

标准盒模型、怪异盒模型

CSS中Box model是分为两种:: W3C标准（标准盒模型）和 IE标准盒子模型（怪异盒模型）。大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。
重要的一个属性是box-sizing:content-box || border-box || inherit（默认是content-box）

box-sizing:content-box：采用标准盒模型
Element width = width + border + padding + margin，padding、border、margin不被包含在定义的width和height之内，对象的实际宽度等于设置的width值和border、padding、margin之和，改变padding、border、margin值的话width会跟着变化。

box-sizing:border-box：采用怪异盒模型
Element width = width，padding、margin和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度。

外边距叠加

当两个或者争夺垂直外边距相遇时，他们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距发生叠加。

当一个元素包含在另一个元素时（假设没有内边距或者边框将外边距分隔开），他们的顶和/或底外边距也会发生叠加。

外边距可以与本身发生叠加。假设有一个空元素，它有外边距，但是没有边框或内边距，这种情况下，顶外边距与底外边距就碰在一起，发生叠加。

上述情况，如果这个外边距碰到另一个元素的外边距，还会发生叠加。

外边距叠加实际上有重要意义，例如下图：由几个段落组成的典型文本页面，第一个段落上面的空间等于段落的顶外边距，如果没有外边距叠加，后续的所有段落之间的空间将是相邻顶外边距和底外边距的和，则段落之间的空间是页面顶部的两倍。若发生外边距叠加，段落之间的顶外边距和底外边距就叠加在一起，这样各处的距离就一致了。

只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或者绝对定位框之间的外边距不会叠加。

定位

1. 可视化格式模型

p、h1或div等元素被称为块级元素，意味着这些元素显示为一块内容，即“块框”。
strong和span等元素被称为行内元素，因为它们的内容显示在行中，即“行内框”。
可使用display属性改变生成的框的类型：
display=none：让生成的元素根本没有狂，这样，这个框及其所有内容就不再显示，不占用文档中的空间。
display=block：让行内元素表现的像块级元素一样，元素占据整行空间，可以定义元素的尺寸。
display=inline：一般是不会定义元素的尺寸的，它是行内流动性的布局，其尺寸由Font-size决定。
display=inline-block：让元素像行内元素一样水平的依次排列，但是框的内容仍然符合块级框的行为，即能显式的设置宽度、高度、垂直外边距、内边距，既有行内流动又有尺寸。
块级框：从上到下一个接一个地垂直排列，框之间的垂直距离由框的垂直外边距计算出来。
行内框：在一行中水平排列。可使用水平内边距、边框、外边距来调整它们的水平间距，但垂直内边距、边框、外边距都不影响行内框的高度，在行内框上设置显式的高度或者宽度也是没有用的。
行框：由一行形成的水平框成为行框，行框的高度总是足以容纳它包含的所有行内框，行框的高度由行高line-height设置。
修改行内框尺寸的唯一办法是修改行高（修改高度）或者水平边框、内边距、外边距（修改宽度）。

行高 line-height：

所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识：顶线、中线、基线、底线。
从上到下四条线分别是顶线、中线、基线、底线，vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。基线不是最下面的线，最下面的是底线。

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。
行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2

内容区：底线和顶线包裹的区域，即上图深灰色背景区域
行内框：每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域），行内框的高度由font-size决定
行框（line box）：行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

line-height定义

line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

匿名块框：大多数框都是由显式定义形成的，但有一种情况，即使没有显式定义也会创建块级元素，即：将一些文本（代码中的some text）添加到一个块级元素的开头时，即使没有把这些文本定义为块级元素，它也会被当成块级元素对待。

<div>
   some text
   <p>Some more text</p>
</div>

CSS有3种基本的定位机制：普通流、浮动、绝对定位。除非专门指定，否则所有框都在普通流中定位，普通流中元素框的位置由元素在HTML中的位置决定。

2. 相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上，然后可以通过设置垂直或水平位置，让这个元素“相对于”它的起点移动。如下：

#myBox{
    position:relative;
    left:20px;
    right:20px;
}

无论是否移动，元素仍然占据原来的空间，因此，移动的元素会导致它覆盖其他框。
相对定位被看作普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置的。

3. 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间，不影响普通流中的框，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样，所以他可以覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的叠放次序，z-index值越高，框在栈中的位置就越高。绝对定位的元素的位置是相对于距离它最近的已定位的祖先元素（例如：position=relative等，position=static是不可以的）确定的，若没有已定位的祖先元素，那它就相对于初始包含块的。绝对定位的框可以从它的包含块向上、下、左、右移动。

固定定位

固定定位是绝对定位的一种，差异在于固定元素的包含块是视口，所以创建的是出现在窗口中相同位置的浮动元素。

4. 浮动

浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘，浮动框不在文档的普通流中，所以文档的普通流中的块框表现得像浮动框不存在一样。实际上并不完全如此，如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现的像浮动根本不存在一样，但框的文本内容会受到浮动元素的影响，会移动以留出空间，因此行框围绕浮动框，即浮动框使文本可以围绕图像。

清理浮动：clear属性

要阻止行框围绕在浮动框的外边，需要对包含这些行框的元素应用clear属性，值可以是left、right、both、none，表示框的哪边不应该挨着浮动框，清理元素时，浏览器在元素顶上添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面。

例子：有一张图片，希望让它浮动到一个文本块的左边，然后让这个图片和文本包含在另一个具有背景颜色和边框的元素中。

<div class="new">
    <img src=""/>
    <p>Some text </p>
</div>
.new{
    background-color:gray;
    border:solid 1px black;
}
.news img{
    float:left;
}
.new p{
    float:right;
}

结果如下：因为浮动元素脱离文档流，所以div.new不占据空间

如何让包围元素在视觉上包围浮动元素？：

在这个元素的某个地方应用clear：因为在例子中没有现有的元素可以清理，所以需要在最后一个段落下面添加一个空元素并且清理它。

<div class="new">
    <img src="" />
    <p>Some text </p>
    <br class="clear" />
</div>
.new{
    background-color:gray;
    border:solid 1px black;
}
.news img{
    float:left;
}
.new p{
    float:right;
}
.clear{
    clear:both;
}

结果如下：

还可以不对浮动的文本和图像进行清理，而是选择浮动div容器：

<div class="new">
    <img src="" />
    <p>Some text </p>
</div>
.new{
    background-color:gray;
    border:solid 1px black;
    float:left;
}
.news img{
    float:left;
}
.new p{
    float:right;
}

这种做法产生的问题：下一个元素会受到这个浮动元素的影响，为解决这个问题，有人选择浮动布局中的所有东西，然后使用合适的元素对这些浮动元素进行清理，这有助于减少或消除不必要的标记，但是浮动也会变得复杂，因此，许多人还是喜欢添加少量的额外标记。