这篇文章会详情CSS中大部分布局方式以及技巧,包括但不限于浮动、定位、flex、grid。
flex布局推荐阮一峰的文章Flex 布局教程:语法篇以及CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程)
grid布局推荐CSS-Tricks的文章A Complete Guide to Grid,以及中文翻译CSS Grid 布局完全指南(图解 Grid 详细教程)
居中
水平居中
先来看最常用的一种,利用margin属性设置外边距,当要居中当元素是display:block时可以用这种方法。
<div class="container"> <div class="content"></div> </div> <style> .content { width: 200px; height: 200px; background-color: #000; margin: 0 auto; } </style>
使用text-align,将元素当成文字直接居中。当要居中元素是inline或者者是inline-block时可以在元素的父容器上使用。
<div class="container"> <span class="content">文字内容</span> </div> <style> .container { text-align: center; } </style><div class="container"> <a href="#" class="content">链接</a> <a href="#" class="content">链接</a> <a href="#" class="content">链接</a> </div> <style> .container { text-align: center; } .content { display: inline-block; } </style>
利用定位来居中元素。绝对定位元素可以通过这种方式来居中,让定位的元素据左边50%父容器的距离,而后再让向左移动本身50%的距离。
<div class="container"> <div class="content"></div> </div> <style> .container { position: relative; } .content { position: absolute; width: 200px; height: 200px; background-color: #000; left: 50%; transform: translateX(-50%); } </style>
使用flex布局来居中。
<div class="container"> <div class="content"></div> </div> <style> .container { display: flex; justify-content: center; } .content { width: 200px; height: 200px; background-color: #000; } </style>
使用grid布局来居中,但是只为实现单个元素居中不推荐这种写法
<div class="container"> <div></div> <div class="content"></div> <div></div> </div> <style> .container { display: grid; grid-template-columns: auto 200px auto; grid-template-rows: 200px; } .content { background-color: #f40; } </style>
使用grid布局的第二种居中方法,相似于flex
<div class="container"> <div class="content"></div> </div> <style> .container { display: grid; justify-content: center; grid-template-columns: 200px; grid-template-rows: 200px; } </style>
垂直居中
利用定位来实现,和水平居中的原理一致
<div class="container"> <div class="content"></div> </div> <style> .container { height: 640px; background-color: gray; position: relative; } .content { position: absolute; top: 50%; transform: translateY(-50%); width: 200px; height: 200px; background-color: #fff; } </style>
同时利用定位和外边距实现,让子元素的top和bottom的值保持相同,而后设置margin: auto;
<div class="container"> <div class="content"></div> </div> <style> .container { height: 640px; background-color: gray; position: relative; } .content { width: 200px; height: 200px; background-color: #fff; position: absolute; top: 0; bottom: 0; margin: auto 0; } </style>
使用flex布局来进行垂直居中
<div class="container"> <div class="content"></div> </div> <style> .container { height: 640px; background-color: gray; display: flex; flex-direction: column; justify-content: center; } .content { width: 200px; height: 200px; background-color: #fff; } </style>
使用grid布局来进行垂直居中
<div class="container"> <div class="content"></div> </div> <style> .container { height: 640px; background-color: gray; display: grid; grid-template-columns: 200px; grid-template-rows: 200px; align-content: center; } .content { width: 200px; height: 200px; background-color: #fff; } </style>
使用line-height对文字进行居中
<div class="container"> 500 </div> <style> .container { height: 640px; background-color: gray; line-height: 640px; } </style>
三栏布局的实现(左右固定宽度,中间自适应)
为了展现方便,在这里我们暂定左右两栏宽200像素,中间自适应,高度统一为500像素,但在实际开发中,高度应该由内容撑开,而不是我们定义。
最传统的浮动布局,左边左浮动,右边右浮动
<div class="container"> <div class="left"></div> <div class="right"></div> <div class="content"></div> </div> <style> .left { width: 200px; height: 500px; background-color: red; float: left; } .right { width: 200px; height: 500px; background-color: red; float: right; } .content { padding: 0 200px; height: 500px; background-color: yellow; }
圣杯布局,浮动布局的一种优化,把展现主要内容的中间部分在html结构中放在最前面,而后一律浮动,再通过margin-top: -100% 调整左边栏的位置,通过margin-top: -200px调整右边栏的位置,而后给主要的中间部分设置paddng
<div class="container"> <div class="content"></div> <div class="left"></div> <div class="right"></div> </div> <style> .left { width: 200px; height: 500px; background-color: red; float: left; margin-left: -100%; } .right { width: 200px; height: 500px; background-color: red; float: left; margin-left: -200px; } .content { padding: 0 200px; height: 500px; width: 100%; background-color: yellow; float: left; box-sizing: border-box; } </style>
flex布局,非常方便的实现
<div class="container"> <div class="left"></div> <div class="content"></div> <div class="right"></div> </div> <style> .container { display: flex; } .left { width: 200px; height: 500px; background-color: red; } .right { width: 200px; height: 500px; background-color: red; } .content { height: 500px; width: 100%; background-color: yellow; } </style>
grid布局
<div class="container"> <div class="left"></div> <div class="content"></div> <div class="right"></div> </div> <style> .container { display: grid; grid-template-columns: 200px auto 200px; grid-template-rows: 500px; } .left { background-color: red; } .right { background-color: red; } .content { background-color: yellow; } </style>
总结
通过基本布局技巧以及三栏布局的实现,我们可以显著的感觉出flex和grid布局的强大实力,在caniuse.com中也可以看到现在的浏览器对这两种布局的支持基本上都实现了。在掌握浮动 、定位这些基本布局技巧的同时,flex和grid也是现在的前台工程师必需要掌握的技能了。