牛客前端宝典——刷题 ##Day8

🍀作者简介：在校大学生，为前端方向努力拼搏的一名追梦人。

🍁个人主页：亦世凡华、

🫒系列专栏：牛客前端宝典

🍂想要和博主一起学习前端或想巩固自己知识，可以点击链接：牛客网 推开自己的世界之门。

🏍️任性的要求我从来没提过，只想你能每天关注我。

🥥前言：

🏆编程就像我们平常做题一样，如果只是一味的学习不去做题的话所得到的效果微乎其微。因此我也是在网上寻找了很多题库但一直用的不舒心，直到找到了牛客，我才找到了学习做题的乐趣，不仅其能够很系统的将所学知识点梳理学习，也因其代码整洁题解清楚明了让人很快掌握知识。为此我是愿意和大家分享出来，一起学习。

今天我们讲解 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。不需要设置行属性，当有多个元素时容器会自适应的往下顺次排列。此时观察容器的高度，是根据容器项中高度最高的那一项决定的，也不会产生台阶式效果。

根据题目所示，讲解的是页面布局中的三列布局代码格式规范，现在开始解题。

描述五：三列布局-圣杯布局

 不像Flexbox或Grid布局可以控制元素显示的次序，圣杯布局是通过浮动元素和外边距属性实现三列布局，但最重要的一点是，在文档中需要将优先渲染的内容写在最前方，但显示时看起来却好像是按照显示次序书写的一样。
 首先给类名为"container"的盒子添加"overflow: hidden"和"padding: 0px 100px"属性，以为了防止容器盒子高度塌陷和给之后的左、右浮动元素预留位置。现在继续给类名为"left"的盒子添加以下属性：
1. "float: left"，浮动，保证之后的"margin-left"属性可以将自身拉到上一行
2. "width: 100px"，固定宽度
3. "margin-left: -100%"，该属性可以将元素向左移动属性值的单位，100%相对于父容器计算
4. "position: relative"，相对定位，需要将自身再向左移动自身的宽度，进入容器的"padding-left"区域
5. "left: -100px"，自身的宽度，刚好进入容器的"padding-left"区域
 到这里圣杯布局中最核心的步骤和思想就完了。之后继续给类名为"right"的盒子添加"float: left"、"width: 100px"、"margin-left: -100px"、"position: relative"和"left 100px"属性，该右盒子的思想和左盒子一样，即，将右盒子向上拉一行并且再向右移动自身宽度进入"padding-right"区。最后再给类名为"center"的盒子添加"float: left"和"width: 100%"即可。此时中间内容区的宽度是自适应的，并且因为有内边距属性所以内容不会被两边的浮动盒子遮挡住。
 圣杯布局需要注意的是，当中间内容区域的宽度小于左、右盒子的宽度时，整个布局就会混乱，所以为了避免这种情况，再给容器盒子添加"min-width: 100px"属性，保证圣杯布局正确、有效。

根据题目所示，讲解的是页面布局中的三列布局代码格式规范，讲解的圣杯布局对于大部分人有点陌生，因此将代码附列如下，现在开始解题。

html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                border: 1px solid black;
                overflow:hidden;
                padding:0px 100px;
                min-width:100px;
            }
            .left {
                background-color: greenyellow;
                float:left;
                width:100px;
                margin-left:-100%;
                position:relative;
                left:-100px;
            }
            .center {
                background-color: darkorange;
                float:left;
                width:100%;
 
            }
            .right {
                background-color: darkgreen;
                float:left;
                width:100px;
                margin-left:-100px;
                position:relative;
                left:100px;
            }
        style>
    head>
    <body>
    	<section class="container">
            <article class="center"><br /><br /><br />article>
            <article class="left"><br /><br /><br />article>
            <article class="right"><br /><br /><br />article>
        section>
    body>
html>

描述六：三列布局-双飞翼布局

 双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有"padding"属性的。
首先给类名为"container"的盒子添加"overflow: hidden"属性，解决子浮动元素导致的高度塌陷问题。然后继续给类名为"left"的盒子添加"float: left"、"margin-left: -100%"和"width: 100px"。再给类名为"center"的盒子添加"float: left"和"width: 100%"属性，该盒子并没有像圣杯布局时添加"padding"属性那样。继续给类名为"right"的盒子添加"float: left"、"width: 100px"和"margin-left: -100px"。最后给类名为"main"的盒子添加"margin: 0px 100px"，该属性为双飞翼布局的核心点，使用外边距将内容封锁在两边浮动元素的中间。

根据题目所示，讲解的是页面布局中的三列布局代码格式规范，现在开始解题。

每次做完题提交成功的话都会弹框配带音乐鼓励你，我很庆幸，因为我找到了牛客。  

个人总结： 

今天题目就讲解到这，承接对上篇文章的内容对知识进一步加深学习，人的记忆可能会遗失，但人的潜力是无限的。每天刷题一次，对已学的知识不断巩固，这样的人是很容易成功的。牛客讲真的确是一个好的刷题网站，对于基础薄弱的人来说不亚于福音，如果认同我的话，就点击右边链接注册刷题吧🥑：牛客网

加油！！！未来伟大的前端工程师，可能就是你~~，点个关注一起加油！冲！