css 常见的布局模式 总结 回顾

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

css 常见的布局模式 总结 回顾

主体布局

主体布局指在大部分情况下通用且具备统一特征的占位布局。掌握主体布局是一个前端必不可少的技能，养成看设计图就能大概规划出整体布局的前提是必须熟悉这些主体布局的特点与构造。

全屏布局

经典的全屏布局由顶部、底部和主体三部分组成，其特点为三部分左右满屏拉伸、顶部底部高度固定和主体高度自适应。该布局很常见，也是大部分Web应用主体的主流布局。通常使用header、footer和main三个标签语义化排版，main内还可插入aside侧栏或其他语义化标签。

<div class="layout">
  <header></header>
   <main>
   </main>
   <footer></footer>
 </div>

.layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  header, footer{
    height: 50px;
    background-color: cyan;
  }
  main{
    flex: 1;
    height: 100%;
  }
}

在这里插入图片描述
顶部，底部高度固定且固定在顶部和底部，主体部分自适应

header{
  height: 40px;
  background-color: cyan;
  position: sticky;
  top: 0;
}
footer{
  height: 40px;
  background-color: #eee;
  position: sticky;
  bottom: 0;
}

在这里插入图片描述

多列布局

经典的两列布局和三列布局由左右两列组成和左中右三列组成，其特点为一列宽度固定、另一列宽度自适应和两列高度固定且相等和其特点为连续两列宽度固定、剩余一列宽度自适应和三列高度固定且相等。

<div class="two-column-layout">
   <div class="left"></div>
   <div class="right"></div>
</div>

.two-column-layout {
  display: flex;
  .left{
    flex-basis: 100px;
    background-color: cyan;
  }
  .right{
    flex: 1;
    background-color: darkcyan;
  }
}

在这里插入图片描述

<div class="three-column-layout">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

.three-column-layout {
  display: flex;
  .left{
    flex-basis: 100px;
    background-color: cyan;
  }
  .center {
    flex-basis: 150px;
    background-color: darkcyan;
  }
  .right{
    flex: 1;
    background-color: #678;
  }
}

在这里插入图片描述

圣杯布局/双飞翼布局

经典的圣杯布局和双飞翼布局都是由左中右三列组成，其特点为左右两列宽度固定、中间一列宽度自适应和三列高度固定且相等。其实也是上述两列布局和三列布局的变体，整体的实现原理与上述N列布局一致，可能就是一些细节需注意。

<div class="grail-layout">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

.grail-layout {
  display: flex;
  width: 400px;
  height: 400px;
  .left {
    width: 100px;
    background-color: #f66;
  }
  .center {
    flex: 1;
    background-color: #3c9;
  }
  .right {
    width: 100px;
    background-color: #66f;
  }
}

在这里插入图片描述

均分布局

经典的均分布局由多列组成，其特点为每列宽度相等和每列高度固定且相等。总体来说也是最简单的经典布局，由于每列宽度相等，所以很易找到合适的方式处理。

<div class="average-layout">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
</div>

.average-layout {
   display: flex;
   width: 400px;
   height: 400px;
   div {
      flex: 1;
   }
}

在这里插入图片描述

居中布局

居中布局由父容器与若干个子容器组成，子容器在父容器中横向排列或竖向排列且呈水平居中或垂直居中。居中布局是一个很经典的问题，相信大家都会经常遇到。

<div class="center-layout">
  <div></div>
</div>

.center-layout {
  display: flex;
   width: 400px;
   height: 400px;
   background-color: #f66;
   div {
      margin: auto;
      width: 100px;
      height: 100px;
      background-color: #66f;
   }
}

在这里插入图片描述

自适应布局

自适布局指相对视窗任何尺寸都能占据特定百分比的占位布局。自适布局的容器都是根据视窗尺寸计算，即使父节点或祖先节点的尺寸发生变化也不会影响自适布局的容器尺寸。

<div class="modal">
    <div class="modal-wrapper"></div>
</div>

.modal {
 display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  &-wrapper {
    width: 50vw;
    height: 200px;
    background-color: #f66;
  }
}

在这里插入图片描述
当然使用calc()也不一定结合视窗比例单位计算。例如自适布局已知部分节点高度，不想手动计算最后节点高度但又想其填充布局剩余空间。

<ul class="selfadaption-layout">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</ul>

.selfadaption-layout {
  width: 200px;
  height: 567px;
  .box-1 {
    height: 123px;
    background-color: #f66;
  }
  .box-2 {
    height: 15%;
    background-color: #3c9;
  }
  .box-3 {
    height: calc(100% - 123px - 15%);
    background-color: #09f;
  }
}

在这里插入图片描述

横向布局

横向布局指容器内节点以水平方向排列且溢出部分被隐藏的占位布局。竖向布局很常见，声明overflow:hidden;width:xpx;height:ypx就能实现，但横向布局却不能使用类似方式实现。

<div class="horizontal-layout">
  <ul>
     <li>Alibaba</li>
     <li>Tencent</li>
     <li>Baidu</li>
     <li>Jingdong</li>
     <li>Ant</li>
     <li>Netease</li>
     <li>Meituan</li>
     <li>ByteDance</li>
     <li>360</li>
     <li>Sina</li>
   </ul>
</div>

.horizontal-layout {
    overflow: hidden;
    width: 300px;
    height: 100px;
    ul {
        overflow-x: auto;
        cursor: pointer;
        &::-webkit-scrollbar {
            height: 10px;
        }
        &::-webkit-scrollbar-track {
            background-color: #f0f0f0;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #f66;
        }
    }
    li {
        overflow: hidden;
        height: 90px;
        background-color: #66f;
        line-height: 90px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        &:not(:first-child) {
            margin-left: 10px;
        }
    }
}

在这里插入图片描述

使用flex布局完成上述布局

.horizontal-layout.flex {
    ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    li {
        flex-shrink: 0;
        flex-basis: 90px;
    }
}

凸显布局

凸显布局指容器内节点以同一方向排列且存在一个节点在某个方向上较突出的占位布局。该布局描述起来可能比较拗口，直接看以下效果吧，这是一个横向列表，节点从左往右排列，最右边的节点特别突出。这就是凸显布局的特征，凸显的节点可在凸显布局任意位置，上下左右，左上左下右上右下都行。

<ul class="highlight-layout">
  <li>Alibaba</li>
  <li>Tencent</li>
  <li>Baidu</li>
  <li>Jingdong</li>
  <li>Ant</li>
  <li>Netease</li>
</ul>

.highlight-layout {
    display: flex;
    align-items: center;
    padding: 0 10px;
    width: 600px;
    height: 60px;
    background-color: #3c9;
    li {
        padding: 0 10px;
        height: 40px;
        background-color: #3c9;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
    }
    &.left li {
        &:not(:first-child) {
            margin-left: 10px;
        }
        &:last-child {
            margin-left: auto;
        }
    }
    &.right li {
        &:not(:last-child) {
            margin-right: 10px;
        }
        &:first-child {
            margin-right: auto;
        }
    }
    &.top {
        flex-direction: column;
        width: 120px;
        height: 400px;
        li {
            &:not(:first-child) {
                margin-top: 10px;
            }
            &:last-child {
                margin-top: auto;
            }
        }
    }
    &.bottom {
        flex-direction: column;
        width: 120px;
        height: 400px;
        li {
            &:not(:last-child) {
                margin-bottom: 10px;
            }
            &:first-child {
                margin-bottom: auto;
            }
        }
    }
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

间距布局

间距布局指容器内节点从左往右从上往下排列且以特定间距间隔的占位布局。间距布局常见于各大列表，是笔者认为最重要的布局之一。为何如此简单的布局还是花费一些篇幅讲解呢？最近笔者查看了Github上很多与间隔布局相关的CSS代码，虽然整体效果看上去无大碍，但margin/padding和结构选择器却乱用，因此笔者想从零到一纠正间距布局的正确编码方式。

<ul class="spacing-layout">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

.spacing-layout {
    display: flex;
    overflow: auto;
    flex-wrap: wrap;
    margin-top: 20px; 
    padding: 20px; 
    width: 700px; 
    height: 400px;
    background-color: #f66;
    li {
        width: 200px;
        height: 200px;
        background-color: #66f;
        line-height: 200px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        &:not(:nth-child(3n)) {
            margin-right: 20px; 
        }
        &:nth-child(n+4) {
            margin-top: 20px; 
        }
    }
}

在这里插入图片描述

空载布局

空载布局指容器内无任何节点时使用其他形式代替的占位布局。还有使用JS判断列表集合为空时显示占位符吗？相信很多使用MVVM框架开发的同学都会使用条件判断的方式渲染虚拟DOM，若列表长度不为0则渲染列表，否则渲染占位符。

<ul class="empty-layout">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<ul class="empty-layout"></ul>

$empty: "https://yangzw.vip/img/empty.svg";
.empty-layout {
    overflow: auto;
    width: 200px;
    height: 150px;
    outline: 1px solid #3c9;
    &:empty {
        display: flex;
        justify-content: center;
        align-items: center;
        background: url($empty) no-repeat center/100px auto;
        &::after {
            margin-top: 90px;
            font-weight: bold;
            content: "没钱就没数据";
        }
    }
    li {
        padding: 0 10px;
        height: 30px;
        background-color: #09f;
        line-height: 30px;
        color: #fff;
        &:nth-child(even) {
            background-color: #f90;
        }
    }
}

多格布局

多格布局指容器内节点以动态数量的格子形式排列的占位布局。微信朋友圈的相册就是最常见的多格布局了，当单张照片排列、两张照片排列、三张照片排列等等，每种情况下照片的尺寸都可能不一致。笔者制作了一个动态多格相册怀念我家狗狗AB。大家感受下纯CSS实现动态数量的多格布局吧。

<ul class="multigrid-layout">
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
</ul>

@mixin square($count: 2) {
    $length: calc((100% - #{$count} * 10px) / #{$count});
    width: $length;
    height: $length;
}
.multigrid-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 400px;
    height: 400px;
    li {
        display: flex;
        overflow: hidden;
        justify-content: center;
        margin: 5px;
        background-color: #f0f0f0;
        @include square(3);
    }
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
// 一个元素
.item:only-child {
    border-radius: 10px;
    width: auto;
    max-width: 80%;
    height: auto;
    max-height: 80%;
}
// 两个元素
.item:first-child:nth-last-child(2),
.item:first-child:nth-last-child(2) ~ .item:nth-child(2) {
    @include square(2);
}
.item:first-child:nth-last-child(2) {
    border-radius: 10px 0 0 10px;
}
.item:first-child:nth-last-child(2) ~ .item:nth-child(2) {
    border-radius: 0 10px 10px 0;
}
// 三个元素
.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item:nth-child(2),
.item:first-child:nth-last-child(3) ~ .item:nth-child(3) {
    @include square(2);
}
.item:first-child:nth-last-child(3) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(3) ~ .item:nth-child(2) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(3) ~ .item:nth-child(3) {
    border-bottom-left-radius: 10px;
}
// 四个元素
.item:first-child:nth-last-child(4),
.item:first-child:nth-last-child(4) ~ .item:nth-child(2),
.item:first-child:nth-last-child(4) ~ .item:nth-child(3),
.item:first-child:nth-last-child(4) ~ .item:nth-child(4) {
    @include square(2);
}
.item:first-child:nth-last-child(4) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(2) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(3) {
    border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(4) {
    border-bottom-right-radius: 10px;
}
// 五个元素
.item:first-child:nth-last-child(5) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(5) ~ .item:nth-child(3) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(5) ~ .item:nth-child(4) {
    border-bottom-left-radius: 10px;
}
// 六个元素
.item:first-child:nth-last-child(6) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(3) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(4) {
    border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(6) {
    border-bottom-right-radius: 10px;
}
// 七个元素
.item:first-child:nth-last-child(7) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(7) ~ .item:nth-child(3) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(7) ~ .item:nth-child(7) {
    border-bottom-left-radius: 10px;
}
// 八个元素
.item:first-child:nth-last-child(8) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(8) ~ .item:nth-child(3) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(8) ~ .item:nth-child(7) {
    border-bottom-left-radius: 10px;
}
// 九个元素
.item:first-child:nth-last-child(9) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(3) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(7) {
    border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(9) {
    border-bottom-right-radius: 10px;
}

参考文章 JowayYoung

lilihuang520
关注
专栏目录
css经典全布局
weixin_44667463的博客
02-20 1570
css经典超全布局
html+css知识点复习回顾，复习参考
weixin_55935744的博客
11-28 1179
这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性 一、HTML部分 1、两个盒子 <div>、<span&g
css 各种常见布局整理
weixin_30335575的博客
10-18 204
　　在学习各种布局之前我们先来认识各个关键词，理解这些关键词，然后由点到面，这样就简单多了。 display属性 　　页面中每个元素都有一个默认的display属性，它的值与该元素的类型有关，默认值通常是block（元素显示为块元素）或inline（元素显示为行内元素）。此外值为none时，表示隐藏该元素，但是它和visibility属性不一样。把display设置成none...
聊聊 CSS 中的布局模式
技术杂谈
01-29 3133
本文来自作者 大漠 在 GitChat 上分享 「聊聊 CSS 中的布局模式」，「阅读原文」查看交流实录。「文末高能」编辑 | 哈比一、聊聊 CSS 中的布局模式在大家的印象中，CSS 非常的简单，在此我想再强调一下，虽然 CSS 简单，但并不代表容易。随着 Web 技术的发展飞快，CSS 经过二十多年的发展，其变化也是非常的大。CSS 涵盖的技术点也非常的多，其中的每一个点都足够我们发很多的时间
CSS常见布局总结
越努力，越幸运！
03-15 3492
css实现水平垂直居中布局小结
常见的CSS布局总结
前端小工
10-13 2080
两行布局：头部高度固定，尾部高度为剩余高度方法：尾部元素设置 position: absolute; top:顶部元素的高度，bottom：0；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{
css 3布局与技术 外国大牛写的
04-10
Flexbox（弹性盒子）是CSS3中最强大的布局模式之一，它为网页布局提供了一种全新的解决方案，尤其是在响应式设计方面。 - **容器属性**： - `display: flex;` 或 `display: inline-flex;`：定义一个flex容器。 - ...
CSS网格布局的高级应用与拓展
CSS网格布局回顾 ## 1.1 基础CSS网格布局简介 待补充... ## 1.2 CSS网格布局的优势和特点 待补充... ## 1.3 CSS网格布局的基本用法回顾 待补充... 注意：文章中的内容需要根据具体情况进行填充，包括文字描述和...
HTML5+CSS3网页设计基础-第七章-网页布局设计.pptx
12-23
7.5 本章小结是对整个章节内容的回顾和总结，帮助学生巩固所学知识。 总之，这章内容是关于如何使用HTML5的新特性与CSS3技术，构建现代、响应式的网页布局，这对于任何希望从事网页设计或前端开发的人来说都是至关...
20180616-CSS-网页布局-经典布局/总结
cutebright00的博客
06-16 290
圣杯布局：布局要求：上右下左padding:0 220px 0 200px;相对定位：position:relative;/*相对定位*/模块上移策略：margin-left:-100%;/*浮动属性下，负边界值会导致模块上移*/ left:-200px;/*模块向左移200px*/上移方法二：margin-left:-220px;/*上移，不能完整填充页面*/ right:-220px;/*模块...
CSS布局——经典布局总结（二）
weixin_34185512的博客
04-17 99
为什么80%的码农都做不了架构师？>>> ...
CSS布局总结
pan303121的博客
11-23 412
css的布局主要分为三种布局：盒子布局，浮动布局，定位布局。 1.盒子布局 如图所示，我们需要将整个css视为一个大的盒子，其中每一个元素当作盒子的一个个组成成分。 其中每一个元素之间的分界线我们一般是使用border属性来展现。 border 简写属性在一个声明设置所有的边框属性。 border-width 规定边框的宽度。参阅：border-width中可能的值。 border-style 规定边框的样式。参阅：border-style中可能的值。 border...
CSS经典布局分析
qq_34416331的博客
11-16 217
一、盒子模型布局，一般网络模块布局 头部： 一行中div并列排布： 1. 给每个div元素加上float:left 2. 给每个div元素加上display:inline-block。 使用display设置并列时，由于div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符，所以就会出现缝隙需要将父容器设置：font-size: 0 //index.h...
css布局总结
MZYJP的博客
11-14 266
网格是由一系列水平及垂直的线构成的一种布局模式。一个网格通常具有许多列与行，以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽(gutter)
【css】最全布局总结
qq_45406325的博客
08-13 8513
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
CSS布局方式总结
最新发布
Emma_Black的博客
04-11 125
笔记
CSS常用布局总结
qq_43616690的博客
09-21 741
一、CSS还原UI设计 1.Photoshop还原UI设计 查看尺寸信息 方式一、 点击窗口->信息，选择选框工具，并打开选框工具面板选项，设置鼠标单位为像素，选中一定范围后，即可在打开的信息面板上看到 方式二、选中移动工具，在左上角设置选项为“图层”，点击ctrl即可看到相关像素信息。（选择时要注意选择相关图片中有颜色的区域） 查看颜色信息 找到吸管工具，点击相关颜色，即可查看 查看文字信息 打开字符窗口，选择移动工具，按住ctrl，选择相关文字，即可在字符窗口中看到相关文字信息。 PS切
CSS常见布局整理
Web_boom的博客
01-03 2872
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
CSS三栏布局解析：中间固定，两侧自适应
在CSS布局设计中，三栏布局是一种常见的需求，特别是在网页设计中。本篇文章主要讨论了一种特殊的三栏布局模式，即中间栏具有固定宽度，而两侧栏则根据屏幕大小自适应宽度。这种布局模式在响应式设计中尤其有用，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值