1.左右浮动 设置宽高 中间设置高 宽度自适应 2.bfc：左右浮动 中间overflow：hidden 3.flex布局 父元素设置flex 中间元素 设置flex-grow：1
发表于 2022-05-13 11:45:56
回复(0)
三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。 这里以左边宽度固定为100px，右边宽度固定为200px为例。 （1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。 （2）利用flex布局的方式，左右两栏的宽度分别设置为100px和200px，中间一栏增长系数设置为1 （3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。 （4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。圣杯布局中间列的宽度不能小于左边列的宽度，否则左边列上不去，而双飞翼布局则不存在这个问题。 （5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
发表于 2022-08-15 19:31:31
回复(0)
三栏布局：左右两栏宽度固定，中间自适应布局。中间都是需要margin的 方法一：利用绝对定位right{position：absolution，width：200px，height：200px，top：0，right：0}，left{position：absolution，width：200px，height：200px}center{ margin-left: 100px; margin-right: 100px;} 方法二：利用flex布局，将center设为flex：1，两边固定大小就好。 方法三：利用float。.left { float: left; width: 100px; height: 100px; background: tomato; } .right { float: right; width: 200px; height: 100px; background: gold; } .center { height: 100px; margin-left: 100px; margin-right: 200px; background: lightgreen; } 方法四：圣杯布局 将中间左右设置左浮动，中间宽度100%，左magin-left：-100%，右magin-left：200px（右盒子宽度为200px），发现左右有挡住中间内容，则设置整个大盒子的padding：0 200px，给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。左：position：relative，left：-200px，右：position：relative，right：-200px。圣杯布局的实现方案：三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，父级盒子设置左右`padding`，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开 解释：magin-left：-100%这个百分比是以父元素内容长度的百分比，圣杯布局的左的父元素contain，contain里包含者着中左右。双飞翼布局：contain只包含center 方法五：双飞翼布局 双飞翼布局： - 优点：不会像圣杯布局那样变形，CSS样式代码更简洁 - 缺点：多加了一层dom节点 双飞翼布局的实现方案：三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置`margin`,三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开
编辑于 2022-06-07 12:15:24
回复(1)
CSS盒模型定义了盒的每个部分包含 margin, border, padding, content 。根据盒子大小的计算方式不同盒模型分成了两种，标准盒模型和怪异盒模型。 标准模型，给盒设置 `width` 和 `height`，实际设置的是 content box。`padding` 和 `border `再加上设置的宽高一起决定整个盒子的大小。 怪异盒模型，给盒设置 `width` 和 `height`，包含了`padding`和`border `，设置的 `width` 和 `height`就是盒子实际的大小 默认情况下，盒模型都是标准盒模型 设置标准盒模型：`box-sizing:content-box` 设置怪异盒模型：`box-sizing:border-box`
编辑于 2022-05-09 13:54:57
回复(0)
双飞翼布局的这句话“右边盒子设置右边距-自身宽度”应该是设置左边距才对，我是根据一句句代码写的发现了这个问题，如果是右边距的话就会看不到右边盒子
发表于 2022-11-23 22:35:18
回复(0)
三栏布局，要求左右两边盒子宽度固定，中间盒子宽度自适应，盒子的高度都是随内容撑高的，一般都是中间盒子内容比较多，为了保证页面渲染快，在写结构的时候，需要把中间盒子放在左右盒子的前面。实现三栏布局的方法通常是圣杯布局和双飞翼布局。圣杯布局的实现方案：三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，父级盒子设置左右padding，三个盒子全都浮动，设置中间盒子高度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开，圣杯布局的优点是不需要添加dom节点，缺点是当middle部分的宽小于left部分时会发生布局混狂；双飞翼布局：三个盒子对应三个元素，其中中间盒子套了两层，中间盒子设置margin，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%，右边盒子右边距-自身宽度，最后父级盒子清除浮动，否则，父级盒子高度无法被撑开
发表于 2022-08-30 22:36:48
回复(0)
1、浮动实现：设置一个父盒子container，其中有三个子盒子排序为left、right、center，left盒子float为left，宽度为100px，right盒子float为right，宽度为150px，此时展示出三栏布局，但是center盒子被浮动盒子覆盖了，因此center盒子设置overflow为hidden，再给containeer清除浮动。 2、flex实现：给父盒子container设置display为flex，其中有三个子盒子排列顺序为left、center、right，left盒子宽度为100px，right盒子宽度为150px，再给container设置justify-content为space-between，给center盒子flex为1，此时展示出三栏布局的样子，但是当center盒子被文字内容过于撑宽时，对导致两边盒子宽度被压缩，此时可以为leftright盒子设置flex-shrink为0。 3、圣杯布局：父盒子container中包含三个子盒子排列顺序为center、left、right，给三个子盒子设置浮动float为left，left盒子设置width为100px，right盒子设置width为150px，center盒子设置width为100%，所以我们先给父盒子container设置左右padding分别为100px和150px，left盒子margin-left为-100%，left盒子position为relative，left值为-100px，为right设置margin-right为-150px，实现了三栏布局。 4、双飞翼布局：三个盒子排列顺序为container、left、right，给这三个盒子设置浮动float为left，container盒子设置width为100%，left盒子设置width为100px，right盒子设置width为150px，container盒子中包含一个子盒子center，container中包含一个子盒子center，给center盒子设置左右margin为100px和150px，给left盒子设置margin-left为-100%，给right盒子设置margin-left为-150px，此时展示出三栏布局。
发表于 2023-06-27 14:01:56
回复(1)
1.浮动+margin:左右浮动，中间左右留出左右块区域 2.浮动+BFC:左右浮动，中间元素启动overflow:hidden使得元素环绕块级元素 3.flex布局：大容器设置flex布局，左右设置宽度，中间flex:1自动撑开 4.table布局:左右中设置table-cell，左右添加宽度 5.定位：左右绝对定位，left:0和right:0，中间元素左右margin 6.圣杯布局：整理进行居中，左右中都进行左浮动，中间元素width:100%，左边元素margin-left:-100%,右边元素margin-right:-盒子宽度,左右元素在进行相对定位 7.双飞翼布局:与圣杯布局相似，中间元素外加div，在外div设置float:left width:100%
发表于 2023-02-16 22:29:07
回复(0)
三栏布局，要求左右两边盒子宽度固定，中间盒子宽度自适应，盒子的高度都是随内容撑高的，一般都是中间盒子内容比较多，为了保证页面渲染快，在写结构的时候，需要把中间盒子放在左右盒子的前面。实现三栏布局的方法通常是圣杯布局和双飞翼布局。圣杯布局的实现方案：三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，父级盒子设置左右padding，三个盒子全都浮动，设置中间盒子高度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开，圣杯布局的优点是不需要添加dom节点，缺点是当middle部分的宽小于left部分时会发生布局混狂；双飞翼布局：三个盒子对应三个元素，其中中间盒子套了两层，中间盒子设置margin，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%，右边盒子右边距-自身宽度，最后父级盒子清除浮动，否则，父级盒子高度无法被撑开
发表于 2022-07-17 10:12:57
回复(0)
CSS盒模型定义了盒的每个部分包含 margin, border, padding, content 。根据盒子大小的计算方式不同盒模型分成了两种，标准盒模型和怪异盒模型。 标准模型，给盒设置 `width` 和 `height`，实际设置的是 content box。`padding` 和 `border `再加上设置的宽高一起决定整个盒子的大小。 怪异盒模型，给盒设置 `width` 和 `height`，包含了`padding`和`border `，设置的 `width` 和 `height`就是盒子实际的大小 默认情况下，盒模型都是标准盒模型 设置标准盒模型：`box-sizing:content-box` 设置怪异盒模型：`box-sizing:border-box`
发表于 今天 13:24:46
回复(0)
圣杯布局、双飞翼布局；1、左右浮动，固定宽高，中间固定高度，宽度自适应；2、利用bfc布局左右福鼎，中间设置overflow：hidden；3、flex布局，父元素display：flex；中间元素设置flex-grow：1
发表于 2024-05-15 14:54:25
回复(0)
1圣杯布局：三个元素放在同个父级元素下，中间盒子元素放在最前面，父级盒子设置左右padding，三个盒子全部浮动，设置中间盒子宽度100%，左边盒子设置特定宽度x，margin-left:-100%,position:relative,left:-x.右边盒子设置特定宽度y,right:-y 2双飞翼布局:三个盒子排列顺序container left right 给三个盒子设置浮动left 其中container包含一个center盒子，center设置左右margin 左边盒子设置margin-left:-100% 右边盒子设置margin-left:-y(右边盒子宽度y)
编辑于 2024-04-16 00:21:51
回复(0)
1、使用display:flex；实现，中间一列设置flex:1; 2、圣杯布局，通过float 和相对定位实现。center在最前面，通过center的padding为left、right两列留出位置，接下来通过left设置负外边距为100%，right设置负外边距为自身的宽度，然后设置left位置left:为它本身宽度的负值，right设置right为它本身宽度的负值。 3、双飞翼布局：center通过margin外边距为左右元素留出位置，其他同圣杯布局
编辑于 2024-04-10 10:17:07
回复(0)
问题信息
相关试题
-
扫描二维码，关注牛客网
- 意见反馈
-
下载牛客APP，随时随地刷题
扫一扫，把题目装进口袋
- 求职之前，先上牛客
-
扫描二维码，进入QQ群
扫描二维码，关注牛客公众号
- 公司地址：北京市朝阳区北苑路北美国际商务中心K2座一层-北京牛客科技有限公司
- 联系方式：010-60728802 投诉举报电话：010-57596212（朝阳人力社保局）
- 牛客科技© All rights reserved admin@nowcoder.com
- 京ICP备14055008号-4 增值电信业务经营许可证 营业执照 人力资源服务许可证
-
京公网安备
11010502036488号
