css的面试题前端主流布局系统进阶与实战css面试题及答案2022奔走相告，

为一个开发小白，也是第一次编写博客文章，前端主流布局系统进阶与实战若有错误请各位大牛大佬指正，轻喷！！！

必看！如何download课程

我在学校接触最多的就是前端，然后最近在学习新的前端知识，发现前端布局常见的有很多种，不同的应用场景有不同的布局方式，下面就来简单介绍一下吧。

静态布局浮动布局定位布局栅格布局table布局弹性（flex）布局圣杯布局自适应布局流式布局响应式布局

2前端常用布局方式

大部分前端布局都是自上而下，或者自左而右；并且不同的布局能够给用户带来不一样的体验，好的更是能瞬间吸引用户。

21静态布局

静态布局常见于pc端，是给页面设定固定的宽高且居中布局，web网站开发的单位一般用px。

特点：不管页面多大，始终都是用初始设置的值，一般是定宽相当于min-width。优点：简单，没有兼容性问题。现在还有一些门户网站和企业官网在用，他们有些设备的尺寸是固定的，这个静态布局就适合了。而且对于刚入门的技术小白是很适合学习也很容易接受。缺点：不会随着屏幕的大小而变化。下面是一个静态布局的例子：

静态布局

22浮动布局

浮动布局是调用浮动属性来使得元素向左或者向右移动从而共享一行，直到碰到包含框或者另一个浮动框。浮动元素是脱离文档流的，不占据页面空间，但不脱离文本流，且浮动会将行内元素和行内块元素转化为块元素。

特点：

脱离标准普通流的控制(浮)移动到指定位置(动),(俗称脱标)。浮动的盒子不再保留原先的位置，会一行内显示并且元素顶部对齐。浮动的元素会具有行内块元素的特性。

优点：

排版友好，例如图文排版或者首字母下沉排版等。兼容性好。

缺点：需要调整网站布局对代码改动很大，页面的宽度不够会影响布局。浮动是脱标的，那么就无法撑起父元素造成塌陷。这里我使用文字环绕的例子：

浮动布局

注：在上面的例子中我们可以看到浮动元素下面文字没有受到影响，是因为在下面的 div 的样式加了 clear:both 来清除浮动（一般是四种，clear:both 比较常用）的影响。扩展：一般浮动布局可以使用样式 box-sizing:border-box;来确保每个盒子的宽高（包括内边距和边框）不会因为扩大而破裂，可以轻松使用浮动布局。

23定位布局

定位布局是给元素设置 position 属性从而控制元素显示在不规则的位置，偏向于单个元素定位操作。position 有五个选项值：

static 静态定位：页面元素定位的默认值，出现在正常流中；fixed 固定定位：元素相对于页面窗口是固定位置的，即使窗口滚动它也不会移动，fixed 属性是脱离文档流的，不会占据空间，但会重叠其他元素之上；例如侧边导航条的固定定位等。relative 相对定位：以自身作为参照物，对象不可层叠、不脱离文档流，移动相对定位元素，但它原本所占的空间不会改变。通过 top, bottom, left, right 定位；absolute 绝对定位，选择最近一个设置有相对定位的父元素进行绝对定位，若没有则以 body 的坐标原点为参照。与其他元素重叠，脱离文档流，不占空间，通过 top, bottom, left, right 定位；sticky 粘性定位：基于滚动位置来定位，在 relative 和 fixed 之间切换，当超出页面目标区域时，就是 fixed 固定在目标位置，否则为 relative；元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。

这些不同的定位在不同的场景有不同的作用，这里就不一一列举。

特点：定位布局中不同的属性有各自的特点，最明显的是使用定位的元素独立开来。优点：无需考虑元素的显示方式和位置，直接独立定位，方便控制。缺点：很难预测各元素之间是否有影响，例如重叠覆盖等。以父元素相对子元素绝对布局为例：

定位布局

注：在上面的例子中我们可以看到子元素居中于父元素，这里是绝对定位配合使用 transform: translate(-50%,-50%);来居中布局。

24栅格布局

栅格布局也被称为网格布局，它是一种新兴的布局方式，常用的有瀑布流（每列的项目高度是随机的，根据自身的内容而定，详细可以看这个）。栅格布局是二维的，包含了行和列，与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用，且它的布局很简单，就是把一个区域划分为一个个的格子排列好，再把需要的元素填充进去。它的应用场景没有弹性布局和浮动布局多，因为有些浏览器对它的支持性较不好。详细可以看这位大佬的css栅格布局

特点：重视比例、秩序、连续感和现代感。以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡，以便让信息可以更快速、更便捷、更系统和更有效率的读取；另外最重要的一点是，负空间的规划（即：留白）也是栅格系统设计当中非常重要的部分---wiki优点：

能大大的提高网页的规范性和可重用性。在栅格系统下，固定和灵活的尺寸，这对于大型网站的开发和