文章
文章用户商铺文档快讯圈子网址导航
!
也想出现在这里？ 联系我们吧
广告位

前端开发 CSS 常见布局方式学习及总结

对于很多前端开发人员来说，CSS 布局应该是日常工作中碰到最多的东西之一，但是让我迷惑的是有很多文章 关于布局名词都没有听说过，工作中也很少用。一个好的布局不仅可以减少代码的书写量，而且有助于我们理解页面结构，更好地实现多种页面效果。学习一段时间了，但对于 CSS 布局方法的掌握一直比较混乱，而一般情况下我们对页面布局最常用到的当属 float、display、position 这三个属性了，我们从概括角度看 css 布局发展到现在大类可以归纳为静态布局、自适应布局、流式布局(又别名 百分比布局 %)、响应式布局、弹性布局 (rem/em flex 布局)、这几种类型，本文将对页面布局属性做简单的说明并给出几种常见的布局方式。

float、display、position 基本知识点

float——控制元素浮动

  • none ：元素不浮动；
  • left ：元素左浮动；
  • right ：元素右浮动。

display——控制元素生成的框的类型

  • none ：元素不显示；
  • inline ：内联显示；
  • inline-block ：行内块元素；
  • block ：块元素；
  • flex ：弹性盒子，响应式地实现页面布局，-webkit-flex；inline-flex。

position——控制元素定位方式

  • static ：默认值，没有定位。
  • relative ：相对定位，相对其正常位置定位；
  • absolute ：绝对定位，相对于其第一个非 static 定位的父元素；
  • fixed ：绝对定位，相对于可视窗口定位。

如上图所示，一般情况下我们会选择使用块元素 (display: block;) 固定好布局的大体框架，灰色部分，然后在其内添加内联元素 (display: inline;)，绿色部分 ，由于内联元素无法控制宽高等属性，对于一些特殊的需求可能需要将其转换为行内块元素 (display: inline-block;) 进行操作，橘色部分。对于需要左右排列的，我们一般会使用 float 属性控制其左右浮动。一般我们不会修改元素的 position 属性，而对于一些特殊要求，比如侧栏固定，底部广告条，蓝色部分。可能需要修改 position 为 fixed 或其他值使其相对于其定位参照偏移一定位置进行定位。

常规的布局方式可以应付大部分的日常工作，对于一些稍微学习过前端的同学应该问题不大，而且常规的布局方式一般固定页面大小，无法做到有效自适应。针对于此，这里主要介绍几种特殊的布局方式。

Flex 弹性布局

flex 布局是一种弹性布局，每一个 Flex 容器默认存在两根轴：水平的主轴和垂直的交叉轴。其内部元素根据这两条轴进行排列，使用 Flex 布局除了要设置 display: flex; 或者 display: inline-flex; 将其转换为 Flex 布局外，还需要注意一下几个属性：

父容器属性

  • flex-direction：控制主轴（元素排列）方向，row (→)| row-reverse (←)| column (↓)| column-reverse (↑) ；
  • flex-wrap：控制元素是否换行，nowrap (不换行)| wrap (换行)| wrap-reverse (首行在下) ；
  • flex-flow：flex-direction 和 flex-wrap 的简写形式，默认 row nowrap ；
  • justify-content：控制项目在主轴上的对齐方式，flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| space-between (两端对齐，项目间隔)| space-around(两端对齐，四周间隔) ；
  • align-items：控制交叉轴上的对齐方式，flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| baseline (基线对齐)| stretch(占满容器) ；
  • align-content：控制多根轴线的对齐方式，flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| space-between (两端对齐，项目间隔)| space-around(两端对齐，四周间隔)| stretch(占满容器) ；

子项目属性

  • order：控制项目的排列顺序，整数；
  • flex-grow：控制项目的放大比例，设置比例可控制不同项目空间占比；
  • flex-shrink：控制项目的缩小比例，设置比例可控制不同项目空间占比；
  • flex-basis：控制分配多余空间之前，项目占据的主轴空间；
  • flex：flex-grow, flex-shrink 和 flex-basis 的简写；
  • align-self：控制当前项目有与其他项目不一样的对齐方式；

实例-自适应均匀排布

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Flex 实例-自适应均匀排布</title>
  6. <style>
  7. body{
  8. max-width: 1000px;
  9. height: auto;
  10. margin: auto;
  11. border: 0;
  12. padding: 0;
  13. }
  14. .adaptive-box{
  15. display: inline-flex;
  16. flex-direction: row;
  17. flex-wrap: nowrap;
  18. justify-content: space-around;
  19. align-content: flex-start;
  20. align-items: center;
  21. width: 100%;
  22. height: 40px;
  23. line-height: 40px;
  24. background-color: #eee;
  25. }
  26. .adaptive-item{
  27. width: 100%;
  28. height: 100%;
  29. text-align: center;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <h1>Flex 实例-自适应均匀排布</h1>
  35. <div class="adaptive-box">
  36. <div class="adaptive-item" style="background: #20B2AA;">项目名</div>
  37. <div class="adaptive-item" style="background: #ffaaff;">项目名</div>
  38. <div class="adaptive-item" style="background: #55aaff;">项目名</div>
  39. <div class="adaptive-item" style="background: #ffff7f;">项目名</div>
  40. <div class="adaptive-item" style="background: #aaff00;">项目名</div>
  41. <div class="adaptive-item" style="background: #ffaa00;">项目名</div>
  42. </div>
  43. </body>
  44. </html>

demo 地址：https://blog.quietguoguo.com/demo/CSSLayout/Flex-adaptive-uniform-arrangement-layout.html

实例-圣杯布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Flex 实例-圣杯布局</title>
  6. <style>
  7. body{
  8. max-width: 1000px;
  9. height: auto;
  10. margin: auto;
  11. border: 0;
  12. padding: 0;
  13. }
  14. .grail-box{
  15. display: flex;
  16. flex-direction: row;
  17. }
  18. .grail-left{
  19. order: -1;
  20. flex-basis: 120px;
  21. height: 360px;
  22. background: lightseagreen;
  23. }
  24. .grail-content{
  25. flex-grow: 1;
  26. height: 1000px;
  27. background: lightcoral;
  28. }
  29. .grail-right{
  30. flex-basis: 120px;
  31. height: 360px;
  32. background: lightgreen;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <h1>Flex 实例-圣杯布局</h1>
  38. <div class="grail-box">
  39. <div class="grail-left"></div>
  40. <div class="grail-content"></div>
  41. <div class="grail-right"></div>
  42. </div>
  43. </body>
  44. </html>

demo 地址：https://blog.quietguoguo.com/demo/CSSLayout/Flex-holy-grail-layout.html

实例-水平等高瀑布流布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Flex 实例-水平等高瀑布流布局</title>
  6. <style>
  7. body{
  8. width: 800px;
  9. height: auto;
  10. margin: auto;
  11. border: 0;
  12. padding: 0;
  13. }
  14. .waterfall-box{
  15. display: flex;
  16. flex-direction: row;
  17. flex-wrap: wrap;
  18. width: auto;
  19. margin: auto;
  20. border: 0;
  21. padding: 15px;
  22. background-color: #eee;
  23. }
  24. .waterfall-box::after{
  25. content: "";
  26. flex-grow: 99999;
  27. }
  28. .waterfall-item{
  29. flex-grow: 1; /* 让图片始终填满一整行 */
  30. margin: 5px;
  31. }
  32. .waterfall-item img{
  33. display: block;
  34. width: auto;
  35. height: 150px;
  36. object-fit: cover; /* 图片适应容器并且不裁切 */
  37. min-width: 100%;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <h1>Flex 实例-水平等高瀑布流布局</h1>
  43. <div class="waterfall-box">
  44. <div class="waterfall-item">
  45. <img src="img/1.jpg" alt="">
  46. </div>
  47. <div class="waterfall-item">
  48. <img src="img/2.jpg" alt="">
  49. </div>
  50. <div class="waterfall-item">
  51. <img src="img/3.jpg" alt="">
  52. </div>
  53. <div class="waterfall-item">
  54. <img src="img/4.jpg" alt="">
  55. </div>
  56. <div class="waterfall-item">
  57. <img src="img/1.jpg" alt="">
  58. </div>
  59. <div class="waterfall-item">
  60. <img src="img/1.jpg" alt="">
  61. </div>
  62. <div class="waterfall-item">
  63. <img src="img/2.jpg" alt="">
  64. </div>
  65. <div class="waterfall-item">
  66. <img src="img/3.jpg" alt="">
  67. </div>
  68. <div class="waterfall-item">
  69. <img src="img/2.jpg" alt="">
  70. </div>
  71. <div class="waterfall-item">
  72. <img src="img/4.jpg" alt="">
  73. </div>
  74. <div class="waterfall-item">
  75. <img src="img/2.jpg" alt="">
  76. </div>
  77. <div class="waterfall-item">
  78. <img src="img/3.jpg" alt="">
  79. </div>
  80. <div class="waterfall-item">
  81. <img src="img/2.jpg" alt="">
  82. </div>
  83. <div class="waterfall-item">
  84. <img src="img/3.jpg" alt="">
  85. </div>
  86. <div class="waterfall-item">
  87. <img src="img/2.jpg" alt="">
  88. </div>
  89. <div class="waterfall-item">
  90. <img src="img/4.jpg" alt="">
  91. </div>
  92. <div class="waterfall-item">
  93. <img src="img/2.jpg" alt="">
  94. </div>
  95. <div class="waterfall-item">
  96. <img src="img/3.jpg" alt="">
  97. </div>
  98. <div class="waterfall-item">
  99. <img src="img/2.jpg" alt="">
  100. </div>
  101. <div class="waterfall-item">
  102. <img src="img/4.jpg" alt="">
  103. </div>
  104. </div>
  105. </body>
  106. </html>

demo 地址：https://blog.quietguoguo.com/demo/CSSLayout/Flex-horizontal-contour-waterfall-layout.html

Grid 网格布局

Grid 布局是一种网格布局，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。不过目前该布局方式兼容性存在一定问题，慎用！同样的，处理定义父容器 display: grid; 或者 display: inline-grid; 将其转换为 Grid 布局方式外，我们还需要了解如下属性：

父容器属性

  • grid-template-columns：控制网格的列宽，px、%、fr、repeat()、auto-fill、minmax()、auto、[]；
  • grid-template-rows：控制网格的行高，px、%、fr、repeat()、auto-fill、minmax()、auto、[]；
  • grid-row-gap：控制网格的行间距；
  • grid-column-gap：控制网格的列间距；
  • grid-gap：grid-column-gap 和 grid-row-gap 的简写；
  • grid-template-areas：定义区域，一个区域由单个或多个单元格组成；
  • grid-auto-flow：控制单元格排列顺序，row (按行)| column (按列)| row dense (行稠密)| column dense (列稠密)；
  • justify-items：控制单元格内容的水平位置，start | end | center | stretch ；
  • align-items：控制单元格内容的垂直位置，start | end | center | stretch ；
  • place-items：align-items 和 justify-items 的简写；
  • justify-content：控制整个内容区域在容器里面的水平位置，start | end | center | stretch | space-around | space-between | space-evenly ；
  • align-content：控制整个内容区域在容器里面的垂直位置，start | end | center | stretch | space-around | space-between | space-evenly ；
  • place-content：align-content 和 justify-content 的简写；
  • grid-auto-columns：控制浏览器自动创建的多余网格的列宽；
  • grid-auto-rows：控制浏览器自动创建的多余网格的行高；
  • grid-template：grid-template-columns、grid-template-rows 和 grid-template-areas 的简写；
  • grid：grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 的 简写。

子项目属性

  • grid-column-start：指定单元格列的起始位置网格线（左）；
  • grid-column-end：指定单元格列的终止位置网格线（右）；
  • grid-row-start：指定单元格行的起始位置网格线（上）；
  • grid-row-end：指定单元格行的终止位置网格线（下）；
  • grid-column：grid-column-start 和 grid-column-end 的简写；
  • grid-row：grid-row-start 和 grid-row-end 的简写；
  • grid-area：指定项目放在哪一个区域，还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的简写；
  • justify-self：控制当前单元格内容的水平位置，start | end | center | stretch ；
  • align-self：控制当前单元格内容的垂直位置，start | end | center | stretch ；
  • place-self：align-self 和 justify-self 的简写。

实例-嵌套盒子布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Grid 实例-嵌套盒子布局</title>
  6. <style>
  7. body{
  8. width: 1000px;
  9. height: 800px;
  10. margin: auto;
  11. border: 0;
  12. padding: 0;
  13. }
  14. .grid-container{
  15. display: grid;
  16. grid-template-columns: 2fr 1fr 1fr;
  17. grid-template-rows: 2fr 1fr 1fr;
  18. grid-gap: 10px;
  19. grid-auto-flow: row dense;
  20. place-items: stretch stretch;
  21. place-content: stretch stretch;
  22. width: 800px;
  23. height: 400px;
  24. margin: auto;
  25. border: 5px solid #f00;
  26. }
  27. .grid-item{
  28. display: block;
  29. height: 100%;
  30. width: 100%;
  31. font-size: 30px;
  32. text-align: center;
  33. }
  34. .item-1{
  35. grid-column: 1/2;
  36. grid-row: 1/4;
  37. background-color: #20B2AA;
  38. }
  39. .item-2{
  40. grid-column: 2/4;
  41. grid-row: 1/2;
  42. background-color: #ffaa00;
  43. }
  44. .item-3{
  45. grid-column: 2/3;
  46. grid-row: 2/4;
  47. background-color: #55aaff;
  48. }
  49. .item-4{
  50. grid-column: 3/4;
  51. grid-row: 2/3;
  52. background-color: #ff557f;
  53. }
  54. .item-5{
  55. grid-column: 3/4;
  56. grid-row: 3/4;
  57. background-color: #55ff00;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <h1>实例-嵌套盒子布局</h1>
  63. <div class="grid-container">
  64. <div class="grid-item item-1">1</div>
  65. <div class="grid-item item-2">2</div>
  66. <div class="grid-item item-3">3</div>
  67. <div class="grid-item item-4">4</div>
  68. <div class="grid-item item-5">5</div>
  69. </div>
  70. </body>
  71. </html>

demo 地址：https://blog.quietguoguo.com/demo/CSSLayout/Grid-nested-box-layout.html

Multi-column 多列布局

Multi-column 多列布局是 CSS3 中新出现的一种布局方式，它能轻松的让文本呈现多列显示，就像报纸上的新闻排版一样。与 Flex 及 Grid 不同的是，Multi-column 布局不会影响子元素在其文档流中的正常显示方式，最后 Muti-column 需要了解的属性有：

  • column-count：控制列的数量；
  • column-width：控制列的宽度，最小宽度；
  • columns：column-count 和 column-width 的简写；
  • column-gap：控制列与列之间的间隙；
  • column-rule-color：控制列与列之间的边框颜色；
  • column-rule-style：控制列与列之间的边框样式；
  • column-rule-width：控制列与列之间的边框宽度；
  • column-rule：column-rule-color 、column-rule-style 和 column-rule-width 的简写；
  • column-span：控制对象元素是否横跨所有列，可应用于子项目；
  • column-fill：控制内容是如何分割成列；

实例-垂直等宽瀑布流布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Flex 实例-水平等高瀑布流布局</title>
  6. <style>
  7. body{
  8. width: 800px;
  9. height: auto;
  10. margin: auto;
  11. border: 0;
  12. padding: 0;
  13. }
  14. .waterfall-box{
  15. column-count: 3;
  16. column-width: auto;
  17. column-gap: 20px;
  18. column-rule-color: #f00;
  19. column-rule-style: dashed;
  20. column-rule-width: 10px;
  21. background-color: #eee;
  22. }
  23. .waterfall-item{
  24. column-span: none;
  25. }
  26. .waterfall-item img{
  27. display: block;
  28. width: 100%;
  29. height: auto;
  30. margin: 0 auto 10px;
  31. object-fit: cover; /* 图片适应容器并且不裁切 */
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <h1>Flex 实例-水平等高瀑布流布局</h1>
  37. <div class="waterfall-box">
  38. <div class="waterfall-item item-1">
  39. <img src="img/1.jpg" alt="">
  40. </div>
  41. <div class="waterfall-item item-2">
  42. <img src="img/2.jpg" alt="">
  43. </div>
  44. <div class="waterfall-item item-3">
  45. <img src="img/3.jpg" alt="">
  46. </div>
  47. <div class="waterfall-item item-4">
  48. <img src="img/4.jpg" alt="">
  49. </div>
  50. <div class="waterfall-item item-5">
  51. <img src="img/1.jpg" alt="">
  52. </div>
  53. <div class="waterfall-item item-6">
  54. <img src="img/1.jpg" alt="">
  55. </div>
  56. <div class="waterfall-item item-7">
  57. <img src="img/2.jpg" alt="">
  58. </div>
  59. <div class="waterfall-item item-8">
  60. <img src="img/3.jpg" alt="">
  61. </div>
  62. <div class="waterfall-item item-9">
  63. <img src="img/2.jpg" alt="">
  64. </div>
  65. <div class="waterfall-item item-10">
  66. <img src="img/4.jpg" alt="">
  67. </div>
  68. <div class="waterfall-item item-11">
  69. <img src="img/2.jpg" alt="">
  70. </div>
  71. <div class="waterfall-item item-12">
  72. <img src="img/3.jpg" alt="">
  73. </div>
  74. <div class="waterfall-item item-13">
  75. <img src="img/2.jpg" alt="">
  76. </div>
  77. <div class="waterfall-item item-14">
  78. <img src="img/3.jpg" alt="">
  79. </div>
  80. <div class="waterfall-item item-15">
  81. <img src="img/2.jpg" alt="">
  82. </div>
  83. <div class="waterfall-item item-16">
  84. <img src="img/4.jpg" alt="">
  85. </div>
  86. <div class="waterfall-item item-17">
  87. <img src="img/2.jpg" alt="">
  88. </div>
  89. <div class="waterfall-item item-18">
  90. <img src="img/3.jpg" alt="">
  91. </div>
  92. <div class="waterfall-item item-19">
  93. <img src="img/2.jpg" alt="">
  94. </div>
  95. <div class="waterfall-item item-20">
  96. <img src="img/4.jpg" alt="">
  97. </div>
  98. <div class="waterfall-item item-21">
  99. <img src="img/1.jpg" alt="">
  100. </div>
  101. <div class="waterfall-item item-22">
  102. <img src="img/3.jpg" alt="">
  103. </div>
  104. <div class="waterfall-item item-23">
  105. <img src="img/2.jpg" alt="">
  106. </div>
  107. </div>
  108. </body>
  109. </html>

给TA打赏
共{{data.count}}人
人已打赏
CSSDIV代码响应式布局
前端学习

实现滚动时动态缩小导航栏jQuery效果

2024-9-9 11:34:19

前端学习

JS实现点击弹出层再点击任意位置隐藏弹出层

2024-9-11 11:34:07

下载说明

  • 1、微码盒所提供的压缩包若无特别说明，解压密码均为weimahe.com；
  • 2、下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;
  • 4、资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程，这里不一一讲解。

站长声明

本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有；若为付费资源，请在下载后24小时之内自觉删除；若作商业用途，请到原网站购买；由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

返回顶部