CSS布局那些事儿,两栏三栏我全会!

今天讲一讲css中常考的两栏布局和三栏布局。

两栏布局

是什么

两栏布局是一种常见的网页布局,用于将页面内容分成左右两个部分

实现方式

看下面代码,如果我们要实现左边内容固定200px,右边占据剩下的空间。应该怎么做呢?

html 复制代码
<div class="wrap">
    <div class="left">left</div>
    <div class="right">right</div> 
 </div>

flex

css 复制代码
<style>
    .wrap{
      height: 200px;
      display: flex;
    }
    .left{
      height: 100%;
      background-color: aqua;
      flex-basis: 200px;
    }
    .right{
      height: 100%;
      background-color: bisque;
      flex: 1;
    }
  </style>

grid

css 复制代码
<style>
    .wrap{
      height: 200px;
      display: grid;
      grid-template-columns: 200px 1fr;
    }
    .left{
      height: 100%;
      background-color: aqua;
    }
    .right{
      height: 100%;
      background-color: bisque;
    }
  </style>

float + BFC || margin-left

css 复制代码
<style>
    .wrap{
      height: 200px;
    }
    .left{
      height: 100%;
      width: 200px;
      background-color: aqua;
      float: left;
    }
    .right{
      height: 100%;
      background-color: bisque;
      overflow: auto; // margin-left: 200px;
    }
  </style>

效果图:

三栏布局

是什么

和两栏布局一样,是一种常见的网页布局,只是将页面内容分成了左中右三部分。

实现方式

  1. flex
  2. grid
  3. 左右先加载中间后加载:float
  4. 圣杯布局:float + margin负值 + position:relative(中间内容先加载)
  5. 双飞翼布局:float + margin负值(中间内容先加载)

前三种就过多赘述了,和两栏布局一样的,这里重点讲一下圣杯布局和双飞翼布局。

圣杯布局

html 复制代码
<style>
    .wrap{
      height: 200px;
      margin: 0 200px; // 左右两边留下边距用于放左右的内容
    }
    .left{
      height: 100%;
      width: 200px;
      background-color: aqua;
      float: left;
      position: relative;
      right: 200px;
      margin-left: -100%;
    }
    .right{
      height: 100%;
      width: 200px;
      background-color: bisque;
      float: right;
      position: relative;
      left: 200px;
      margin-left: -100%;
    }
    .content{
      height: 100%;
      width: 100%;
      background-color: rgb(15, 186, 55);
      float: left;
    }
    
  </style>
</head>
<body>
  <div class="wrap">
    <div class="content">content</div>
    <div class="left">left</div>
    <div class="right">right</div> 
  </div>
</body>

双飞翼布局

html 复制代码
<style>
    .wrap{
      height: 200px;
    }
    .left{
      height: 100%;
      width: 200px;
      background-color: aqua;
      float: left;
      margin-left: -100%;
    }
    .right{
      height: 100%;
      width: 200px;
      background-color: bisque;
      float: right;
      margin-left: -100%;
    }
    .container{
      height: 100%;
      width: 100%;
      background-color: rgb(15, 186, 55);
      padding: 0 200px;
      box-sizing: border-box;
      float: left;
    }
    
  </style>
</head>
<body>
  <div class="wrap">
    <div class="container">
      <div class="content">content</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div> 
  </div>
</body>

效果图

假如您也和我一样,在准备春招。欢迎加我微信shunwuyu,这里有几十位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!

相关推荐
子兮曰2 小时前
🚀别再乱写package.json了!这些隐藏技巧让项目管理效率提升300%
前端·javascript·npm
我叫汪枫2 小时前
Spring Boot图片验证码功能实现详解 - 从零开始到完美运行
java·前端·javascript·css·算法·html
小桥风满袖2 小时前
极简三分钟ES6 - ES8中async,await
前端·javascript
一直在学习的小白~3 小时前
node_modules 明明写进 .gitignore,却还是被 push/commit 的情况
前端·javascript·vue.js
前端小超超3 小时前
如何配置capacitor 打包的ios app固定竖屏展示?
前端·ios·web app
nightunderblackcat3 小时前
新手向:从零理解LTP中文文本处理
前端·javascript·easyui
kyle~3 小时前
python---PyInstaller(将Python脚本打包为可执行文件)
开发语言·前端·python·qt
User:你的影子3 小时前
WPF ItemsControl 绑定
开发语言·前端·javascript
会有钱的-_-4 小时前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
海梨花4 小时前
字节一面 面经(补充版)
jvm·redis·后端·面试·juc