CSS布局终极详解

作者 : 开心源码 本文共4530个字,预计阅读时间需要12分钟 发布时间: 2022-05-12 共131人阅读

这篇文章会详情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也是现在的前台工程师必需要掌握的技能了。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS布局终极详解

发表回复