三栏布局的实现方式,尽可能多写,浮动布局时,三个div的生成顺序有没有影响-笔试面试资料

这是qklbishe.com第4845 篇笔试面试资料
提供答案分析,通过本文《三栏布局的实现方式,尽可能多写,浮动布局时,三个div的生成顺序有没有影响-笔试面试资料》可以理解其中的代码原理,这是一篇很好的求职学习资料
本站提供程序员计算机面试经验学习,笔试经验,包括字节跳动/头条,腾讯,阿里,美团,滴滴出行,网易,百度,京东,小米,华为,微软等互联网大厂真题学习背诵。

答案:

三栏布局的实现方式,尽可能多写,浮动布局时,三个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:亦是木子也是雨,添加了补充说明

2020-12-18 21:15:48 回复(0)

文章部分来自互联网,侵权联系删除
www.qklbishe.com

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » 三栏布局的实现方式,尽可能多写,浮动布局时,三个div的生成顺序有没有影响-笔试面试资料

提供最优质的资源集合

立即查看 了解详情