CSS布局中的尺寸和定位
CSS盒模型
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括:外边距、边框、内边距以及实际的内容。下图展示了框模型:
需要注意的点:
-
padding不能为负值,而margin可以为负值
-
背景色会平铺到非margin的区域
-
margin-top传递的现象及解决方案
-
margin上下叠加的现象以及解决方案
块级盒子与内联盒子
块级盒子
-
独占一行
-
支持所有样式
-
不写宽度的时候,跟父容器的宽度相同
-
所占区域是个矩形
内联盒子
-
盒子不会产生换行
-
有些样式不支持,例如:widthheight等
-
不写宽度的时候,宽度由内容决定
-
所占的区域不一定是矩形
-
内联标签之间会有空隙
浮动与清除浮动
浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
右浮动:
当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
左浮动:
当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
清除浮动
clear属性
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
BFC
空标签
利用空标签撑起来
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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 |
.clearfix::after{} 伪类
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
浮动的特点
-
只会影响后面的元素
-
- 之前的元素不会受到影响
-
文本不会被浮动元素覆盖
-
- 浮动是为了排版设计的
-
具备内联盒子特性:宽度由内容决定
-
- div加浮动,宽度由内容决定
-
具备块级盒子特性:支持所有样式
-
- span加浮动的时候,可以支持宽高
-
浮动放不下,会自动换行
-
- 父容器装不下就自动换行
定位样式详解
通过使用 position 属性,我们可以选择 5 种不同类型的定位,这会影响元素框生成的方式。
相对定位
relative
-
相对定位的元素是在文档中的正常位置偏移给定的值
-
不影响其他元素布局
-
相对于自身进行偏移
绝对定位
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
-
绝对定位的元素脱离了文档流,绝对定位元素不占据空间
-
具备内联盒子特性:宽度由内容决定
-
具备块级盒子特性:支持所有样式
-
绝对定位元素相对于最近的非 static 祖先元素定位,当祖先元素不存在时,则相对于可视区定位
固定定位
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗(可视区)本身。
黏性定位
sticky
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。