页面布局方法之三栏布局


题目:完成左中右三栏布局,高度100px,左右宽度200px,中间宽度自适应。

今天学习了关于三栏布局的五种方法,其中最常用的就是flex伸缩布局,其他的布局方法虽然也可以实现同样的效果,但是或多或少有些缺点,但是本着多学点总是没错的精神,还是都了解一下。

1.浮动布局(float)

float浮动布局的优点是兼容性比较好,但是其脱离Dom流的特性导致使用起来需要兼顾其他模块的位置变化,有时会显得比较麻烦。
重点是不设置中间盒子的宽度,由于是块级元素,所以宽度会自动撑开

* {
    margin: 0;
    padding: 0;
}
.box {
    width: 100%;
    height: 100px;
}
.box div {
	height: 100px;
}
.box>.right {
    float: right;
    width: 200px;
    background-color: red;
}
.box>.left {
    float: left;
    width: 200px;
    background-color: blue;
}
.box>.center {
    background-color:green;
}

2.绝对定位(absolute)

absolute绝对定位的好处是方便快捷,直接写位置当然最准确,但是同样存在脱离文档流导致其他模块出现混乱的缺点
重点是中间盒子左右距离都设置成200px将其撑开

*{
	margin: 0;
    padding: 0;
}
.box {
    width: 100%;
    height: 100px;
}
.box div {
    position: absolute;
    height: 100px;
}
.box>.right {            
    right: 0px;
    width: 200px;
    background-color: red;
}
.box>.left {
    width: 200px;
    background-color: blue;
}
.box>.center {
    left: 200px;
    right: 200px;
    background-color:green;
}

3.伸缩布局(flex)

flex伸缩布局是实际项目中最常见的布局方式了,优先考虑,唯一的瑕疵就是兼容性有些问题。
重点是中间盒子 flex:1,使其宽度撑开

 *{
     margin: 0;
     padding: 0;
 }
 .box {
     display: flex;  
     width: 100%;
     height: 100px;
 }
 .box div {
     height: 100px;
 }
 .box>.left {
     width: 200px;
     background-color: blue;
 }
 .box>.center {
     flex: 1;
     background-color:green;
 }
 .box>.right {      
     width: 200px;
     background-color: red;
 }

4.表格布局(table)

表格布局是H5不建议使用的布局方式,但是在这个应用场景下,表格布局还是可以完美完成任务的,但是其已经过时,操作繁琐的缺点导致不建议使用。
优点:兼容性很好O(∩_∩)O
重点是 父盒子display:table,子盒子 display: table-cell ,中间盒子不设宽度,将其撑开

*{
    margin: 0;
    padding: 0;
}
.box {
    display: table;  
    width: 100%;
    height: 100px;
}
.box div {
    display: table-cell;
}
.box>.left {
    width: 200px;
    background-color: blue;
}
.box>.center {
    background-color:green;
}
.box>.right {      
    width: 200px;
    background-color: red;
}

5.网格布局(grid)

网格布局是最新技术(也不算新了吧…)
明显代码简化了很多呀有木有
但是新技术都存在这个问题,兼容性兼容性兼容性…
重点是。。。额好像没什么重点,就几条代码-。-

*{
    margin: 0;
    padding: 0;
}
.box {
    display: grid;  
    width: 100%;
    grid-template-rows: 100px;
    grid-template-columns: 200px auto 200px;
}
.box>.left {
    background-color: blue;
}
.box>.center {
    background-color:green;
}
.box>.right {      
    background-color: red;
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,那我可以告诉您如何实现一个基础的前端三布局页面。首先,我们可以使用HTMLCSS来完成这个页面。 HTML部分: ``` <!DOCTYPE html> <html> <head> <title>三布局页面</title> <style type="text/css"> /* 设置外层容器的宽度和居中 */ .container { width: 960px; margin: 0 auto; } /* 设置三的样式 */ .left-column, .right-column, .content { float: left; height: 500px; position: relative; } /* 设置左侧的样式 */ .left-column { width: 200px; background-color: #EEE; } /* 设置右侧的样式 */ .right-column { width: 200px; background-color: #EEE; } /* 设置中间区域的样式 */ .content { width: 560px; background-color: #FFF; } /* 清除浮动 */ .clear { clear: both; } </style> </head> <body> <div class="container"> <div class="left-column"> <!-- 左侧内容 --> </div> <div class="content"> <!-- 中间内容 --> </div> <div class="right-column"> <!-- 右侧内容 --> </div> <div class="clear"></div> </div> </body> </html> ``` CSS部分: ``` /* 设置外层容器的宽度和居中 */ .container { width: 960px; margin: 0 auto; } /* 设置三的样式 */ .left-column, .right-column, .content { float: left; height: 500px; position: relative; } /* 设置左侧的样式 */ .left-column { width: 200px; background-color: #EEE; } /* 设置右侧的样式 */ .right-column { width: 200px; background-color: #EEE; } /* 设置中间区域的样式 */ .content { width: 560px; background-color: #FFF; } /* 清除浮动 */ .clear { clear: both; } ``` 以上就是一个基础的前端三布局页面的实现方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值