如题所述
?????在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高。
两栏布局?????两栏布局实现效果是将页面分割成左右宽度不登的两列,宽度较小的列设置为固定高度,剩余宽度由另一列撑满,比如AntDesign文档,蓝色区域为主要内容布局容器,侧边栏为次要内容布局容器。
这里称宽度较小的列父元素为次要布局容器,宽度较大的列父元素为主要布局容器
?????这种布局适用于内容上具有明显主次关系的网页。
三栏布局三栏布局按照左中右的顺序进行排列,通常中间列最宽,左右两列次之
大家最常见的就是github:
双栏布局?????双栏布局非常常见,往往是以一个定宽栏和一个自适应的栏并排展示存在
?????实现思路也非常的简单:
使用float左浮左边栏
右边模块使用margin-left撑出内容块做内容展示
为父级元素添加BFC,防止下方元素飞到上方内容
代码如下:
1<style>2.box{3overflow:hidden;4}5.left{6float:left;7width:200px;8background-color:gray;9height:400px;10}11.right{12margin-left:210px;13background-color:lightgray;14height:200px;15}16</style>17<divclass="box">18<divclass="left">左边</div>19<divclass="right">右边</div>20</div>flex弹性布局1<style>2.box{3display:flex;4}5.left{6width:100px;7background-color:pink;8}9.right{10flex:1;11background-color:aquamarine;12}13</style>14<divclass="box">15<divclass="left">左边</div>16<divclass="right">右边</div>17</div>flex可以说是最好的方案了,代码少,使用简单
注意的是,flex容器的一个默认属性值:align-items:stretch;
这个属性导致了列等高的效果。为了让两个盒子高度自动,需要设置:?align-items:flex-start
三栏布局实现三栏布局中间自适应的布局方式有:
两边使用float,中间使用margin
两边使用absolute,中间使用margin
两边使用float和负margin
display:table实现
flex实现
grid网格布局
两边使用float,中间使用margin需要将中间的内容放在html结构最后,否则右侧会臣在中间内容的下方
实现代码如下:
1<style>2.wrap{3background:#eee;4overflow:hidden;5padding:20px;6height:200px;7}8.left{9width:200px;10height:200px;11float:left;12background:coral;13}14.right{15width:120px;16height:200px;17float:right;18background:lightblue;19}20.middle{21margin-left:220px;22height:200px;23background:lightpink;24margin-right:140px;25}26</style>27<divclass="wrap">28<divclass="left">左侧</div>29<divclass="right">右侧</div>30<divclass="middle">中间</div>31</div>原理如下:两边固定宽度,中间宽度自适应。
利用中间元素的margin值控制两边的间距
宽度小于左右部分宽度之和时,右侧部分会被挤下去
这种实现方式存在缺陷:主体内容是最后加载的。
右边在主体内容之前,如果是响应式设计,不能简单的换行展示
两边使用absolute,中间使用margin基于绝对定位的三栏布局:注意绝对定位的元素脱离文档流,相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序,实现代码如下:
1<style>2.container{3position:relative;4}56.left,7.right,8.main{9height:200px;10line-height:200px;11text-align:center;12}1314.left{15position:absolute;16top:0;17left:0;18width:100px;19background:green;20}2122.right{23position:absolute;24top:0;25right:0;26width:100px;27background:green;28}2930.main{31margin:0110px;32background:black;33color:white;34}35</style>3637<divclass="container">38<divclass="left">左边固定宽度</div>39<divclass="right">右边固定宽度</div>40<divclass="main">中间自适应</div>41</div>实现流程:左右两边使用绝对定位,固定在两侧。
中间占满一行,但通过margin和左右两边留出10px的间隔
两边使用float和负margin实现代码如下:
1<style>2.left,3.right,4.main{5height:200px;6line-height:200px;7text-align:center;8}910.main-wrapper{11float:left;12width:100%;13}1415.main{16margin:0110px;17background:black;18color:white;19}2021.left,22.right{23float:left;24width:100px;25margin-left:-100%;26background:green;27}2829.right{30margin-left:-100px;/*同自身宽度*/31}32</style>3334<divclass="main-wrapper">35<divclass="main">中间自适应</div>36</div>37<divclass="left">左边固定宽度</div>38<divclass="right">右边固定宽度</div>实现过程:中间使用了双层标签,外层是浮动的,以便左中右能在同一行展示
左边通过使用负margin-left:-100%,相当于中间的宽度,所以向上偏移到左侧
右边通过使用负margin-left:-100px,相当于自身宽度,所以向上偏移到最右侧
缺点:增加了.main-wrapper一层,结构变复杂
使用负margin,调试也相对麻烦
使用display:table实现<table>?标签用于展示行列数据,不适合用于布局。但是可以使用?display:table?来实现布局的效果,实现代码如下:
1<style>2.container{3height:200px;4line-height:200px;5text-align:center;6display:table;7table-layout:fixed;8width:100%;9}1011.left,12.right,13.main{14display:table-cell;15}1617.left,18.right{19width:100px;20background:green;21}2223.main{24background:black;25color:white;26width:100%;27}28</style>2930<divclass="container">31<divclass="left">左边固定宽度</div>32<divclass="main">中间自适应</div>33<divclass="right">右边固定宽度</div>34</div>实现原理:层通过display:table设置为表格,设置table-layout:fixed表示列宽自身宽度决定,而不是自动计算。
内层的左中右通过display:table-cell设置为表格单元。
左右设置固定宽度,中间设置width:100%填充剩下的宽度
使用flex实现利用flex弹性布局,可以简单实现中间自适应
代码如下:
1<styletype="text/css">2.wrap{3display:flex;4justify-content:space-between;5}67.left,8.right,9.middle{10height:100px;11}1213.left{14width:200px;15background:coral;16}1718.right{19width:120px;20background:lightblue;21}2223.middle{24background:#555;25width:100%;26margin:020px;27}28</style>29<divclass="wrap">30<divclass="left">左侧</div>31<divclass="middle">中间</div>32<divclass="right">右侧</div>33</div>实现过程:仅需将容器设置为display:flex;,
盒内元素两端对其,将中间元素设置为100%宽度,或者设为flex:1,即可填充空白
盒内元素的高度撑开容器的高度
优点:结构简单直观
可以结合flex的其他功能实现更多效果,例如使用order属性调整显示顺序,让主体内容优先加载,但展示在中间
grid网格布局代码如下:
1<style>2.wrap{3display:grid;4width:100%;5grid-template-columns:300pxauto300px;6}78.left,9.right,10.middle{11height:100px;12}1314.left{15background:coral;16}1718.right{19width:300px;20background:lightblue;21}2223.middle{24background:#555;25}26</style>27<divclass="wrap">28<divclass="left">左侧</div>29<divclass="middle">中间</div>30<divclass="right">右侧</div>31</div>跟flex弹性布局一样的简单
原文:https://juejin.cn/post/7099326366516477966logo设计
创造品牌价值
¥500元起
APP开发
量身定制,源码交付
¥2000元起
商标注册
一个好品牌从商标开始
¥1480元起
公司注册
注册公司全程代办
¥0元起
查
看
更
多
- 官方电话官方服务
- 官方网站八戒财税知识产权八戒服务商企业需求数字市场