🍁个人主页：亦世凡华、
🫒系列专栏：牛客前端宝典
🍂想要和博主一起学习前端或想巩固自己知识，可以点击链接：牛客网 推开自己的世界之门。
🏍️任性的要求我从来没提过，只想你能每天关注我。
🥥前言：
🏆编程就像我们平常做题一样，如果只是一味的学习不去做题的话所得到的效果微乎其微。因此我也是在网上寻找了很多题库但一直用的不舒心，直到找到了牛客，我才找到了学习做题的乐趣，不仅其能够很系统的将所学知识点梳理学习，也因其代码整洁题解清楚明了让人很快掌握知识。为此我是愿意和大家分享出来，一起学习。
今天我们讲解 CSS布局 类型的题库：点个关注我们继续走下去。
目录
单列布局
描述一：单列布局
双列布局
描述一：双列布局-浮动
描述二：双列布局-绝对定位
描述三：双列布局-flex
描述四：双列布局-grid
三列布局
描述一：三列布局-浮动
描述二：三列布局-绝对定位
描述三：三列布局-flex
描述四：三列布局-grid
描述五：三列布局-圣杯布局
描述六：三列布局-双飞翼布局
单列布局
描述一：单列布局
单列布局是将头部、内容区、底部在页面上垂直排列，是非常实用的一种布局方式。主要对三个区域的宽度进行统一，然后通过设置自动外边距进行居中。
现在给"header"、“section”、“footer"三个盒子统一设置"margin: 10px auto”、“width: 360px”、"border: 1px solid black"属性。此时因为内容区有内容而头部和底部没有内容所以只有内容区的高度被撑开，一般头部和底部的内容是根据自己的需求固定大小的，所以现在再给头部和底部统一设置高度，即"height: 32px"。
根据题目所示，讲解的是页面布局中的单列布局代码格式规范，现在开始解题。
双列布局
描述一：双列布局-浮动
自适应的双列布局利用浮动、外边和触发父级BFC即可实现，这种方法主要是因为BFC的高度计算会包含其内的浮动元素的高度，父盒子会被撑开。
现在给类名为"container"的父盒子添加"overflow: hidden"属性，使该父盒子成为BFC。继续给类名为"left"的盒子设置"float: left"和"width: 100px"属性，使该盒子成为浮动元素并且需要一个固定的宽度。最后再给类名为"right"的盒子设置左外边距"margin-left: 100px"属性，该属性值需要和左浮动的盒子宽度一致。此时父盒子的高度会根据左边浮动元素、右边内容区中高度较高的一方进行计算，并且右边内容区的宽度自适应，最好是根据需要，配合最大或最小宽度进行设置。
根据题目所示，讲解的是页面布局中的双列布局代码格式规范，现在开始解题。
描述二：双列布局-绝对定位
通过绝对定位实现的双列布局看起来会比较僵硬，因为父盒子首先需要设置定位属性并且父盒子的高度无法被子盒子撑开，如果子盒子的高度是自适应的，那么父盒子的高度也就无法确定从而设置了，但优点是设置属性比浮动来得更直观。
现在给类名为"container"的父盒子添加"position: relative"属性，为了保证子盒子绝对定位时不会根据html元素定位。继续给类名为"left"的盒子添加"position: absolute"、"left: 0"和"width: 100px"三条属性，使该盒子定位到父盒子的最左边并且赋予宽度，但高度是根据内容自适应的。最后给类名为"right"的盒子添加"position: absolute"、"left: 100px"和"right: 0px"，因为该盒子没有给定宽度，设置"left"和"right"定位属性会使内容区保留在这个范围内，同样实现了自适应。
根据题目所示，讲解的是页面布局中的双列布局代码格式规范，现在开始解题。
描述三：双列布局-flex
通过Flexbox可以快速实现双列布局，主要通过"flex: 1"这条弹性项属性给内容区申请到父盒子的所有剩余空间，并且可以给弹性项设置"position"属性调整弹性项内部的子盒子细节。
现在给类名为"container"的父盒子添加"display: flex"属性，使该盒子成为弹性盒容器。继续给类名为"left"的弹性项盒子添加"width: 100px"属性。最后给类名为"right"的弹性项盒子添加"flex: 1"属性。由于弹性项盒子默认占满弹性容器盒子的所有高度，所以两个弹性项盒子的高度也是自适应。右边的内容区宽度会占满弹性容器盒子的剩余空间，所以宽度也是自适应的。
根据题目所示，讲解的是页面布局中的双列布局代码格式规范，现在开始解题。
描述四：双列布局-grid
使用Grid网格布局实现双列布局的要点在于列数为2，且首列的宽度根据需要自行设置，第二列使用片段"fr"属性进行自适应即可。行数不需要指定，每行会根据内容高度进行自适应缩放。
现在给类名为"container"的盒子添加"display: grid"属性，使该盒子成为容器。再给该容器添加"grid-template-columns: 100px 1fr"属性，表示第一列宽度始终为100px，第二列的宽度为剩余的所有空间。此时可以看到整个容器的高度因为首列的内容被撑开了，并且右边内容区实现了自适应。
根据题目所示，讲解的是页面布局中的双列布局代码格式规范，现在开始解题。
三列布局
描述一：三列布局-浮动
使用浮动实现三列布局的注意点是浮动元素需要写在内容元素之前，否则布局是混乱的。这种方式实现三列布局是优点是简单、兼容性好，但缺点是需要清除浮动，否则父盒子的高度无法撑开，可能会导致其他页面元素的布局混乱。
首先给类名为"container"的盒子添加"overflow: hidden"属性，该属性可以使盒子成为BFC，处理浮动元素父盒子高度塌陷的问题。再给类名为"left"的盒子添加"float: left"和"width: 100px"两条属性，首先往左浮动，宽度这里设置100px。继续给类名为"right"的盒子添加"float: right"和"width: 100px"两条属性，往右浮动。最后给类名为"center"的盒子设置外边距"margin: 0px 100px"，该属性上下外边距为0px，左右外边距为两边浮动元素的宽度100px，这样保证了中间的内容区域不会被两边的浮动元素覆盖住。注意，HTML文档中两个浮动元素的顺序在内容元素之前。
根据题目所示，讲解的是页面布局中的三列布局代码格式规范，现在开始解题。
描述二：三列布局-绝对定位
使用绝对定位实现三列布局，实际上是和之前使用绝对定位实现双列布局同一个原理。主要思路是，两边通过绝对定位定位到父盒子的左、右边框上，再根据实际的需要设置两边盒子的宽度，高度是根据内容自适应的。中间内容区通过定位属性左、右自适应宽度。
现在给类名为"container"的盒子添加"position: relative"，该属性使子元素可以相对该盒子做定位。继续给类名为"left"的盒子添加"position: absolute"、"left: 0px"和"width: 100px"三条属性。继续给类名为"right"的盒子添加"position: absolute"、"right: 0px"和"width: 100px"三条属性。最后给类名为"center"的盒子添加"position: absolute"、"left: 100px"和"right: 100px"三条属性，表示自适应区域为距离左边100px至距离右边100px。此时可以看到三个盒子的高度不同，根据内容高度撑开，实际中可以按需设置高度值。
根据题目所示，讲解的是页面布局中的三列布局代码格式规范，现在开始解题。
描述三：三列布局-flex
相比于浮动和定位，使用Flexbox布局实现三列布局要更好，因为弹性容器的高度会根据最高的弹性项进行修正，不会出现明显的台阶式效果。Flexbox实现三列布局的特点为简单、使用、强大，核心思路为设置中间内容盒子的"flex: 1"属性，让中间内容区的宽度自适应，独自占据弹性容器的全部剩余空间。
现在给类名为"container"的盒子添加"display: flex"属性，使该盒子成为弹性容器。再给类名为"left"和"right"的盒子添加"width: 100px"属性，最后给类名为"center"的盒子添加"flex: 1"属性，使该盒子占据容器盒子的全部剩余空间。此时会发现即使三个子盒子的内容高度不同，但容器和子会根据最高的子元素进行修正，并且没有出现浮动和定位中的台阶式效果。
根据题目所示，讲解的是页面布局中的三列布局代码格式规范，现在开始解题。
描述四：三列布局-grid
使用grid网格布局实现三列布局，和之前所讲的gird实现双列布局是同样的思想，只是把列数变为了3，高度依然不设置，通过容器项的内容高度自适应撑开整体高度。
现在给类名为"container"的盒子添加"display: grid"属性，使该盒子成为网格布局容器。再给该容器添加"grid-template-columns: 100px auto 100px"属性，表示该容器一共有3列，且宽度分别为100px、自适应、100px。不需要设置行属性，当有多个元素时容器会自适应的往下顺次排列。此时观察容器的高度，是根据容器项中高度最高的那一项决定的，也不会产生台阶式效果。
根据题目所示，讲解的是页面布局中的三列布局代码格式规范，现在开始解题。
最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
/f5e35d096c1f46dcabd7f18a43c1d734.png)
最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-FCZkuGfl-1714731302269)]
[外链图片转存中…(img-K0W1iTvj-1714731302271)]
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
