一、题目

根据题目给出你的答案。

二、我的代码详情

https://codepen.io/janmie-cjm/pen/gOrvBEw?editors=1100

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale="><title>页面布局</title>
</head>
<body>
<!--  1-浮动解决方案 float  --><section class="wrapper float"><div class="left left1">左栏</div><div class="right right1">右栏</div><div class="middle1"><h3>1-浮动解决方案 float</h3><ul><li>1.浮动解决方案</li><li>1.浮动解决方案</li></ul></div></section>
<!-- 2-绝对定位解决方案 position: absolute --><section class="wrapper abs-position"><div class="left left2">左栏</div><div class="right right2">右栏</div><div class="middle2"><h3>2-绝对定位解决方案 position: absolute</h3><ul><li>1.绝对定位解决方案</li><li>1.绝对定位解决方案</li></ul></div></section>
<!-- 3-flexbox display: flex --><section class="wrapper dis-flex"><div class="left left3">左栏</div><div class="middle3"><h3>3-flexbox display: flex</h3><ul><li>1.flexbox解决方案</li><li>1.flexbox解决方案</li></ul></div><div class="right right3">右栏</div></section>
<!-- 4-表格布局 display: table&table-cell --><section class="wrapper dis-table"><div class="left left4">左栏</div><div class="middle4"><h3> 4-表格布局 display: table&table-cell</h3><ul><li>1.表格布局解决方案</li><li>1.表格布局解决方案</li></ul></div><div class="right right4">右栏</div></section>
<!-- 5-网格布局 display: grid --><section class="wrapper dis-grid"><div class="left left5">左栏</div><div class="middle5"><h3>5-网格布局 display: grid</h3><ul><li>1.网格布局解决方案</li><li>1.网格布局解决方案</li></ul></div><div class="right right5">右栏</div></section>
</body>
</html>

html *{padding: 0;margin: 0;
}
.wrapper {height: 100px;width: 100%;background-color: yellow;margin-bottom: 10px;
}
ul {list-style-type: none;
}
.left,.right {width: 300px;height: 100%;background-color: #cff;
}
/* 1-浮动解决方案 float */
.left1 {float: left;
}
.right1 {float: right;
}
/* 2-绝对定位解决方案 position: absolute */
.abs-position {position: relative;
}
.abs-position div {position: absolute;
}
.left2 {left: 0px;
}
.right2 {right: 0px;
}
.middle2 {left: 300px;right:300px;text-align: left;
}
/* 3-flexbox display: flex */
.dis-flex {display: flex
}
.middle3 {flex: 1
}
/* 4-表格布局 display: table&table-cell */
.dis-table {display: table;
}
.dis-table div {display: table-cell;
}
/* 5-网格布局 display: grid */
.dis-grid {display: grid;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;
}

三、总结

本题目的解决方案有哪些？
浮动 / 绝对定位 / flexbox / 表格布局 / 网格布局；
这5种方案有什么优缺点？
（1）浮动
特点：该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反。任何元素都可以浮动，带有 diaplay: inline-block 属性。
√：兼容性好，简单。
×：脱离文档流，处理不好与其它元素的话容易导致内容凌乱。
（2）绝对定位
√：快捷。
×：完全脱离文档流，不保留占位符，可使用性差。
（3）flexbox
√：完美解决了float和绝对定位的布局缺陷，兼容性好。
（4）表格布局
√：容易实现本题这样的布局，兼容性也好。
×：当其中一个单元格高度增高时，其它栏目也会一起增高。table 会阻挡浏览其渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。
（5）网格布局
√：与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，意味着它可以同时处理列和行。对复杂的布局可以简化代码。
若把题中“已知”去掉，哪些还能用哪些不能用？
当列表内容增多，float、绝对定位、table三种布局形式的内容呈现都出现了问题，只有flexbox、表格布局的呈现没有问题。
各方案的兼容性如何，业务中哪个方案优先选择？
首选flexbox，其次table。兼容性好，而且避免了float和绝对定位脱离文档流的问题，避免了网格布局行高被限制的情况。

-代码中 “html *{…}” 可以全局应用； table布局
-解决方案中，外层需要用display:table；里面子元素需要用到display: table-cell;
-网格布局解决方案中，代码直接应用在外层包裹层上，display: grid; grid-template-rows添加多行，grid-template-columns 添加多列。

*代码尚存在很多不足，望提出不同的意见，互相交流。*

基础//页面布局——三栏布局1相关推荐

CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）
两栏布局(左列定宽, 右列自适应) DOM结构 <div class="box"><div class="box-left"></ ...
css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位左边中间右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
通过宽高自适应设计两栏布局和三栏布局
1.两栏布局我们要实现下面这样一个东西:两栏,左边一栏,右边一栏,左边宽高固定,右边宽高自适应,见下图: ✍我们有两种解决办法:(1)给右边盒子加外边距(2)calc函数的运用第一种方法:(1)给 ...
三栏布局的七种实现方式
目录 1.float 2.position 3.⭐ flex 布局 4.table 布局(很少用) 5.grid 布局(存在兼容性问题) 6.⭐ 圣杯布局 7.⭐ 双飞翼布局三栏布局一般指的是页面一 ...
网页三栏布局常用方法
三栏布局三栏布局在网页布局中算是比较长江的一种,比如淘宝等,诸多网站都是用的三栏布局它是两边元素固定,中间自适应,并且中间的元素优先渲染第一种:定位也是比较粗暴的一种定位但本人不建 ...
css布局：table布局、两栏布局、三栏布局
一.最初的布局--table 最初的时候,网页简单到可能只有文字和链接.这时候,大家最常用的就是table.因为table可以展示出多个块的排布.这种布局现在应该不常用了,因为在形色单一时,使用起来方 ...
css多栏布局(双栏布局、三栏布局、圣杯布局、双飞翼布局)
1.两栏布局两栏布局的核心是左栏固定宽度,右栏宽度自适应 html结构为 <div class="outer"><div class="left&qu ...
前端两栏布局和三栏布局
两栏布局左边盒子定宽度右边盒子自适应 [浮动➕ marin实现] <div class="twoContain"><div class="twoCon ...
html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
三栏布局三列自适应布局通常指两边定宽,中间部分宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 基于传统的position进行布局 ...

基础//页面布局——三栏布局1

文章目录

一、题目

二、我的代码详情

三、总结

基础//页面布局——三栏布局1相关推荐

最新文章

热门文章