[ HTML5 ] WEB 常用页面布局梳理和分析

Posted 2021-08-07 GavinUI

页面布局实现的方法有许多种，但是我个人习惯是会只用一种自己比较习惯的方法，只要不是出现了兼容性问题一般也不会去使用其他的方法，但是也是要知道有哪一些方法可以实现，确实忘记了我就使用搜索快速解决问题。下面是我梳理了一下各种布局的方法。

三栏布局：左右定宽中间自适应

使用 float 属性

使用 float 属性就是将左右的 DIV 浮动，中间的 DIV 不需要做其他处理，他会直接放在两个 DIV 之间。

article{ width: 100%; height: 200px; background-color: antiquewhite;}.left{ float: left; width: 200px; height: 100%; background-color: aqua;}.right{ float: right; width: 200px; height: 100%; background-color: aqua;}.center{ height: 100%; background-color: blueviolet;}

<article> <section class="left">left</section> <section class="right">right</section> <section class="center">center</section></article>

如图：

这个方法以前会用到，但是现在基本上不会使用，个人不太喜欢 float 属性。使用 float 就会使元素脱离文档流，到了后面如果有处理的不好的地方就可能会有其他的问题，同时还有子元素也是脱离了文档流，这种感觉并不是特别好。但他的优点是兼容性还可以。

还有一点是，这个是在定高的情况下，如果内容溢出或者不定高的话，float 也会有内容偏移的情况也要做一些处理。

使用绝对定位方法

使用绝对定位的方就是将三个容器都定为绝对定位，左右侧 DIV 绝对定位且定宽，中间距离等于左侧宽度和右侧宽度 。

.wrapper-1{ position: relative; width: 100%; height: 200px; background-color: antiquewhite;}.wrapper-1 .left-1{ position: absolute; left: 0; top: 0; width: 200px; height: 100%; background-color: aqua;}.wrapper-1 .right-1{ position: absolute; right: 0; top: 0; width: 200px; height: 100%; background-color: aqua;}.wrapper-1 .center-1{ position: absolute; left: 200px; right: 200px; height: 100%; background-color: blueviolet;}

<article class="wrapper-1"> <section class="left-1">left</section> <section class="center-1">center</section> <section class="right-1">right</section></article>

如图：

绝对定位的方法好处依然是兼容性可以，但是脱离文档流是一个问题。绝对定位的方法这个布局下面的子元素全部都是脱离文档流的，这个方法用来做基本布局其实不太合理。就算是浮动清除得好，也不建议用这样的方法。

使用网格布局

这个可能有点兼容性问题，但也是可以慢慢尝试去使用，现在在项目上一般情况下也没有使用到这个方法。但这个方法用起来确实是很方便，几行代码就可以搞定。

.wrapper-3{ position: relative; display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 200px auto 200px; background-color: antiquewhite; margin-top: 20px;}.wrapper-3 .left-3{ height: 100%; background-color: aqua;}.wrapper-3 .right-3{ height: 100%; background-color: aqua;}.wrapper-3 .center-3{ height: 100%; background-color: blueviolet;}

<article class="wrapper-3"> <section class="left-3"> left </section> <section class="center-3"> center </section> <section class="right-3"> right </section></article>

如图：

使用 flex 布局（常用）

flex 布局是我现在基本都在使用的方法，以前还可能有些设备不支持，但是现在的设备跑 flex 基本上是没有问题的。

他的方法是将 DIV 都设置为 flex ，需要定宽的设置宽度，不需要的将 DIV 设置一个 flex :1 。

.wrapper-2{ position: relative; display: flex; width: 100%; height: 200px; background-color: antiquewhite;}.wrapper-2 .left-2{ width: 200px; height: 100%; background-color: aqua;}.wrapper-2 .right-2{ width: 200px; height: 100%; background-color: aqua;}.wrapper-2 .center-2{ flex: 1; height: 100%; background-color: blueviolet;}

<article class="wrapper-2"> <section class="flex left-2"> left </section> <section class="flex center-2"> center </section> <section class="flex right-2"> right </section></article>

如图：

现在的移动端都非常适合用这个方法，前一两年还有一些手机不兼容，但是现在基本上是不会了。我记得之前做了一个 h5 就是使用了 flex。神奇的是所有的手机都没有问题，唯独负责这个 h5 的产品经理的 iphone 6 显示是有兼容问题的，我也是醉了，但现在基本上就忽略了很旧的设备。

表格布局 

他的优点是兼容性是这几个布局方法里面最好的，但是写法看上去很古老，这个方法已经过时了，可以忽略。

三栏布局：上下定宽中间自适应

上下定宽中间自适应这种一般使用在移动端是非常多的尤其是顶部固定内容自适应或者是内容自适应底部固定，布局方法和上面的很相似，但也有不用的地方。

使用 calc函数 布局（常用）

这个方法相比简单，只要将顶部和底部的高度减去就可以了，兼容性也比较好。

html,body { width: 100%; height: 100%;}.wrapper { position: relative; width: 100%; height: 100%; background-color: antiquewhite;}.wrapper header { width: 100%; height: 200px; background-color: aqua;}.wrapper section { height: calc(100% - 400px); background-color: brown;}.wrapper footer { height: 200px; background-color: blueviolet;}

<article class="wrapper"> <header>顶部</header> <section> <div class="center"> 中部 </div> </section> <footer class="footer">底部</footer></article>

如图：

使用 flex 布局（常用）

使用 flex布局的话和横屏的很像，只是在高度上建议是使用 min-height，避免有些小机型展示会有问题，但现在基本上可以忽略了。

html,body { width: 100%; height: 100%;}.wrapper { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background-color: antiquewhite;}.wrapper header { width: 100%; min-height: 100px; background-color: aqua;}.wrapper section { width: 100%; min-height: 100px; flex: 1; background-color: rgb(70, 67, 67);}
.wrapper footer { width: 100%; min-height: 100px; background-color: blueviolet;}

<article class="wrapper"> <header>顶部</header> <section>中部</section> <footer>底部</footer></article>

如图：

垂直居中布局

使用 position  实现居中（定高）

我个人在使用 flex 布局之前，大多数的情况使用了这样的方法。

.wrapper { position: relative; width: 100%; height: 100%; background-color: antiquewhite;}.wrapper section{ position:absolute; width: 100px; height: 100px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: brown;}

<article class="wrapper"> <section></section></article>

如图：

使用 transform 实现居中 （不定高）

不定高度在一段时间的前端面试中，那个是逢面必问的题目。但是现在问这个题目的也就不多了。

.wrapper { position: relative; width: 100%; height: 100%; background-color: antiquewhite;}.wrapper section{ position:absolute; top:50%; left:50%; width: 100px; height: 100px; transform:translate(-50%,-50%); background-color: brown;}

<article class="wrapper"> <section></section></article>

如图：

使用 flex 居中（推荐）

使用 flex 中在现在来看是最方便的，仅仅几行代码就可以实现而且不需要考虑盒子是不是不定高的情况。

.wrapper { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: antiquewhite;}.wrapper section{ width: 100px; height: 100px; background-color: brown;}

<article class="wrapper"> <section></section></article>

只能说这个方法简直完美。

这个一个居中的段落中，中间有一些方法我去掉了。就比如不定高的垂直居中还有其他的方法，但是我觉得没有必要像字典一样写出来，根本没有必要，使用一个最合适的方法，其他的如有需要就使用搜索快速解决。

以上就是对页面布局进行的一个梳理。