详情:CSS页面结构是我们日常生活中最常使用到的,当然目前可能大家用的最多的是elementUI实现布局,简单方柏霓,下面介绍几种常见的原生页面布局的方式
公共的样式部分
<style>* {margin: 0;padding: 0;}.layout {margin-bottom: 20px;}.layout article {width: 100%;}.layout article>div {min-height: 100px;}.layout article .left {width: 300px;background: red;}.layout article .center {background: orange;}.layout article .right {width: 300px;background: blue;}</style>
1、float浮动布局方式
<!-- 浮动布局 --><section class="layout float"><style>.layout.float .left {float: left;}.layout.float .right {float: right;}</style><article class="left-center-right"><div class="left"></div><div class="right"></div><div class="center"><h2>这是float布局</h2><p>这是一段文字</p><p>这是一段文字</p></div></article></section>
2、absolute的布局方式
<!-- 定位布局 --><section class="layout absolute"><style>.layout.absolute .left-center-right > div {position: absolute;}.layout.absolute .left {left: 0;}.layout.absolute .center {left: 300px;right: 300px;}.layout.absolute .right {right: 0;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>这是absolute布局</h2><p>这是一段文字</p><p>这是一段文字</p></div><div class="right"></div></article></section>
3、flex布局
<!-- flex布局 --><section class="layout flex"><style>.layout.flex {margin-top: 140px;}.layout.flex .left-center-right{display: flex;}.layout.flex .center {flex: 1;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>这是flex布局</h2><p>这是一段文字</p><p>这是一段文字</p></div><div class="right"></div></article></section>
4、Grid布局方式
<!-- grid布局 --><section class="layout grid"><style>.layout.grid .left-center-right {display: grid;grid-template-columns: 300px auto 300px;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>这是grid布局</h2><p>这是一段文字</p><p>这是一段文字</p></div><div class="right"></div></article></section>
效果图展示:
总结:
(1)float布局的兼容性比较好。缺点是如图二, 解决办法:给橙色块添加overflow: hidden(生成了一个BFC)。浮动元素父元素还存在高度塌陷问题,解决方法: 父元素生成一个BFC。
(2)absolute布局的有点是简单直接,兼容性好。缺点,脱离了文档流。
(3)flex布局的优点,布局简单、灵活,移动端友好;缺点是ie8以下不兼容。
(2)grid布局优点,是第一个基于二维方向的布局模块。它是第一个基于网格的原生布局系统。缺点是对低版本浏览器兼容性不好。