css常见布局方式

固定布局（静态布局）

由于最开始时人们之间显示器的屏幕大小没有什么差异，因此以像素作为基本单位的布局方式在当时很流行。特点就是宽度都是固定的，所以内容并不会随着浏览器页面的大小而改变，也就是说，因为像素是绝对单位，所以用像素规定了内容有多大，它就会严格地按照大小要求呈现，并且居中布局。

后来显示器的款式越来越多，大小也不一样，所以之前写的固定大小的网页缺点就出来了， 缺点也非常明显。当浏览器的页面小时，无法显示网页的而所有内容；当浏览器的页面大时，两侧的空白过大。

应用场景：主要是在pc端使用。如：百度pc门户页面。

流动布局（流式布局）

针对上面这种情况下，流动布局运时而生
流式布局又称为百分比布局。随着屏幕的变化，页面的布局没有发生大的变化，进行适配调整，如栅栏，各模块之间使用了百分比。可以理解为静态布局的升级版，流式布局 = 静态布局 + 百分比布局；

优点：元素的宽高用百分比做单位，元素宽高随分辨率调整，布局变化不大。

缺点：屏幕尺度跨度过大的情况下，px部分不变化，百分比部分变化大，会显得页面展示非常不协调。

应用场景：左侧固定+右侧自适应、左右固定宽度+中间自适应，也主要用在pc端。

缺点就是文字无法进行流动

自适应布局

通过@media媒体查询，设置不同分辨率下设置对应的样式，可以理解为500～800是一种样式的展示，800～1000又是一种样式的展示，1000～1200又是一种样式设置。

优点：可以在已知的范围内实现对应屏幕的自适应。

缺点：对于未知的宽度不能自适应。

应用场景：pc和移动都可以使用

弹性布局flex

css3引入的布局方式

优点：方便、简单

缺点：存在兼容性问题。

应用：对于pc端的整体布局应用的不多，适合用在pc布局的局部，主要是用在移动端整体布局。

响应式布局：

响应式布局 = 自适应布局 + 流式布局 ；主流的做法是通过js计算根节点的rem来实现在不同屏幕下实现响应式布局，可以理解为自适应布局的精细版本。是目前最优秀的布局。

优点：适配pc和移动端，

缺点：对于一些屏幕情况需要特殊的处理。

参考：https://blog.csdn.net/weixin_43553755/article/details/117527726