qklbysj 三栏布局的实现方式，尽可能多写，浮动布局时，三个div的生成顺序有没有影响-笔试面试资料
这是qklbishe.com第4845 篇笔试面试资料
提供答案分析，通过本文《三栏布局的实现方式，尽可能多写，浮动布局时，三个div的生成顺序有没有影响-笔试面试资料》可以理解其中的代码原理,这是一篇很好的求职学习资料
本站提供程序员计算机面试经验学习,笔试经验,包括字节跳动/头条,腾讯,阿里,美团,滴滴出行,网易,百度,京东,小米,华为,微软等互联网大厂真题学习背诵。
答案：
三栏布局的实现方式，尽可能多写，浮动布局时，三个div的生成顺序有没有影响
Mr.mǎ. 三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有如下五种方式实现
left 为300px，right 为200px
1、利用浮动
原理：浮动元素脱离文档流
html结构
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
css 样式
.left {
float: left;
width: 300px;
height: 400px;
background-color: limegreen;
}
.right {
float: right;
width: 200px;
height: 400px;
background-color: yellowgreen;
}
.center {
height: 400px;
margin: 0 200px 0 300px;
background-color: tomato;
}
2、利用绝对定位
原理：绝对定位元素脱离文档流
html结构同上
css 样式
.wrapper {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 500px;
background-color: lightgreen;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 500px;
background-color: lightskyblue;
}
.center {
height: 500px;
margin: 0 200px 0 300px;
background-color: tomato;
}
3、利用 flex 布局
原理：利用了容器项目 order 属性的特点
html结构
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
css样式
.wrapper {
display: flex;
height: 500px;
}
.center {
order: 1; // 默认值为0，order越小位置越靠前，越靠上
flex-grow: 1;
/* flex-grow : 默认值为0，为0时有剩余空间也不放大，子元素该属性均为1时，剩余空间被所有为1的子元素均分，有一个子元素该属性为2时，该元素将分得或者努力分得其他为1的子元素所分得空间2倍大小的空间 */
/* flex-shrink : 默认值为1，当子元素中存在某个元素该属性为0时，若空间不足，则为1的缩小，为0的不变，因此可以猜测，为2的弱小的应该是更多，应该是缩小了为1缩小的空间的两倍 */
background-color: tomato;
}
.left {
width: 300px;
height: 500px;
background-color: lightgreen;
}
.right {
order: 2;
width: 200px;
height: 500px;
background-color: lightskyblue;
}
圣杯布局：
圣杯布局其实也是三栏布局，只不过是中间内容优先显示而已
实现思路：
在 wrapper 中的三列 center、left 和 rigth 分别设置左浮动和相对定位
left 和 right 的宽分别为 300px 和 200px，center 宽度为 100% /*center的总宽度是100%，也就等于父元素的container的宽度，container宽度会减去left的300px和right的200px，下面会解释原因*/
因为浮动的关系 center 会占满整个 wrapper，left 和 right 会被挤到它下面
对 left 设置 margin-left：-100%， /*margin-left可以理解为子元素左边框距离父元素container最右边的宽度，100%则是相对于父元素的width来说的（标准盒模型的width＝container），那么这个-100%的效果就是让left的左边框和父元素container的最左边相邻*/ 让其回到上一行的左侧
此时会将 center 的左边一部分遮住，所以需要给 wrapper 为其设置 padding: 0 200px 0 300px，给left 空出位置/* left的宽度是 300嘛，自然需要给左内边距300px，来将center的宽度缩小（center宽度的100%表示与父元素的container宽度相同，并不包含padding，因此我们在设置padding时，会将父元素的container宽度变小，自然cebter宽度也就变小了），右内边距同理 */
这时会发现 left 还没有在左侧/*margin-left是相对于父元素的container的，父元素有了左内边距，自然container相对于左边框就有了300px的宽度，这时left也有跟随container距离父元素左边框有了300px的宽度，既然离左边框300px，给它个-300px就好了*/，此时需要通过之前设置好的相对定位 left：-300px 使其回到最左边
同样的道理，对 right 也设置 margin-left：-200px，将 right 也拉回第一行
这时再对其设置 right：-200px;
html 结构
<div class="wrapper">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
css 样式
方式一：利用浮动和定位实现
.wrapper {
height: 500px;
padding: 0 200px 0 300px;
}
.center, .left, .right {
position: relative;
float: left;
}
.center {
width: 100%;
height: 500px;
background-color: tomato;
}
.left {
left: -300px;
width: 300px;
height: 500px;
margin-left: -100%;
background-color: lightgreen;
}
.right {
left: 200px;
width: 200px;
height: 500px;
margin-left: -200px;
background-color: lightskyblue;
}
方式二：利用 flex 实现
.wrapper {
display: flex;
height: 500px;
}
.center {
order: 1;
flex-grow: 1;
background-color: tomato;
}
.left {
width: 300px;
height: 500px;
background-color: lightgreen;
}
.right {
order: 2;
width: 200px;
height: 500px;
background-color: lightskyblue;
}
双飞翼布局：
双飞翼布局其实和圣杯布局类似，都是为了实现三栏布局，且中间内容部分优先展示
不同点就是圣杯布局利用的是 wrapper 的 padding 来保留左右位置的，而双飞翼布局利用的是给中间部分（center）的 margin 来实现的，因为它是在 center 的外面再次嵌套了一层 div（center-wrapper）
具体实现
先来看一下 html 结构
<div class="wrapper">
<div class="center-wrapper">
<div class="center">1111111</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
在wrapper 的三列 center-wrapper、left、right分别设置左浮动
left 和 right 的宽度分别设置为 300px、200px ，center-wrapper 的宽度设置为 100%
对 left 设置 margin-left：100%，使其回到上一行的最左边
此时 center 中的部分内容会被其遮住，所有对 center-wrapper 设置 margin: 0 200px 0 300px，使其不被遮住
对 right 使用 margin-left：-200px，使其回到上一行的最右边，此时就大功告成
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
第一种：利用浮动
.clearfix::after {
content: "";
display: block;
clear: both;
}
.left {
float: left;
width: 300px;
height: 400px;
background-color: limegreen;
}
.right {
float: right;
width: 200px;
height: 400px;
background-color: yellowgreen;
}
.center {
height: 400px;
margin: 0 200px 0 300px;
background-color: tomato;
} */
/*
第二种：利用绝对定位
*/
/* .wrapper {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 500px;
background-color: lightgreen;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 500px;
background-color: lightskyblue;
}
.center {
height: 500px;
margin: 0 200px 0 300px;
background-color: tomato;
} */
/*
第三种：利用 flex 布局
*/
/* .wrapper {
display: flex;
height: 500px;
}
.left {
width: 300px;
background-color: lightgreen;
}
.center {
flex-grow: 1;
background-color: tomato;
}
.right {
width: 200px;
background-color: lightskyblue;
} */
/* 第四种，圣杯布局，优先显示中间内容 */
/* .wrapper {
height: 500px;
padding: 0 200px 0 300px;
}
.center, .left, .right {
position: relative;
float: left;
}
.center {
width: 100%;
height: 500px;
background-color: tomato;
}
.left {
left: -300px;
width: 300px;
height: 500px;
margin-left: -100%;
background-color: lightgreen;
}
.right {
left: 200px;
width: 200px;
height: 500px;
margin-left: -200px;
background-color: lightskyblue;
} */
/* flex 实现 */
/* .wrapper {
display: flex;
height: 500px;
}
.center {
order: 1;
flex-grow: 1;
background-color: tomato;
}
.left {
width: 300px;
height: 500px;
background-color: lightgreen;
}
.right {
order: 2;
width: 200px;
height: 500px;
background-color: lightskyblue;
} */
/*
第五种：双飞翼布局
*/
.wrapper {
height: 500px;
}
.center-wrapper,
.left,
.right {
float: left;
height: 500px;
}
.center-wrapper {
width: 100%;
background-color: tomato;
}
.left {
width: 300px;
margin-left: -100%;
background-color: lightgreen;
}
.right {
width: 200px;
margin-left: -200px;
background-color: lightskyblue;
}
.center {
margin-left: 300px;
margin-right: 200px;
height: 500px;
}
</style>
</head>
<body>
<div class="wrapper clearfix">
<!– 第一种和第二种 –>
<!– <div class="left"></div>
<div class="right"></div>
<div class="center"></div> –>
<!– 第三种 –>
<!– <div class="left"></div>
<div class="center"></div>
<div class="right"></div> –>
<!– 第四种 –>
<!– <div class="center"></div>
<div class="left"></div>
<div class="right"></div> –>
<!– 第五种 –>
<div class="wrapper">
<div class="center-wrapper">
<div class="center">1111111</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
摘自CSDN：亦是木子也是雨，添加了补充说明
文章部分来自互联网，侵权联系删除
www.qklbishe.com
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » 三栏布局的实现方式，尽可能多写，浮动布局时，三个div的生成顺序有没有影响-笔试面试资料
