CSS实现三栏布局(5种)
常见的布局方式: float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局
那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px),整个高度已知(假如高度为100px),中间宽度自适应
1、float布局:
float最初的设计的初衷是为了解决文字环绕的问题 ,即给一个图片设置float属性之后会使文字环绕在图片周围显示。float之所以可以实现文字环绕是源于设置float属性的元素可以脱离文档流,使父元素高度塌陷。
好了知道了float的作用之后我们来实现三栏布局。
首先先 写html模版代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动实现三栏布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<article class="main">
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中
<h2>浮动布局</h2>
</div>
</article>
</body>
</html>
html模版写好,那么我们开始实现CSS样式:
这里我们给左右两栏设置float属性使其脱离文档流左边栏设置 float:left, 右边栏设置float: right ,由于宽度高度已知所以我们可以给其设置指定的宽高 width:300px, height:100px
.left{
float: left;
width: 300px;
height: 100px;
background: #631D9F;
}
.right{
float: right;
width: 300px;
height: 100px;
background: red;
}
现在两侧的样式写好了,那么我们来写中间的样式,
.center{
margin-left: 300px;
margin-right: 300px;
background-color: #4990E2;
}
这里为什么要设置margin-left、和margin-right呢? 如果动手写这个代码的小伙伴会发现不设置这两个属性效果在中间元素内容比较少的时候效果是正常的,但是如果如果中间元素的子元素内容特别多的时候会出现如下情况:如下图:
所以这两个属性还是需要添加的。到此位置float实现三栏布局已经OK了,这里特别提醒由于我们使用了float, 所以为了不影响其他元素的显示这里需要清除浮动,清除浮动的方式有很多大家可以自行搜索使用我这里使用伪元素的方式
.main::after{
content:'';
display: block;
clear: both;
}
2、Position布局:
首先先写html模版:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</head>
<body>
<article class="main">
<div class="left">左</div>
<div class="center">中
<h2>绝对定位</h2>
</div>
<div class="right">右</div>
</article>
</body>
</html>
position是设置元素定位类型的那么我们该用那种定位呢? 这里我们可以简单了解一下属性的类型
position其属性有5种 :
inherit: 继承父元素的position属性值
static: 默认值,没有定位
fixed: 生成绝对定位的元素,相对于浏览器窗口进行定位(不管屏幕内容怎么滑动,其位置不会改变)
relative:生成相对定位,相对于其正常位置进行定位
absolute:生成绝对定位的元素,相当于static定位以外的第一个父元素进行定位。
根据以上内容我们可以看出我们需要选择给 左 中 右 都使用 absolute 绝对定位,由于absolute 是相当于static定位以外的第一个父元素进行定位,所以我们要给其父元素添加 position:relative属性, 这样这三个子元素可以相对于父元素进行绝对定位。
由此我们可以很简单的写出CSS样式:
.left{
position: absolute;
left: 0;
width: 300px;
background-color: red;
}
.center{
position: absolute;
left: 300px;
right: 300px;
background-color: blue;
}
.right{
position: absolute;
right: 0;
width: 300px;
background-color: #3A2CAC;
}
只要理解了position属性的含义这种方式写起来就比较简单
3、table布局:
首先先写html模版: 这里的html模版和 position使用的html一样,这里就不复制代码了。
table是一种常见的布局方式,他可以将整个页面按照表格的方式设置为多行多列,但是由于书写table标签比较麻烦尤其是涉及到table内嵌table的时候,所以CSS给我们提供了display: table的方式可以让让们方便的使用table布局, 设置子元素为列的属性为display:table-cell
了解了table布局的属性那么就可以写出CSS样式:
.main{
width: 100%;
display: table;
}
.left,.center,.right{
display: table-cell;
}
.left{
width: 300px;
background-color: red;
}
.center{
background-color: blue;
}
.right{
width: 300px;
background-color: red;
}
由于table布局本身已经有自己特有的属性,所以我们只需要设置其dispaly属性就可以达到我们的目的。使用起来还是很方便的。
4、弹性(flex)布局:
首先先写html模版: 这里的html模版和 position使用的html一样,这里就不复制代码了。
flex布局是W3C提出了一种新的方案,可以简便、完整、响应式地实现各种页面布局。
当给元素设置display:flex,则该元素就是一个flex容器,其子元素就是容器成员,称之为flex项目,每个项目默认按照从左到右方式排列,所以我们可以很轻松的写出CSS样式:
.main {
display: flex;
}
.left{
width: 400px;
background-color: red;
}
.center{
background-color: blue;
word-break: break-word;
}
.right{
background-color: red;
width: 400px;
}
如果想了解更多的flex布局大家可以查看一下链接:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
5、网格(gird)布局:
首先先写html模版: 这里的html模版和 position使用的html一样,这里就不复制代码了。
网格它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。
将属性 display
值设为 grid
或 inline-grid
就创建了一个网格容器,所有容器直接子结点自动成为网格项目。
gird提供了 gird-template-columns、grid-template-rows属性让我们设置行和列的高、宽
根据属性我们可以写出如下CSS样式:
.div{
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
只需要四行CSS代码就可以实现三栏布局,是不是感觉到了gird的强大之处呢
总结:
以上提供了5种实现三栏布局的方式那么他们的优缺点呢?
1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。
2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局
3、table布局使用起来方便,兼容性也不存在问题,不利于搜索引擎抓取信息
4、flex布局比较强大,但是还是存在IE上兼容性问题,只能支持到IE9以上
5、grid布局很强大,但是兼容性很差。
CSS实现三栏布局(5种)的更多相关文章
- css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
- 【CSS】三栏布局的经典实现
要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</t ...
- css实现三栏布局,两边定宽,中间自适应
1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...
- 三种方法实现CSS三栏布局
本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...
- Css三栏布局自适应实现几种方法
Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...
- CSS三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
- CSS系列,三栏布局的四种方法
三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...
- 详解 CSS 七种三栏布局技巧
作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是 ...
随机推荐
- Linux部署项目常用命令
前言:一般项目都会使用阿里云等服务器作为云服务器.此时必不可免会使用到一系列常用的命令.这里我整合一下常用的命令 1.一般链接阿里云服务器常用的的是xshell跟xftp. 下载路径:https:// ...
- [译]试用新的System.Text.Json API
译注 可能有的小伙伴已经知道了,在.NET Core 3.0中微软加入了对JSON的内置支持. 一直以来.NET开发者们已经习惯使用Json.NET这个强大的库来处理JSON. 那么.NET为什么要增 ...
- JavaScript权威指南第六版(阅读笔记)
前言: 对于软件行业学习是无止境的,因为知识更替非常快,能够快速稳固掌握一门新技术是一个程序员应该具备的基本素质. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思想需要细心和大量实践才能慢慢 ...
- Java编程思想:通配符(后面有两个小节,研究的不够深入)
import java.util.*; public class Test { public static void main(String[] args) { } } /* 15.9 边界 要点: ...
- 个人永久性免费-Excel催化剂功能第63波-当前选择区域的上下左右平移功能及跳转窗口左上角
日常的Excel使用过程中,大部分的时间是在做选择单元格的操作,一般来说都是对指定单元格区域的内容进行一些数据处理.转换生成新数据的过程,那选择指定单元格的步骤,若能够尽最大程度地效率上得到加速,产出 ...
- 成为高级 React 开发你需要知道的知识点
简评:除了常见的 HOC 和 RenderProp 技巧,作者介绍了 7 个有用的知识点. 使用 Fragment 而不是 div 很多时候我们想要处理多个 component,但是 render 只 ...
- python模块知识一 自定义模块、time、datetime时间模块
第五章 模块 1.自定义模块: 模块分类: 内置模块(标准库)-- python解释器自带的.py文件(模块) 第三方模块(各种大神写的)-- 需要额外下载(并发编程pypi) 自定义模块(自己写的) ...
- flask+uwsgi+nginx+docker-compose部署
简单介绍 Flask这里就不多阐述了,已经是很流行的一个轻量级python框架了,对于小.中型项目特别适合.这里用docker的compose编排部署.uwsgi 简单的说明下,uWSGI是一个Web ...
- case和decode的用法(行转列)
创建了一张成绩表,如下图所示: 在oracle中,这两个函数我们都可以使用,代码及结果如下: decode用法: select Name,decode(Subject,'语文',1,'数学',2,'英 ...
- Ubuntu下Mongo的安装和笔记
在linux下的安装 打开https://www.mongodb.com/download-center#community选择linux然后选择自己的Version复制DOWNLOAD旁边的链接 打 ...