CSS常见布局

已于 2022-06-21 09:59:58 修改
阅读量760 收藏 19
点赞数 4
分类专栏： CSS 文章标签： css css3
于 2022-06-19 20:51:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45829293/article/details/125361880
版权

文章目录

双栏布局

实例
实现思路：

  1. 使用float左浮动左边栏
  2. 右边模块使用margin-left撑出内容块作展示
  3. 父级元素添加BFC，防止下方元素飞到上方内容

一般思路–直接写

<!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>
      .content{
        overflow: hidden;
        background-color: antiquewhite;
      }
      .content-left{
        width: 200px;
        height: 400px;
        float: left;
        background-color: rgb(178, 240, 219);
        
      }
      .content-right{
        height: 200px;
        margin-left: 210px;
        background-color: rgb(236, 170, 170);
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content-left"></div>
      <div class="content-right"></div>
    </div>
  </body>
</html>

flex弹性布局实现双栏

<!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>
        .content{
            background-color: antiquewhite;
            display: flex;
            justify-content: flex-start;
        }
        .content-left{
            background-color: rgb(178, 240, 219);
            width: 100px;
        }
        .content-right{
            background-color: rgb(236, 170, 170);
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="content-left">zuo</div>
        <div class="content-right">you</div>
    </div>
</body>
</html>

三栏布局

方法汇总：

  1. 左右两边使用float浮动，中间使用magin设置
  2. 两边使用absolute，中间使用margin
  3. 两边使用float和负margin
  4. display：table实现
  5. flex实现
  6. grid网络布局

1、方法1 推荐使用-flex

  • 使用方法：利用flex弹性布局实现简单的中间居中
<!-- 使用flex -->
<!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>
      .wrap{
        display: flex;  
        justify-content: space-around;
      }
      .left,.middle,.right{
          height: 200px;
      }
      .left{
          width: 100px;
          background-color: aquamarine;
      }
      .middle{
          width: 100%;
          margin: 0 20px;
          background-color: black;
      }
      .right{
          width: 100px;
          background-color: aquamarine;
      }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="left">左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

2、方法2

  • 使用方法：左右两边使用float浮动，中间使用margin来设置
  • 注意：html中center在左右盒子的下面

原理：

  1. 两边固定宽度中间自适应
  2. 中间元素主要是通过设置margin的值来控制两边的边距
  3. 宽度小于左右部分宽度之和时，右侧部分会被挤下去
  • 缺点：当是响应式设计时不能实现简单的换行（center部分是最后加载的）
<!-- 左右float、中间margin -->
<!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>
        .content{
            background: #eee;
            overflow: hidden; 
            padding: 20px;
            height: 200px;
        }
        .content-left{
            width: 200px;
            height: 200px;
            float: left;
            background: coral;
        }
        .content-right{
            width: 120px;
            height: 200px;
            float: right;
            background: lightblue;
        }
        .content-center{
            margin-left: 220px;
            height: 200px;
            background: lightpink;
            margin-right: 140px;
        }
        

    </style>
</head>
<body>
    <div class="contents">
        <div class="content-left">left</div>
        <div class="content-right">right</div>
        <div class="content-center">center</div>
    </div>
</body>
</html>

3、方法3

  • 使用方法：两边使用absolute，中间使用margin

原理：

  • 左右两边使用绝对定位，脱离文本流固定在两边
  • 中间占满一行，通过margin与左右两边留出10px的间距
<!-- 两边使用absolute，中间使用margin -->
<!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>
       .container{
           position: relative;
       }

       .left,.right,.main{
           height: 200px;
           text-align: center;
           line-height: 200px;
       }

       .left{
           position: absolute;
           top: 0;
           left: 0;
           width: 100px;
           background-color: antiquewhite;
       }
       .right{
           position: absolute;
           top: 0;
           right: 0;
           width: 100px;
           background-color: aquamarine;
       }
       .main{
           margin: 0 110px;
           background-color: black;
           color: aliceblue;
       }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">左边固定宽度</div>
        <div class="right">右边固定宽度</div>
        <div class="main">中间自适应</div>
    </div>
</body>

</html>

4、方法4

  • 使用方法：两边使用float和负margin

原理：

  1. 中间是以哦那个双层标签，外层浮动，以便于左中右可以在一行展示
  2. 左边通过使用负margin：-100%向上偏移到左侧
  3. 右边通过使用margin-left：-100px；相对于自身的宽度，向上偏移到最右侧
  • 缺点：margin负值调试会麻烦，中间双层结构较麻烦
<!-- 两边使用float和负magin -->
<!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,
        .right,
        .main {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }

        .main-wrapper {
            float: left;
            width: 100%;
        }

        .main {
            margin: 0 110px;
            background: black;
            color: white;
        }

        .left,
        .right {
            float: left;
            width: 100px;
            /* margin-left: -100%; */
            background: green;
        }

        .right {
            margin-left: -100px;
            /* 同自身宽度 */
        }
    </style>
</head>

<body>
    <div class="main-wrapper">
        <div class="main">中间自适应</div>
    </div>
    <div class="left">左边固定宽度</div>
    <div class="right">右边固定宽度</div>
</body>

</html>

5、方法5 推荐使用-grid

  • 使用方法：grid网格布局
  • grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高
<!-- grid网格布局 -->
<!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>
      .wrap{
          display: grid;
          width: 100%;
          grid-template-columns: 300px auto 300px;
      }
      .left,.middle,.right{
        height: 200px;
      }
      .left{
        background-color: aqua;
      }
      .right{
          /* width: 300px; */
          background-color: antiquewhite;
      }
      .middle{
          background-color: blue;
      }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="left">左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

圣杯布局

圣杯布局的特点：

  • 上下为通栏，下通栏清浮动
  • 中间为三栏布局，子元素按中左右的顺序浮动float:left

宽度

  • 左边栏宽度固定 = 父元素的左内边距padding-left
  • 右边栏宽度固定 = 父元素的右内边距padding-right
  • 中间内容宽度 = 100%

位置

  • 左右边栏相对定位position:relative
  • 左边栏左外边距margin-left: -100%，right:宽度
  • 右边栏左外边距margin-left:-宽度，right:-宽度
    注意
  • 需设置最小宽度min-width，避免视窗宽度过小，浮动错位
    在这里插入图片描述
<!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>
        body {
            margin: 0;
        }

        div {
            text-align: center;
            color: #fff;
        }

        .header,
        .footer {
            height: 50px;
            background-color: pink;
            line-height: 50px;
        }

        .content {
            padding-left: 200px;
            padding-right: 150px;
            min-width: 500px;
            line-height: 500px;
        }

        .content>div {
            float: left;
            height: 500px;
        }

        .center {
            width: 100%;
            background-color: mediumturquoise;
        }

        .left,
        .right {
            position: relative;
        }

        .left {
            width: 200px;
            right: 200px;
            margin-left: -100%;
            background-color: skyblue;
        }

        .right {
            width: 150px;
            right: -150px;
            margin-left: -150px;
            background-color: lightsteelblue;
        }

        .footer {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="header">header</div>
    <div class="content">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>

双飞翼布局

双飞翼布局由淘宝UED发扬，是通过浮动和定位实现三栏布局的一种方案之一
双飞翼布局的特点：

  • 上下为通栏，下通栏清浮动
  • 中间为三栏布局，子元素按中左右的顺序浮动float:left

宽度

  • 左边栏宽度固定 = 中间内容子元素左外边距margin-left
  • 右边栏宽度固定 = 中间内容子元素右外边距margin-right
  • 中间内容宽度 = 100%

位置

  • 左边栏左外边距margin-left: -100%
  • 右边栏左外边距margin-left:-宽度
    在这里插入图片描述
<!-- 中左右顺序浮动float：left -->
<style>
  body { margin: 0; }
  div {
    text-align: center;
    color: #fff;
  }
  .header, .footer {
    height: 50px;
    background-color: pink;
    line-height: 50px;
  }
  .content > div {
    float: left;
    height: 500px;
    line-height: 500px;
  }
  .center {
    width: 100%;
    background-color: mediumturquoise;
  }
  .inner {
    height: 500px;
    margin-left: 200px;
    margin-right: 150px;
  }
  .left {
    margin-left: -100%;
    width: 200px;
    background-color: skyblue;
  }
  .right {
    margin-left: -150px;
    width: 150px;
    background-color: lightsteelblue;
  }
  .footer {
  clear: both;
  }
</style>
<div class="header">header</div>
<div class="content">
<div class="center">
<div class="inner">center-inner</div>
<div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="footer">footer</div>

瀑布流布局

  • 瀑布流布局的特点：等宽分栏，每一栏的宽度肯不同
  • css部分实现为外观布局，js辅助来实现数据加载顺序

实现方法：

  • 多列布局（分栏布局）
  • 弹性布局

多列布局：

  • 通过column-count设置栏数，column-gap设置间距
  • 设置break-inside: avoid避免元素在分栏时中断
<!-- 多列布局 -->
<style>
  .content {
    column-count: 3;
    column-gap: 5px;
  }
  .content > div {
    margin-bottom: 5px;
    break-inside: avoid;
    color: white;
  }
  .d1, .d5, .d7 {
    height: 100px;
    background-color: skyblue;
  }
  .d2, .d3, .d9 {
    height: 200px;
    background-color: mediumturquoise;
  }
  .d4, .d6, .d8 {
    height: 300px;
    background-color: lightsteelblue;
  }
</style>
<div class="content">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
  <div class="d6">6</div>
  <div class="d7">7</div>
  <div class="d8">8</div>
  <div class="d9">9</div>
</div>

弹性布局：

  • 水平：栏目间弹性布局，通过margin设置间距
  • 垂直：栏目内弹性布局，通过flex-direction: column沿垂直轴
<!-- 弹性布局 -->
<style>
.content {
  display: flex;
}
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-right: 5px;
}
.column:last-child {
  margin-right: 0;
}
.content div {
  margin-bottom: 5px;
  color: white;
}
.d1, .d5, .d7 {
  height: 100px;
  background-color: skyblue;
}
.d2, .d3, .d9 {
  height: 200px;
  background-color: mediumturquoise;
}
.d4, .d6, .d8 {
  height: 300px;
  background-color: lightsteelblue;
}
</style>
<div class="content">
  <div class="column">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
  </div>
  <div class="column">
    <div class="d4">4</div>
    <div class="d5">5</div>
    <div class="d6">6</div>
  </div>
  <div class="column">
    <div class="d7">7</div>
    <div class="d8">8</div>
    <div class="d9">9</div>
  </div>
</div>
偷吃零食的小猫咪
关注
  • 4
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
四种常见CSS布局
gyypwrs的博客
07-26 1201
在本文章中页面的内容由三部分组成 header，content，footer组成 单列布局 含义：页面的内容只有一列，并且这一列居中显示。 实现方法：最主要的就是让内容块居中显示，这里居中显示的方法就是使用margin：0 auto。还可以使用其他居中方法 ，下一篇文章整理主要的居中方法。 代码实现： HTML： <nav></nav> <div class="content"></div> <footer></footer> CS
HTML+CSS常见布局面试题总结
10-31
...`<header>`、`<nav>`、`<main>`、`<article>`、`...以上是HTML+CSS常见布局面试题的主要知识点，熟练掌握这些概念和技术，有助于提升前端开发的效率和质量。在实践中不断探索和应用，才能真正成为布局设计的专家。
几种常见的CSS布局
weixin_33816611的博客
11-08 419
本文概要 本文将介绍如下几种常见的布局： 其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法 一、单列布局 常见的单列布局有两种： header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 1.如何实现 对于第一种，先通过对header,content,footer统一设置wid...
常见的CSS布局方法
最新发布
Keep_Calm_的博客
06-21 674
常见的CSS布局方法
css常见布局
lemon今天学习了吗？的博客
05-25 225
除了平时用到的margin和flex布局的居中方式，这里还要一种grid布局也可以实现垂直水平居中。
CSS中的布局方式
韩旭不会敲代码吧的博客
07-17 455
前言 CSS的布局方式多种多样，那么我们改如何去合理选择自己所需的布局方式呢，让我们一起来交流一下。 一、标准流(普通流/文档流) 1、所谓的标准：就是标签按照规定好默认方式排列 (1)块级元素会独占一行，从上向下顺序排列 常用元素：div,hr,p,h1,ul,ol,form,table (2)行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行 常用元素：span,a,i,em等 标准流是最基本的布局方式 二、浮动布局 1、浮动最典型的应用：可以让多个块级元素一行内排列显示 2、网页布局第一准
CSS网页布局实例 常见的12种网页布局
12-08
本篇文章将深入探讨12种常见的CSS网页布局实例，帮助你为你的网站创建出引人注目的界面。 1. **单一列布局**：这是最基础的布局，整个页面只有一列内容，适用于博客或个人主页，简洁明了。 2. **两列固定宽度布局*...
CSS网页布局全精通
12-10
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章：CSS网页布局开发小技巧24则 稍后在"技巧延伸"中,将会讨论Windows版...
常见的CSS布局
11-14
本文将深入探讨“常见的CSS布局”这一主题，涵盖基本布局概念、常见布局模式以及实现这些布局的技术。 首先，我们需要了解CSS布局的基本原理。CSS布局的核心在于盒模型，它包括内容（content）、内边距（padding）...
CSS两列布局实现方式总结
01-21
两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。 1. absolute + margin 方式 首先想到的是利用 absolute + margin 的方式...
CSS常用布局
Rui012345的博客
04-10 131
目录 1.品字布局 （1）满屏品字布局 ​（2）品字布局（每块都有固定宽高） 2.去掉inline-block间隔的方法 （1）移除标签空格 （2）使用margin负值 （3）font-size （4）使用letter-spacing （5）word-spacing 1.品字布局 （1）满屏品字布局 <div style="margin:0 auto;height...
常见的CSS布局总结
前端小工
10-13 2020
两行布局：头部高度固定，尾部高度为剩余高度方法：尾部元素设置 position: absolute; top:顶部元素的高度，bottom：0；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{
css的常用布局方式
mwtopfire的博客
03-10 2167
1）最常见的 浮动、定位 2）自适应 百分比布局 3）响应式 @media媒体查询 4）弹性布局 display:flex;弹性布局简介： 背景引入：提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调
5种常见的css布局
weixin_44022374的博客
05-21 334
本文将介绍如下几种常见的布局： 其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法。 单列布局 常见的单列布局有两种： header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 1.如何实现 对于第一种，先通过对header,content,footer统一设置width：1000p...
css多种布局方式
博哥的二进制世界
05-14 2308
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
常见css布局问题整理
dd的博客
09-18 992
常见css布局问题整理
Div+CSS布局完全指南
在网页设计中，`DIV+CSS`布局是一种常见的页面结构方式，它将内容（HTML元素）与样式（CSS）分离，提高了页面的可维护性和性能。以下是这份资料中涉及的一些关键知识点： 1. **DOCTYPE**：DOCTYPE声明是HTML或XHTML...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值