CSS 布局模型详细介绍
source link: https://knightyun.github.io/2018/05/04/css-layout-model
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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等调整固定的位置。还记得浏览器某些网页右下角的小广告吗，是不是固定在那怎么浏览网页都不动 -_- .
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK