CSS布局中的尺寸和定位

CSS盒模型

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：

需要注意的点：

padding不能为负值，而margin可以为负值
背景色会平铺到非margin的区域
margin-top传递的现象及解决方案
margin上下叠加的现象以及解决方案

块级盒子与内联盒子

块级盒子

独占一行
支持所有样式
不写宽度的时候，跟父容器的宽度相同
所占区域是个矩形

内联盒子

盒子不会产生换行
有些样式不支持，例如：widthheight等
不写宽度的时候，宽度由内容决定
所占的区域不一定是矩形
内联标签之间会有空隙

浮动与清除浮动

浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

右浮动：

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

左浮动：

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

清除浮动

clear属性

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

<pre class="ne-codeblock" data-language="plain" id="atLLM" language-plain="">.box1{
    width:100px;
    height:100px;
    background:pink;
    float:left;
}
.box2{
    width:200px;
    height:200px;
    background:skyblue;
    clear:both;
}

<div class=box1></div>
<div class=box2></div>

<pre class="ne-codeblock" data-language="plain" id="atLLM" language-plain="">.box1{

width:100px;

height:100px;

background:pink;

float:left;

}

.box2{

width:200px;

height:200px;

background:skyblue;

clear:both;

}

BFC

空标签

利用空标签撑起来

<pre class="ne-codeblock" data-language="plain" id="Q49zp" language-plain="">.box1 {
    width: 200px;
    border: 1px black solid;
}

.box2 {
    width: 100px;
    height: 100px;
    background: pink;
    float:left;
}

<div class=box1>
    <div class=box2></div>
    <div style=clear:both;></div>
</div>
aaaaaaaaa

<pre class="ne-codeblock" data-language="plain" id="Q49zp" language-plain="">.box1 {

width: 200px;

border: 1px black solid;

}

.box2 {

width: 100px;

height: 100px;

background: pink;

float:left;

}

</div>

aaaaaaaaa

.clearfix::after{} 伪类

<pre class="ne-codeblock" data-language="plain" id="jRXii" language-plain="">.box1 {
    width: 200px;
    border: 1px black solid;
}

.box2 {
    width: 100px;
    height: 100px;
    background: pink;
    float:left;
}

.clearfix::after{
    content : ;
    clear:both;
    display:block;   // 需要将内联盒子转换成块级盒子
}

<div class=box1 clearfix>
    <div class=box2></div>
</div>

<pre class="ne-codeblock" data-language="plain" id="jRXii" language-plain="">.box1 {

width: 200px;

border: 1px black solid;

}

.box2 {

width: 100px;

height: 100px;

background: pink;

float:left;

}

.clearfix::after{

content : ;

clear:both;

display:block; // 需要将内联盒子转换成块级盒子

}

</div>

浮动的特点

只会影响后面的元素
- 之前的元素不会受到影响
文本不会被浮动元素覆盖
- 浮动是为了排版设计的
具备内联盒子特性：宽度由内容决定
- div加浮动，宽度由内容决定
具备块级盒子特性：支持所有样式
- span加浮动的时候，可以支持宽高
浮动放不下，会自动换行
- 父容器装不下就自动换行

定位样式详解

通过使用 position 属性，我们可以选择 5 种不同类型的定位，这会影响元素框生成的方式。

相对定位

relative

相对定位的元素是在文档中的正常位置偏移给定的值
不影响其他元素布局
相对于自身进行偏移

绝对定位

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位的元素脱离了文档流，绝对定位元素不占据空间
具备内联盒子特性：宽度由内容决定
具备块级盒子特性：支持所有样式
绝对定位元素相对于最近的非 static 祖先元素定位，当祖先元素不存在时，则相对于可视区定位

固定定位

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗（可视区）本身。

黏性定位

sticky

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。