几种常见的CSS布局

最新推荐文章于 2023-11-02 20:43:16 发布
最新推荐文章于 2023-11-02 20:43:16 发布
阅读量198 收藏 1
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinjiangQAQ/article/details/104063709
版权

单列布局

header,content和footer等宽的单列布局

在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        .header {
            margin: 0 auto;
            max-width: 960px;
            height: 100px;
            background-color: blue;
        }
        
        .content {
            margin: 0 auto;
            max-width: 960px;
            height: 400px;
            background-color: aquamarine;
        }
        
        .footer {
            margin: 0 auto;
            max-width: 960px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>

</body>

</html>

header与footer等宽,content略窄的单列布局

在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        .header {
            margin: 0 auto;
            max-width: 960px;
            height: 100px;
            background-color: blue;
        }
        
        .nav {
            margin: 0 auto;
            max-width: 800px;
            background-color: darkgray;
            height: 50px;
        }
        
        .content {
            margin: 0 auto;
            max-width: 800px;
            height: 400px;
            background-color: aquamarine;
        }
        
        .footer {
            margin: 0 auto;
            max-width: 960px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="nav"></div>
    </div>
    <div class="content"></div>
    <div class="footer"></div>
</body>

</html>

两列自适应布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式
在这里插入图片描述

float+overflow:hidden

如果是普通的两列布局，浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。具体代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        .parent {
            overflow: hidden;
            zoom: 1;
        }
        
        .left {
            float: left;
            margin-right: 20px;
        }
        
        .right {
            overflow: hidden;
            zoom: 1;
        }
    </style>
</head>

<body>
    <div class="parent" style="background-color: lightgrey;">

        <div class="left" style="background-color: lightblue;">

            <p>left</p>
        </div>

        <div class="right" style="background-color: lightgreen;">

            <p>right</p>

            <p>right</p>
        </div>
    </div>

</body>

</html>

flex布局实现

Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。
实现代码：

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        .parent {
            display: flex;
        }
        
        .right {
            margin-left: 20px;
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="parent" style="background-color: lightgrey;">

        <div class="left" style="background-color: lightblue;">

            <p>left</p>
        </div>

        <div class="right" style="background-color: lightgreen;">

            <p>right</p>

            <p>right</p>
        </div>
    </div>

</body>

</html>

grid布局

Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        .parent {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-gap: 20px
        }
    </style>
</head>

<body>
    <div class="parent" style="background-color: lightgrey;">

        <div class="left" style="background-color: lightblue;">

            <p>left</p>
        </div>

        <div class="right" style="background-color: lightgreen;">

            <p>right</p>

            <p>right</p>
        </div>
    </div>

</body>

</html>

三栏布局

特征：中间列自适应宽度，旁边两侧固定宽度，实现三栏布局有多种方式，着重讲圣杯布局和双飞翼布局。

圣杯布局

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        .container {
            padding-left: 220px;
            padding-right: 220px;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 400px;
            background: red;
            margin-left: -100%;
            position: relative;
            left: -220px;
        }
        
        .center {
            float: left;
            width: 100%;
            height: 500px;
            background: yellow;
        }
        
        .right {
            float: left;
            width: 200px;
            height: 400px;
            background: blue;
            margin-left: -200px;
            position: relative;
            right: -220px;
        }
    </style>
</head>

<body>

    <article class="container">

        <div class="center">

            <h2>圣杯布局</h2>
        </div>

        <div class="left"></div>
        <div class="right"></div>
    </article>


</body>

</html>

实现步骤：

  • 三个部分都设定为左浮动，否则左右两边内容上不去，就不可能与中间列同一行。然后设置center的宽度为100%(实现中间列内容自适应)，此时，left和right部分会被挤到下一行
  • 通过设置margin-left为负值让left和right部分回到与center部分同一行
  • 通过设置父容器的padding-left和padding-right，让左右两边留出间隙。这样的空隙，也就是为了到时候，左右界面分别移动到左右边界的分界线，左右界面和中间界面的分界
  • 空隙先预留好了，此时的左右界面还有跟中间界面黏在一块的，我们要让左右界面基于中间界面做移动。通过设置相对定位，设置left和right的值，让左右部分移动到两边。

但是这样的圣杯布局有缺点：

  • center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行
  • 如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助伪等高布局可解决)
解决方法伪等高布局

实现的方法很简单，我们的需求是，所有的列的高度都要一样。但是既然叫做伪等高。是因为，并没有实际设置这三个的列的高度相同。
我们先设置一个设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，并在包裹这三列的容器container设置overflow:hidden把溢出背景切掉。这样就相当于把这三列都以container的高度为主了，但是container的高度是由高度最大的center撑开的，所以以center的高度为主

双飞翼布局

同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        .container {
            min-width: 600px;
            /* 确保中间内容可以显示出来，两倍left宽+right宽 */
            overflow: hidden;
        }
        
        .center,
        .left,
        .right {
               /* 伪等高采取的，跟上面一样 */
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 400px;
            background: red;
            margin-left: -100%;
        }
        
        .center {
            float: left;
            width: 100%;
            height: 500px;
            background: yellow;
        }
        
        .center .inner {
            text-align: center;
            margin: 0 200px;
            /* 新增部分 */
        }
        
        .right {
            float: left;
            width: 200px;
            height: 400px;
            background: blue;
            margin-left: -200px;
        }
    </style>
</head>

<body>

    <article class="container">

        <div class="center">

            <div class="inner">双飞翼布局</div>
        </div>

        <div class="left"></div>
        <div class="right"></div>
    </article>


</body>

</html>

实现步骤：

  • 三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行
  • 通过设置margin-left为负值让left和right部分回到与center部分同一行，此时形状看起来像是已经实现了双飞翼了，但是还不行
  • center部分增加一个内层div，并设margin: 0 200px；这层新加的才是真正的center，center需要写的东西在这一层新增的div里面写

缺点：多加一层 dom 树节点，增加渲染树生成的计算量。

两种布局实现方式对比:

  • 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局
  • 两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距+两个从列相对定位；双飞翼布局则是在center新增一个内嵌的div，在div里面调整左右外间距等于left,right的宽度。然后在这一层新增的div里面写真正的center的内容

参考

推荐阅读：https://blog.csdn.net/VhWfR2u02Q/article/details/84076421

yinjiangQAQ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS常见布局整理
Web_boom的博客
01-03 2805
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
几种常见的 CSS 布局
zqf1314的博客
10-24 182
几种常见的 CSS 布局 本文概要 本文将介绍如下几种常见的布局： 单列布局 两列自适应布局 圣飞布局和双飞翼布局 伪等高布局 粘连布局 一、单列布局 常见的单列布局有两种： header,content和footer等宽的单列布局 header与footer等宽,content略窄的单...
CSS页面布局（超详解）
热门推荐
m0_52896041的博客
12-02 2万+
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。
【css】最全布局总结
qq_45406325的博客
08-13 7675
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
css布局教程 — 这一篇足够了
qq_60754128的博客
11-11 3927
display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
css常见布局方式
DZQ1223的博客
06-13 3593
CSS 的布局应该是 CSS 体系中的重中之重，主要的布局方式有 table 表格布局（早期），float 浮动布局、position布局和 flex 布局。布局方式优点缺点浮动布局兼容性好，支持大多数浏览器；可以实现多列布局。容易出现清除浮动问题，需要额外的样式规则来处理；不太适合复杂的布局需求，例如垂直居中和等高布局。定位布局灵活性较高，可以精确控制元素的位置；可以实现重叠布局效果。对于复杂布局，需要手动计算和调整元素的位置和尺寸。
常见的CSS居中布局
WFL804203164的博客
03-11 349
flex布局 .box { width: 500px; height: 500px; border: 1px solid red; margin: 100px auto; display: flex; /* 核心代码 */ justify-content: center; /* 核心代码 */ align-items: cent
css等高布局常用几种方式
01-19
等高布局的方式 指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说,又分为两类 伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高. 真等高 子元素高度相等 先来看看伪等高实现方式 通过负...
几种常见的CSS布局(小结)
01-19
本文将介绍如下几种常见的布局： 其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法 一、单列布局 常见的单列布局有两种： header,content和footer等宽的...
浅谈css网页的几种布局
01-19
2018年已经过了一周，总结一下2017年在公司wiki上写的一篇关于css布局的知识，当时也借鉴了几个大神写的css布局知识，和自己在项目中遇到的坑。废话不多说。请看以下的干货。 1、左边固定，右边自适应布局的两种实现...
关于CSS的几种经典布局
09-30
这个对Web界面布局比较有帮助，感性趣的可以来看看！希望没有浪费你的积分……
css flex几种多列布局
09-22
主要介绍了css flex几种多列布局的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS 实现 10 种现代布局，你都会了吗
web全栈开发的博客
10-21 627
01. 超级居中：place-items: center对于第一个“单行”布局，让我们解决所有 CSS 领域中最大的谜团：居中。我想让您知道，使用 place-items: center 会让此操作比您想象的容易。首先指定 grid 作为 display 方法，然后在同一个元素上写入 place-items: center。place-items 是同时设置 align-items 和 justi...
CSS布局汇总
妍思码匠的博客
07-10 394
他是早期最常见的布局，使用需要注意以下几点：1，他是脱离文档流的布局方式，设置float属性会使元素从文档流中移除，因此周围的元素会重新排列适应他的位置，很容易导致父元素高度坍塌，因此开发时需合理设计2，使用之后需要通过clear属性清除浮动position的属性值有5个：static、relative、absolute、fixed、sticky静态定位，即无任何定位（相当于border中的none）。通常不需要设置相对定位，相对于元素本身原来在文档流中的位置进行定位。使用left、right、top、bo
css布局方式
m0_74385608的博客
04-15 416
最近在学css的布局方式，所以就来聊聊布局吧以上就是弹性盒子，当然还有许多属性没讲，作者也没学，所以就到这吧。
CSS布局大全
huang714的专栏
09-29 3099
一、单列布局 1.普通布局（头部、内容、底部） <div class="container"> <header></header> <div class="content"></div> <footer></footer> </div> .container { width: 80%; .
爆肝！！一文带你全面学习Css所有布局方式
最新发布
weixin_53061926的博客
11-02 406
爆肝！！！一篇文章带你全面学习 css的所有布局方式，相信绝对能帮到您
css常见的几种布局
weixin_69658317的博客
08-17 2980
css常见布局

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值