10分钟了解页面布局

太久没看过了，这里回顾一下页面的基础还原方法，有点累。

正文

盒子模型这种传统的东西就不提了，这里直接提几种布局模式。

block，inline与inline-block

• 行内标签

1，行内标签无法设置宽高

2，行内标签不会独占一行，会连续占满一行，直到换行

3，行内元素不能包含块级元素，只能容纳文本或者其他行内元素

• 块状元素

1，块状标签可以设置宽高度

2，块元素独占一行

3，块属性标签的宽度假如不做设置，会直接默认为父元素宽度的100%

4，块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素

• 行内块元素

1，结合的行内和块级的优点:能够设置宽高，并且在一行内独立显示

float

1. 如果父元素不设置高度，会引起父元素塌陷 
2. 元素浮动，引起同行兄弟元素占位，导致页面错乱

常用的元素塌陷处理方式

1. 直接给父元素设置高度
2. 使用clear:both清空浮动（如果不清楚这个属性是干什么的，可以去W3C官网看看，很容易理解的）
3. 给父元素加overflow:hidden
4. 给父元素添加浮动，父子元素一起浮动，就没问题了;

position

默认定位（static），不会让div或者其他元素脱离文档流，而是遵循排版的原则，从上到下，块级元素换行，行内元素不换行等等通用原则。所以，如果不用定位属性，那么这个position就不用设置。

相对定位（relative），相对于元素原本的位置进行位移，原本的位置不为空，仍然已经位移的该元素继续占用

绝对定位（absolute），相对于元素的父元素最左上角进行坐标定位，会脱离文档流，产生类似浮动的效果

固定定位（fixed），相对于当前窗口最左上角进行坐标定位

粘性定位（sticky）， 基于用户的滚动位置来定位，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 **position:fixed;**，它会固定在目标位置，常常用来做页面的顶部标签。

这里要注意以下两点：

1. 定位是相对于父元素进行定位的，如果父元素没有设置定位属性，则相对于BODY标签进行定位。
2. 如果父元素没有设置定位的话，那么，绝对定位是相对于body标签进行定位的。
3. 如果父元素设置了相对定位，绝对定位，固定定位，任意一种，那么，绝对定位相对于父元素左上角进行定位。

flex

移动端常用的解决方式，懒得写。

参考：一文吃透 CSS Flex 布局 - 掘金 (juejin.cn)

grid

参考：最强大的 CSS 布局 —— Grid 布局 - 掘金 (juejin.cn)

结语

说实话，不是很想写这篇，但是我自己回忆这些内容的时候，发现太过熟悉以至于卡壳了。

不得已，写了这篇内容回忆一下以前熟的发昏的内容。

参考链接

切图仔基础篇————块级元素与行级元素

切图仔基础篇————如何熟练的使用定位

切图仔基础篇————浮动问题浅析

菜鸟驿站，css定位