来看看最全的“css布局”喽

最新推荐文章于 2024-08-09 16:30:00 发布
原创 最新推荐文章于 2024-08-09 16:30:00 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

本文详细介绍了CSS中常见的布局方式，包括等高布局（table-cell、padding/margin相抵）、三栏布局（BFC、flex、定位）以及双飞翼布局和圣杯布局的实现，通过代码实例展示了各种布局的用法和特点。同时，强调了理解BFC的重要性。

嗨，大家好，我又来了，今天主要是分享下我们在css中常用的布局方式。可能在面试过程中也会出现哦，注意听哦
主要是下面几种

  • 等高布局
  • 三栏布局
  • 两栏布局
  • 双飞翼布局
  • 圣杯布局

1. 等高布局

这里来讲解下等高布局的实现方式，如果有我漏写的希望大家可以在留言中告诉我，相互学习。

1.1 table-cell 实现方式

1.1.1 上“效果”

在这里插入图片描述

1.1.2 上“代码”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>等高布局实现 - table-cell</title>
    <style>
      .left,
      .middle,
      .right {
        width: 200px;
        display: table-cell;
        /* display: table-cell 默认就是等高布局 */
      }

      .left {
        height: 300px;
      }

      .left,
      .right {
        background: red;
      }

      .middle {
        background: blue;
      }

      .outer {
        display: table;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

使用display属性：table-cell 天生具备等高的效果。所以我们可以利用这种方式进行实现

1.2 使用padding以及margin相抵方式

1.1.1 上“效果”

在这里插入图片描述

1.1.2 上“代码”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>等高布局 - padding，margin</title>
    <style>
      .outer {
        overflow: hidden;
      }

      .left,
      .right,
      .middle {
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
      }

      .left,
      .right {
        width: 25%;
        background: red;
      }

      .middle {
        width: 50%;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left">
        <div>11</div>
        <div>22</div>
      </div>
      <div class="middle">1</div>
      <div class="right">2</div>
    </div>
  </body>
</html>

这里我们可以利用padding-bottom, margin-bottom 相抵的方式实现等高布局，可以理解为这是一种假等高布局

2. 三栏布局

2.1 利用BFC不跟浮动元素重叠方式

2.1.1 上“效果”

在这里插入图片描述

2.1.2 上“代码”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>通过BFC来实现</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      html, body {
        height: 100%;
      }

      .outer {
        height: 100%;
      }

      .left {
        width: 200px;
        height: 100%;
        float: left;
        background: red;
      }

      .right {
        width: 200px;
        height: 100%;
        float: left;
        background: green;
      }

      .middle {
        height: 100%;
        background: blue;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="middle">middle</div>
    </div>
  </body>
</html>

2.2 flex实现三栏布局

2.2.1 上“效果”

在这里插入图片描述

2.2.2 上“代码”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex实现三栏布局</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .outer {
        height: 500px;
        display: flex;
        justify-content: space-between;
      }

      .left,
      .right,
      .middle {
        height: 100%;
      }

      .left,
      .right {
        width: 200px;
        background: red;
      }

      .middle {
        flex: 1;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left">left</div>
      <div class="middle">middle</div>
      <div class="right">right</div>
    </div>
  </body>
</html>

利用flex：1的特性来实现两边固定宽，中间子实现的三栏布局

2.3 利用定位方式

2.3.1 上“效果”

在这里插入图片描述

2.3.2 上“代码”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>position实现三栏布局</title>
    <style>
      .left {
        background: red;
        left: 0;
        top: 0;
        position: absolute;
        height: 100%;
        width: 200px;
      }

      .right {
        background: red;
        right: 0;
        position: absolute;
        top: 0;
        height: 100%;
        width: 200px;
      }

      .middle {
        background: blue;
        left: 200px;
        top: 0;
        right: 200px;
        position: absolute;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left">left</div>
      <div class="middle">middle</div>
      <div class="right">right</div>
    </div>
  </body>
</html>

其实就是利用中间定位的方式，中间定位的原则是两边的宽度

2.4 双飞翼布局

开始划重点了！！！ 注意了

2.4.1 上“效果”

在这里插入图片描述

2.4.2 上“代码”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>双飞翼</title>
    <style>
      header {
        height: 200px;
        background: red;
      }

      .body {
        overflow: hidden;
      }

      .middle,
      .left,
      .right {
        float: left;
        height: 200px;
      }

      .middle {
        width: 100%;
      }

      .inner {
        background: blue;
        margin: 0 200px;
        height: 200px;
      }

      .left {
        background: orange;
        width: 180px;
        position: relative;
        margin-left: -100%;
      }

      .right {
        background: green;
        width: 180px;
        margin-left: -180px;
      }
    </style>
  </head>
  <body>
    <header>header</header>
    <div class="body">
      <div class="middle">
        <div class="inner">inner</div>
      </div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
  </body>
</html>

细细的品味代码，其实就是利用margin 来实现元素移动

2.5 圣杯布局

开始划重点了！！！ 注意了

2.5.1 上“效果”

在这里插入图片描述

2.5.2 上“代码”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>圣杯布局</title>
    <style>
      header {
        background: red;
      }
      header,
      footer {
        height: 100px;
      }

      footer {
        background: green;
      }

      .body {
        padding: 0 200px;
        overflow: hidden;
      }

      .middle {
        background: orange;
        float: left;
        width: 100%;
        height: 200px;
      }

      .left {
        background: orchid;
        position: relative;
        left: -200px;
        margin-left: -100%;
      }

      .right {
        background: powderblue;
        position: relative;
        margin-left: -180px;
        left: 200px;
      }
      .left,
      .right {
        height: 200px;
        width: 180px;
        float: left;
      }
    </style>
  </head>
  <body>
    <header>header</header>
    <div class="body">
      <div class="middle">middle</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <footer>footer</footer>
  </body>
</html>

希望有缘人在看代码的过程中可以将双飞翼以及圣杯布局同时看，可能收获会比较大

3. 两栏布局

3.1 利用BFC实现

3.1.1 上“效果”

在这里插入图片描述

3.1.2 上“代码”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BFC实现两栏布局</title>
    <style>
      .left {
        float: left;
        width: 200px;
        height: 500px;
        background: blue;
      }

      .right {
        height: 500px;
        background: red;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
</html>

3.2 利用flex实现

3.2.1 上“效果”

在这里插入图片描述

3.2.2 上“代码”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex两栏布局</title>
    <style>
      .outer {
        width: 500px;
        height: 600px;
        display: flex;
      }

      .inner1 {
        flex: 1;
        background: red;
      }

      .inner2 {
        flex: 1;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner1"></div>
      <div class="inner2"></div>
    </div>
  </body>
</html>

3.3 使用定位方式

3.3.1 上“效果”

在这里插入图片描述

3.3.2 上“代码”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>经典两栏布局 -- 定位</title>
    <style>
      .left {
        width: 200px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background: red;
      }

      .right {
        position: absolute;
        left: 200px;
        top: 0;
        bottom: 0;
        right: 0;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

3.4 使用margin-left方式

3.4.1 上“效果”

在这里插入图片描述

3.4.2 上“代码”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>float + margin实现布局</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      html,
      body {
        height: 100%;
      }

      .outer {
        height: 100%;
      }

      .left {
        width: 200px;
        height: 100%;
        background: red;
        float: left;
      }

      .right {
        margin-left: 200px;
        height: 100%;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left">1</div>
      <div class="right">2</div>
    </div>
  </body>
</html>

4. 结束

其实上述实例基本都是代码以及截图，因为css基本都是熟练知识都是死知识，并没有什么原理可以讲解。唯一可能需要理解的就是BFC，什么是BFC，BFC的存在可以解决哪些事情就完了，如果各位想看源码可以参考下面地址，我的GitHub有很多分栏，其实还有很多js重写原理，也希望大家多多star哦

GitHub源码地址

最强大的 CSS 布局 —— Grid 布局
每天都要努力学习哦~~
09-30 1万+
应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的。：可以简化重复的值。布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局与双飞翼布局是CSS布局领域中经典的两种布局方法，主要用来创建一种具有左右两栏固定宽度，中间内容部分自适应宽度的布局结构。这两种布局技术在Web页面设计中应用广泛，尤其是在响应式设计中，它们能够很好...
CSS+DIV后台管理布局
06-03
用CSS实现的三个后台管理页面。。。。。。。。
几种常见的CSS布局
weixin_33816611的博客
11-08 501
本文概要 本文将介绍如下几种常见的布局： 其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法 一、单列布局 常见的单列布局有两种： header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 1.如何实现 对于第一种，先通过对header,content,footer统一设置wid...
实用的60个CSS代码片段[转]
heye13的专栏
09-26 799
1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(
CSS布局
qq_43539854的博客
04-05 2266
CSS布局 table布局 table的特性决定了它非常适合用来做布局，表格中的内容可以自动居中。但table局部有很多缺点： 比其他HTML标签占更多的字节，造成下载时间延迟，占用服务器更多资源 阻挡浏览器渲染引擎的渲染顺序，延迟页面的加载速度 flex布局 1. 盒模型 标准盒子模型：width = 2 * border + 2 * padding + content IE盒子模型：width = 2 * border + 2 * padding > content ? border * 2
css常用布局多行多列
12-29
CSS布局常用的方法：float : none | left | right 取值： none :　默认值。对象不飘浮 left :　文本流向对象的右边 right :　文本流向对象的左边 它是怎样工作的，看个一行两列的例子 xhtml: <div id=warp> 这里是第...
布局用CSS+DIV的优点总结
10-30
接着，从用户体验的角度看，CSS+DIV布局能够显著提高页面的浏览速度。由于CSS+DIV重构的页面比使用TABLE布局的页面文件小，页面加载速度自然快得多。加之现代浏览器的优化，可部分提前渲染页面内容，进一步提升了...
精选资源
DIV+CSS布局基本流程及实例介绍
01-20
下面我们先来看下学习DIV+CSS布局的基本步骤： 一、认清学习的要求 1、弄清目的，首先要认识为什么要学习CSS？ 2、心态不能急，如果你很急躁，否则会很快丧失兴趣。 3、坚持，这个不是一到两天的事情，是一个漫长的...
【css】最全布局总结
热门推荐
qq_45406325的博客
08-13 1万+
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
css的布局
weixin_67252311的博客
07-04 1423
标准流处在网页的最底层，表示页面的位置。在标准流中有两种排列方式，垂直排列，水平排列在css 中将元素分为三类，行内元素，块级元素，行内块级元素如果是块级元素，就会垂直排列，如果是行内元素或者行内块级元素,就会水平排列。
css-布局
简简单单，仔仔细细，只是一个开发者
01-26 403
css布局分为三种类型：流布局、浮动布局、层布局。 流布局 流布局是默认的网页布局，在流布局中，块状元素会按上下结构排列，因为块状元素宽度是100%，而内敛元素按左右方向排列。 浮动布局 .div1{float:right;}//元素向右浮动 .div2{float:left;}//向左浮动 .div3{float:none;}//不浮动 浮动元素可以向左向右浮动，直到碰到边
CSS——布局
最新发布
Fan_web的博客
08-09 2205
本文详细介绍了CSS中的布局，包括文档流、盒子模型和大小、浏览器的默认样式介绍以及补充一些轮廓和圆角的一些知识点。
关于CSS布局
lianglizhongblog
03-02 643
CSS三大定位机制：标准文档流、浮动布局、绝对定位布局。 一、标准文档流： 1.特点：从上到下，从左到右输出文本。 标准文档流里面又分两种情况，即块级元素和行级元素，也可以说标准文档流是由块级标签和行级标签组成的。 块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时会自动换行，常见的块级标签有div、ul、li、dl、dt、p…。 行级元素特点：能在同一行显示，不影响HTML文档结构：例： A.<span>专注前端100年</span> B.<span>专注<strong>前端</s
CSS网页布局
微风洋洋的博客
02-10 8132
介绍一下CSS网页布局这个核心知识，大家一定要重视！
CSS中的布局方式
韩旭不会敲代码吧的博客
07-17 540
前言 CSS的布局方式多种多样，那么我们改如何去合理选择自己所需的布局方式呢，让我们一起来交流一下。 一、标准流(普通流/文档流) 1、所谓的标准：就是标签按照规定好默认方式排列 (1)块级元素会独占一行，从上向下顺序排列 常用元素：div,hr,p,h1,ul,ol,form,table (2)行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行 常用元素：span,a,i,em等 标准流是最基本的布局方式 二、浮动布局 1、浮动最典型的应用：可以让多个块级元素一行内排列显示 2、网页布局第一准
Div+CSS布局入门：新手必看的HTML+CSS设计教程
本篇"Div+CSS布局入门教程"旨在为初学者提供一个清晰易懂的指导，帮助他们理解并掌握基本的网页布局设计。在HTML和CSS的世界里，学习者首先需要对HTML有基本的了解，因为CSS是用于控制HTML元素外观和布局的语言。在...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值