css布局模型详细介绍

---

文章出自个人博客https://knightyun.github.io/2018/05/04/css-layout-model转载请申明

---

HTML中元素有三种布局模型：流动模型、浮动模型、层模型。

流动模型（flow）

HTML网页默认布局就是流动模型，布局如下：

块级元素(block)自上而下垂直分布，因为块级元素默认宽度为浏览器窗口的100%，或者理解为每个块级元素默认占一行。常见块级元素有 div, p, h 等；

内联元素(inline)从左到右水平分布，即不像块级元素那样每个独占一行。常见内联元素有 a, span, em 等。

浮动模型（float）

上面提到的块级元素是每个独占一行显示，但是定义css浮动模型后就能使两个块级元素并排一行显示。
例如HTML代码：

<div id = "div1">
    <p>Hello</p>
</div>
<div id = "div2">
    <p>World !</p>
</div>

显示结果是这样：

Hello
World !

但是设置浮动css后：

div {
float: left;
}

效果就是这样：

HelloWorld !

也可以设置元素一左一右显示：

#div1 {
float: left;
}

#div2 {
float: right;
}

层模型（layer）（position）

类似于PS中的图层编辑，HTML中也存在层模型布局，对元素进行定位。
层模型有三种：绝对定位(absolute)、相对定位(relative)、固定定位(fixed)。

绝对定位

理解就是字面上的意思，简言之就是相对于上级设置了 position 属性的元素进行定位，如果没有这类上级就是相对于 body 标签，也是浏览器窗口。需要设置css：position: absolute;，然后就可以使用 top, right, bottom, left 这类属性进行定位。例如：

div {
position: absolute;
top: 100px;
left: 150px;
}

这样就使板块向下移动100像素，向右移动150像素。

相对定位

这里的相对较难理解，与数理中的“相对”不太一样，这里是“相对于自己原来应在的位置”，需要设置css：position: relative;，重要的是不用关心上级是否设置了position属性，这样就很方便。例如：

div {
position: relative;
top: 100px;
right: 100px;
}

板块就相对于自己没设置样式前的位置，同时向左向下移动100px。

固定定位

这个就好理解了，所谓固定就是指固定于整个浏览器网页窗口不动，即使滚动网页内容也不改变位置，需要设置css：position: fixed，也可以设置 top, right等调整固定的位置。还记得浏览器某些网页右下角的小广告吗，是不是固定在那怎么浏览网页都不动 -_- .

---

技术文章推送

手机、电脑实用软件分享