CSS经典布局大揭秘

最新推荐文章于 2024-04-22 15:38:52 发布
最新推荐文章于 2024-04-22 15:38:52 发布
阅读量234 收藏 1
点赞数 1
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38207472/article/details/102655869
版权

上一篇的文章介绍了BFC块级格式化上下文，BFC是CSS中的常用技巧。今天我们将详细地介绍网页中的常见布局，运用BFC，也或者是flex弹性布局。

1 两栏布局

两栏布局是非常常见的布局方案，在许多网站中都运用到这一布局。说到两栏布局，最常见的就是管理后台系统。左侧菜单栏固定宽度，右侧主要内容随窗口变化而自适应。

1.1 传统浮动方法
<!DOCTYPE html>
<html lang="en">

<head>
    <title>左定右适应两栏布局</title>
    <style>
        .aside {
            padding: 10px;
            width: 200px;
            float: left;
            background: rgb(212, 74, 208);
        }

        .right {
            padding: 10px;
            /* 创建BFC，避开浮动盒子 */
            overflow: hidden;
            background: rgb(20, 228, 100);
        }

        .container {
            padding: 10px;
            margin: 0 auto;
        }

        /* 清除浮动 */
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="container">
        <aside class="aside">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, blanditiis! Dolorem
            temporibus, laboriosam numquam cupiditate omnis nobis, doloremque itaque exercitationem, veritatis explicabo
            nisi animi accusantium consequatur a! Aliquid, quia voluptate.</aside>
        <div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos nostrum repudiandae
            reprehenderit temporibus ullam id blanditiis neque rerum obcaecati soluta, possimus sed ad vel aliquam harum
            odit ut quidem. Optio!Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos nostrum repudiandae
            reprehenderit temporibus ullam id blanditiis neque rerum obcaecati soluta, possimus sed ad vel aliquam harum
            odit ut quidem. Optio!Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos nostrum repudiandae
            reprehenderit temporibus ullam id blanditiis neque rerum obcaecati soluta, possimus sed ad vel aliquam harum
            odit ut quidem. Optio!Lorem ipsum dolor sit amet consectetur adipisicing elit. odit ut quidem. Optio!Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos nostrum repudiandae
            reprehenderit temporibus ullam id blanditiis neque rerum obcaecati soluta, possimus sed ad vel aliquam harum
            odit ut quidem. Optio!Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos nostrum repudiandae
            reprehenderit temporibus ullam id blanditiis neque rerum obcaecati soluta, possimus sed ad vel aliquam harum
            odit ut quidem. Optio!Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    </div>
</body>

</html>

效果如下：
在这里插入图片描述
主要思路：

  • 先写两个div，侧边栏可以使用aside标签。
  • 让侧边栏向左浮动，脱离文档流
  • 这个时候，右侧主要内容会忽视浮动元素，所以让右侧的div创建一个BFC，这样可以达到避开浮动元素的效果
  • 如有需要设置两者间距，切记不能设置右侧div的margin-left，因为它参照的是页面左边缘，而不是aside元素。我们因该为侧边栏设置margin-right的值，以此达到调整间距的需求
1.2 有助于搜索引擎查找关键词的方法

和前面不一样，为了让搜索引擎能尽快拿到关键词，我们会把含有大量主要内容的右侧div写在前面。
主要思路：

  • 让右侧div空出左侧空间用于放置aside元素
  • 运用绝对定位将侧边栏定死在左侧位置
    代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <title>左定右适应两栏布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .aside {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 10px;
            width: 200px;
            background: rgb(212, 74, 208);
        }

        .right {
            margin-left: 300px;
            padding: 10px;
            background: rgb(20, 228, 100);
        }

        .container {
            padding: 10px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos nostrum repudiandae
            reprehenderit temporibus ullam id blanditiis neque rerum obcaecati soluta, possimus sed ad vel aliquam harum
            odit ut quidem. Optio!Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos nostrum repudiandae
            reprehenderit temporibus ullam id blanditiis neque rerum obcaecati soluta, possimus sed ad vel aliquam harum
            odit ut quidem. Optio!Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos nostrum repudiandae
            reprehenderit temporibus ullam id blanditiis neque rerum obcaecati soluta, possimus sed ad vel aliquam harum
            odit ut quidem. Optio!Lorem ipsum dolor sit amet consectetur adipisicing elit. odit ut quidem. Optio!Lorem
            ipsum dolor sit amet consectetur adipisicing elit. Eos nostrum repudiandae

        </div>
        <aside class="aside">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, blanditiis! Dolorem
            temporibus, laboriosam numquam cupiditate omnis nobis, doloremque itaque exercitationem, veritatis explicabo
            nisi animi accusantium consequatur a! Aliquid, quia voluptate.</aside>

</body>

</html>
1.3 flex实现

flex弹性布局是CSS3的牛逼特性之一，从此多了一种布局的方式，而且非常强大。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        .container {
            padding: 20px;
            height: 500px;
            border: 1px solid #222;
            /* 设置弹性布局 */
            display: flex;
            /* 设置排列方式 */
            flex-flow: row;
        }

        .aside {
            width: 200px;
            margin-right: 20px;
            background: #0eb3ff;
        }

        .main {
            /* 占满剩余空间 */
            flex: 1;
            background: #faaf0d;
        }
    </style>
</head>

<body>
    <div class="container">
        <aside class="aside"></aside>
        <div class="main"></div>
    </div>
</body>

</html>

我们会发现，代码非常简洁，思路非常清晰。运用flex我们可以很轻松地做出等高布局。效果如下：
在这里插入图片描述

2 三栏布局

和两栏布局一样，都有多种方法。

2.1 浮动方案
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局</title>
    <style>
        .container {
            padding: 10px;
            border: 1px solid #000;
            overflow: hidden;
        }

        .left,
        .right {
            width: 200px;
            padding: 10px;
            background: rgb(123, 163, 250);
        }

        .left {
            float: left;
            margin-right: 20px;
        }

        .right {
            float: right;
            margin-left: 20px;
        }

        /* 注意处理中间板块的问题，文字之所以会避开浮动元素，是因为行级元素的特性 */
        .main {
            padding: 10px;
            border: 1px solid #000;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="container">
        <aside class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere obcaecati, tempora
            repellendus explicabo quibusdam soluta quaerat, ducimus sed iste praesentium, quisquam placeat sunt dolores
            optio voluptatem fugiat eum laborum architecto?</aside>
        <aside class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere obcaecati, tempora
            repellendus explicabo quibusdam soluta quaerat, ducimus sed iste praesentium, quisquam placeat sunt dolores
            optio voluptatem fugiat eum laborum architecto?Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </aside>
        <div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere obcaecati, tempora repellendus
            explicabo quibusdam soluta quaerat, ducimus sed iste praesentium, quisquam placeat sunt dolores optio
            voluptatem fugiat eum laborum architecto?</div>
    </div>
</body>

</html>

主要思路：

  • 先写左右侧边栏，再写中间div
  • 让左右侧边栏分别浮动，这样两者就会浮动在两边
  • 注意处理中间div，看起来文字已经避开了浮动的侧边栏，实际上整个div还是占了一整行，因为行级元素本身就不会忽略浮动元素。所以我们应该给这个div创建BFC，以此达到避开浮动元素的效果。

效果如下：
在这里插入图片描述

2.2 方便搜索引擎抓取关键字方法

和两栏布局一样，三栏布局更是需要如此。思路基本和两栏布局1.2一样，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局</title>
    <style>
        .container{
            padding: 10px;
            border: 1px solid #000;
        }

        aside {
            position: absolute;
            background: royalblue;
        }

        .main {
            margin: 0 300px;
        }

        .left {
            width: 200px;
            left: 10px;
            top: 10px;
            margin-right: 20px;
        }

        .right {
            width: 200px;
            right: 10px;
            top: 10px;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium neque distinctio pariatur
            ut, id excepturi debitis ea provident. Sequi nesciunt est voluptate commodi. Sint quo dignissimos, odit ut
            voluptatum aspernatur.Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium neque distinctio pariatur
            ut, id excepturi debitis ea provident. Sequi nesciunt est voluptate commodi. Sint quo dignissimos, odit ut
        </div>
        <aside class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit. </aside>
        <aside class="right">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </aside>
    </div>
</body>

</html>
2.3 双飞翼布局VS圣杯布局

这两种布局是面试中常问的，解决问题都是实现三栏布局，思路基本一致，只不过在处理中间栏不被遮盖的方式上有所不同。

双飞翼布局
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container div {
            height: 300px;
        }

        .main {
            float: left;
            width: 100%;
            background: rgb(52, 197, 216);
        }

        .left {
            float: left;
            margin-top: -300px;
            width: 200px;
            background: rgb(233, 229, 18);
        }

        .right {
            float: right;
            margin-top: -300px;
            width: 200px;
            background: rgb(211, 18, 236);
        }
        .bag{
            margin: 0 200px;
            background: rgb(52, 197, 216);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="bag">
            <div class="main"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>
圣杯布局
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container{
            padding: 0 200px;
        }

        .container div {
            float: left;
            height: 300px;
        }

        .main {
            width: 100%;
            background: rgb(52, 197, 216);
        }

        .left {
            position: relative;
            left: -200px;
            margin-left: -100%;
            width: 200px;
            background: rgb(233, 229, 18);
        }

        .right {
            position: relative;
            right: -200px;
            margin-left: -200px;
            width: 200px;
            background: rgb(211, 18, 236);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

圣杯布局采用的方式是主动为左右侧边栏留空间，即父元素设置左右padding；相反双飞翼布局，中间栏主动放弃争抢，独自占领div，设置左右margin。具体还是要具体体会，思想是一致的，但是不同人写的代码还是稍有不同。

3 居中
  • 运用定位

运用绝对定位，然后再让矩形中心移动到中点，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -150px;
            background: rgb(255, 187, 0);
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="container"></div>
</body>

</html>

效果如下：
在这里插入图片描述

  • 运用弹性布局

运用flex，结合主轴侧轴居中，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>flex居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html{
            display: flex;
            /* 主轴 */
            justify-content: center;
            /* 侧轴 */
            align-items: center;
            height: 100%;
        }
        .main{
            display: flex;
            /* 主轴 */
            justify-content: center;
            /* 侧轴 */
            align-items: center;
            height: 500px;
            width: 500px;
            background: rgb(68, 228, 240);
        }
        .container {
            background: rgb(255, 88, 11);
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="container"></div>
    </div>
</body>

</html>

效果如下：
在这里插入图片描述

  • 巧用line-height
<!DOCTYPE html>
<html lang="en">

<head>
    <title>运用line-height实现居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .div{
            width: 200px;
            height: 50px;
            color: #eee;
            font-weight: bold;
            text-align: center;
            line-height: 50px;
            background: rgb(49, 85, 248);
        }
    </style>
</head>

<body>
    <div class="div">测试文字居中</div>
</body>

</html>

效果如下：
在这里插入图片描述
如果想了解BFC的相关知识，可以参考https://blog.csdn.net/weixin_38207472/article/details/102646450

Hans Huang
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css经典全布局
weixin_44667463的博客
02-20 1558
css经典超全布局
分享10个常见的CSS3页面布局
黑马程序员官方博客
05-22 2934
在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；瀑布流也是一种很常见的布局，尤其是在图片信息流的产品，以往如果要完美的实现瀑布流，我们需要费不少的功夫，还要借助JS进行实现。两列布局，左边是导航栏目，右边是内容部分。尤其在后台的场景，是非常常用的。圣杯布局，不用我多说，想必每个前端人都做过这样的页面结构，如下图所示。如下图所示，卡片布局是我们常见的一种页面布局。
CSS 实现 10 种现代布局，你都会了吗
web全栈开发的博客
10-21 586
01. 超级居中：place-items: center对于第一个“单行”布局，让我们解决所有 CSS 领域中最大的谜团：居中。我想让您知道，使用 place-items: center 会让此操作比您想象的容易。首先指定 grid 作为 display 方法，然后在同一个元素上写入 place-items: center。place-items 是同时设置 align-items 和 justi...
如何用一行 CSS 实现 10 种现代布局
最新发布
2401_84103903的博客
04-22 397
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
7个带有示例的CSS网格布局实例
web前端开发
05-11 1086
英文 |https://betterprogramming.pub/top-7-css-grid-layout-concepts-with-examples-18c85e4d0b27翻译...
css的经典布局：行布局、列布局、两栏布局6种方法、三栏布局6种方法
weixin_45709829的博客
04-09 4582
一、行布局 经典的行布局，页面结构是头、主体内容、尾一行行排列。常应用于网站的首页。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .header, .main, .footer { /*居中*/
[变幻之美-DivCSS网页布局揭秘(内含源码)
08-21
CSS揭秘绝对是网页前端初学者必备必须的好书，实践出真知嘛，内含有配套源码，如果有问题无法解决，可以参照源码纠错
[变幻之美-DivCSS网页布局揭秘-案例实战篇](金峰) 源码+PDF
02-25
《变幻之美:Div+CSS网页布局揭秘(案例实战篇)》通过作者原创的4个案例，细致地介绍了基于Web标准的Div CSS网页布局的实现方法。每个案例均按照效果图设计、效果图切割、HTML代码编写、页面效果分析，以及最终CSS页面...
html格局样式,CSS样式经典布局
weixin_39664746的博客
06-16 269
五种 CSS 经典布局页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。这几个布局都是自适应的，自动适配桌面设备和移动设备。代码实现很简单，核心代码只有一行。我会用到 CSS 的 Flex 语法和 Grid 语法，不过只用到一点点，不熟悉的朋友可以先看看教程链接，熟悉一下基本概念。每一个布局都带有 CodePen 示例，也可以到这个网页统一查看。一、空间居中布局空间居中布局指的是，不管容...
CSS40个布局实例
08-13
关于CSS40个布局实列CSS布局大全:40多个教程,提示,例子和最佳实践 CSS布局教程 1-Three column fixed layout structure using CSS- 这篇文章解释了如何显示HTML/CSS基本结构。 2-Design page layout using CSS- 如何设计页面布局教程。
CSS经典三栏布局方案（6种方法）
09-24
主要介绍了CSS经典三栏布局方案（6种方法）的相关资料,详细的介绍了6种三栏布局的方法，具有一定的参考价值，有兴趣的可以了解一下
CSS网页布局实例 常见的12种网页布局
12-08
This site contains free css templates for your website – Just copy and paste and there you have a stunning website ! Menu und contentdynamic Menu fixed, contentdynamic Menu und contentdynamic 3 columns alldynamic 4 columns alldynamic Menu floating Menu fix, Inhalt u.Head dynamic 3 columns fixc
经典CSS+DIV布局模板
08-09
div+css165模板,都是经典CSS+DIV布局模板
CSS经典的布局
weixin_45608986的博客
07-25 338
好的布局能适合浏览的方式将图片和文字排放在页面的不同位置， 布局由多种，不同的设计方式会按照不同的布局。 1.行布局 基础的行布局 行布局自适应 width:100%; 行布局自适应限制最大宽 max-width:800px; 行布局垂直水平居中 margin:0 auto; .container{ width: 800px; height: 200px; background-color: cadetblue; .
利用div+css实现几种经典布局的详解，样式以及代码！
热门推荐
kongkongyou的博客
01-15 5万+
一、左右两侧，左侧固定宽度200px，右侧自适应占满 html代码 css代码 *{ margin: 0px; padding: 0px; } .divBox{ height: 500px; background: yellow; } .left{ float: left; width: 200px;
阮一峰老师 只要一行代码，实现五种CSS经典布局(转载)
鸭绒的博客
09-30 3652
只要一行代码，实现五种 CSS 经典布局 作者： 阮一峰 日期： 2020年8月10日 页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。 常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页...
CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习
艾编程带你学前端博客
12-07 365
前几天我在面试前端开发同学的时候，有问到关于margin基础布局相关内容的过程中，发现很多同学基本解释不清楚，今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。可以尝试动手试一试，有什么疑问 ！可随时交流，有问必答 。margin 纵向重叠（合并）问题元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并，合并后的间距就是两者中最大的那个值。 答案： item1与item4之间间距为 20px解析：因为中间两个box中没有内容也没有边框线，
css大屏布局适配问题
09-18
CSS大屏布局适配问题是指在设计网页或应用程序时，当页面在不同尺寸的大屏幕上显示时，如何让布局适应不同的屏幕尺寸和分辨率。 一种常见的解决方案是使用响应式设计。响应式设计是一种可以根据屏幕尺寸和分辨率...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值