devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Web开发常用布局方式总结_创建一个web信息系统的主页面,使用框架划分窗口实现页面布局。

作者：煮酒与君饮 | 2024-07-19 13:18:09

赞

踩

创建一个web信息系统的主页面,使用框架划分窗口实现页面布局。

目录

一、概述

二、布局类型

1. 普通流布局

2. 浮动布局

3. 定位布局

(1) 相对定位relative

(2) 绝对定位absolute

(3) 固定定位fixed

(4) 定位补充

4. flex布局

5. grid布局

三、布局的应用

1. 双栏目布局实现

2. 三栏目布局实现

(1) position + margin 实现

(2) 圣杯布局

(3) 双飞翼布局

(4) flex布局实现

3. 响应式布局

(1) 媒体查询-CSS3-Media Query

(2) grid实现响应式布局

(3) Columns栅格系统

四、写在最后

五、参考资料

一、概述

无论是前端还是客户端开发都离不开页面的展示，而页面是由布局和各种组件构成的。布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。

比如Android开发者常用的布局方式有：线性布局(LinearLayout)、相对布局(RelativeLayout)、绝对布局(AbsoluteLayout)、网格布局(GridLayout)等。

IOS开发者常用的布局方式：手写Frame、自动布局(AutoLayout)、xib、storyboard等方式，我们这里主要介绍前端的布局方式。虽然目前大多数网站的构建都是通过成熟的框架搭建的，但是作为前端开发的基础，学习了解一下布局还是很有必要的。

页面布局(Layout)：就是对页面的文字、图形或表格进行排布、设计。

研究布局的目的是让我们的页面尽可能的还原UI设计给我们的设计图，适配各种尺寸的屏幕，使其在各种尺寸屏幕上能很好地显示出我们的视图。

我们来看下我们Web开发中常用的几种布局类型：

二、布局类型

1. 普通流布局

这是页面默认布局的方式 ，每个元素都有默认空间，每个元素都是在父元素的左上角出现的，页面中的块元素都是按照从上到下的方式出现，每个块元素独占一行,页面中行内元素都是从左到右的方式排列。

每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。比如 div 是一个标准的块级元素，页面在进行渲染时候，遇到块级元素会另起一行，而行内元素会在当前行进行展示。举个简单的例子：

  1. html
  2. <head>
  3.       <title>标题</title>
  4.       <style>
  5.           * {
  6.               padding: 0;
  7.               margin: 0;
  8.               box-sizing: border-box;
  9.           }
  10.           body {
  11.               background-color: white;
  12.           }
  13.           div {
  14.               border: 1px solid red;
  15.           }
  16.           span {
  17.               border: 1px solid green;
  18.           }
  19.           body :nth-child(4) {
  20.               display: inline-block;
  21.               background-color:salmon;
  22.           }
  23.       </style>
  24.   </head>
  25.   <body>
  26.       <div>这是一个div块元素</div>
  27.       <span>这是一个行内元素</span>
  28.       <span>这是另一个行内元素</span>
  29.       <div>
  30.           这是行内块元素
  31.       </div>
  32.       <div>这是还是一个div块元素</div>
  33.   </body>

  • 可以看到div元素是单独占一行的，而行内元素span不会换行。其他常用的块级元素包括 p、 h1——h6、form 以及Html5中的新元素： header 、 footer 、 section 等等。常用的行内元素a、input、img、label等。
  • display 的取值除了为block 跟inline 外还可以取值inline-block,它表示行内块元素，如果一个块元素的display属性取值为inline-block，那么他就不在换行，比如我们这里的第二个div元素。如果一个行内元素display取值为inline-block那么它就具有了块元素的一些特性，例如我们可以改变它的尺寸。
  • 另一个常用的display值是 none。一些特殊元素的默认display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。
  • display 还有一些其他取值，可以看这里

2. 浮动布局

属性：float
取值：
none: 默认，无浮动
left: 左浮动，让元素在父元素的左边，或者挨着已有的浮动元素
right: 右浮动，让元素在父元素的右边，或者挨着已有的浮动元素
我们看下它如何使用，正常情况下的布局：

  1.  <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>正常布局</title>
  5.         <meta charset="UTF-8">
  6.         <style>
  7.             * {
  8.                 margin:  0;
  9.                 padding: 0;
  10.                 box-sizing: border-box;
  11.             }
  12.             .container {
  13.                 background-color: wheat;
  14.             }
  15.             .left {
  16.                 width: 100px;
  17.                 height: 200px;
  18.                 background-color: rosybrown;
  19.             }
  20.             .right {
  21.                 width: 100px;
  22.                 height: 200px;
  23.                 background-color: saddlebrown;
  24.             }
  25.             .last {
  26.                 width: 100px;
  27.                 height: 200px;
  28.                 background-color: red;
  29.             }
  30.         </style>
  31.     </head>
  32.  
  33.     <body>
  34.         <div class="container">
  35.             <div class="left">左侧</div>
  36.             <div class="right">右侧</div>
  37.         </div>
  38.         <div class="last">后面</div>
  39.     </body>
  40. </html>

现在我们分别给.left 跟.right 添加浮动属性,添加下面代码

  1. .left {
  2.     float: left;
  3.     width: 100px;
  4.     height: 200px;
  5.     background-color: rosybrown;
  6.    }
  7. .right {
  8.     float: right;
  9.     width: 100px;
  10.     height: 200px;
  11.     background-color: saddlebrown;
  12. }

结果：

看下页面效果，左右两个模块倒是符合我们的预期，但是container元素的背景没有了，我们检查下元素，可以看到container的高度变成了0，last只展示了文字，背景没有了。这就说到float属性的特点了：

特点：

  • 元素将被排除在文档流之外，不在占据页面的空间。其他未浮动元素将会向前占位。
  • 浮动元素会 停靠在父元素的 左边或者 右边，或者其他浮动元素的边缘上。
  • 文本行内文字都是采用环绕方式排列的，不会被浮动元素压地下，而是会巧妙的避开浮动元素。

解决浮动带来的影响

(1)可以直接设置父元素的高度，比如直接添加height:300px;

(2)为父元素设置overflow 取值 hidden或者auto

(3)使用clear属性，取值both可以解决左右浮动带来的影响。这里注意：这里要给contariner容器添加子元素

(4)在容器内添加一个CSS伪元素，并将其clear属性设置为both。

  1. <div class="container">
  2.     <div class="left">左侧</div>
  3.     <div class="right">右侧</div>
  4.     <div style="clear:both"></div>
  5. </div>

或者是

  1. .container::after {
  2.   content: "";
  3.   display: table;
  4.   clear: both;
  5. }

看下效果，符合我们的预期了

实际上浮动最主要的作用:是可以使块级元素在一行内显示。并且可以使文字可以环绕浮动元素进行排列。

3. 定位布局

  • 属性：position，默认值:static,根据其取值的的不同分为:
    相对定位：position:relative;
    绝对定位：position:absolute;
    固定定位:position:fixed;
    只要是元素的position 属性取值不为static,那么这个元素就被称为已定位元素。这里需要注意，后面在介绍这几种定位时，已定位元素会对他本身的位置有所影响。
  • 偏移属性： top、left、right、bottom，取值是以px为单位的数值,取值可以是正数也可以是负数,分别对应不同方向的偏移
    top:取值为正，向下移动，取值为负数，向上移动
    bottom:取值为正，向上移动，负值 向下移动。
    left:取值为正，右移动，负值 左移动
    right:取值为正 左移动，负值 右移动

如何记忆：可以参考下面的图例，取值为正数时，都是向元素的内部进行靠拢，取值为负数时候都是向远离元素的位置移动。

(1) 相对定位relative

元素相对于他原来的位置进行距离偏移

用法：position:relative;配合 top、left、right、bottom进行位置的微调

我们还是以上面的正常文档流布局为例,现在我们想让右侧块跟左侧块在一行显示，并且在左侧块的右边显示，实现下图的效果：

那么我们可以设置.right的布局如下

  1. .right {
  2.     position: relative;
  3.     top: -100px; 
  4.     left: 50px; 
  5.     width: 50px;
  6.     height: 100px;
  7.     background-color: saddlebrown;
  8. }

(2) 绝对定位absolute

元素会相对于离他最近的已定位的(三种定位方式的一中)祖先元素去实现位置的初始化跟偏移,祖先元素就是本元素的父级元素。如果没有已定位的祖先元素，那就相对于body去实现位置的初始化跟偏移。绝对定位元素会变成块级元素。

用法：position:absolute;配合 top、left、right、bottom进行位置的微调

现在我们想让右侧块块叠加在左侧块之上显示，实现下图的效果：

那么我们可以设置.right的布局如下

  1. .right {
  2.     position: absolute;
  3.     top: 50px;
  4.     left: 0;
  5.     width: 50px;
  6.     height: 100px;
  7.     background-color: saddlebrown;
  8. }
  • 可以看到当子元素元素的postion属性设置为absolute后 原先父元素的高度变化了，说明.right脱离了文档流，不再占据页面空间。注意这里top: 50px;的改变是相对于body改变的，其初始化位置为文档流的左上角，因为其父元素container并不是已定位的元素。

(3) 固定定位fixed

固定定位（position:fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

我们还是拿上面的例子，我们将last固定在页面的右下角，设置last的CSS如下

  1. .last {
  2.     position: fixed;
  3.     right: 0;
  4.     bottom: 0;
  5.     width: 70px;
  6.     height: 75px;
  7.     background-color: red;
  8. }
  • 注意position:fixed的元素也会脱离文档流。

(4) 定位补充

一旦将元素设置 已定位元素(position的取值不为static)，元素可能会出现堆叠效果，堆叠效果的属性：z-index,取值：无单位的数子，数子越大越靠上

我们以上面绝对定位的例子来说明，设置了right为绝对定位后,right在left的上面，此时如果想让left在上,right在下，实现下面效果：

设置left的CSS代码

  1. .left {
  2.     position: relative;
  3.     z-index: 10;
  4.     width: 50px;
  5.     height: 100px;
  6.     background-color: rosybrown;
  7. }
  • 注意：只有已经定位的元素可以使用z-index，如果不设置position: relative;是没有效果的，父子元素之间无法调整堆叠效果，子元素压在父上。

4. flex布局

flex布局又叫弹性布局,是一种为一维布局而设计的布局方法。一维的意思是你希望内容是按行或者列来布局。你可以使用display:flex来将元素变为弹性布局。

我们直接看例子：实现7个item横向排列

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>flex布局2</title>
  5.         <meta charset="UTF-8">
  6.         <style>
  7.             * {
  8.                 margin:  0;
  9.                 padding: 0;
  10.                 box-sizing: border-box;
  11.             }
  12.             .container {
  13.                 display: flex;
  14.                 flex-direction: row;
  15.                 justify-content: flex-start;
  16.                 align-items: flex-end;
  17.                 background-color: wheat;
  18.                 flex-wrap: wrap;
  19.             }
  20.            .item {
  21.                width: 100px;
  22.                height: 100px;
  23.                border: 1px solid royalblue;
  24.                text-align: center;
  25.                line-height: 100px;
  26.                margin: 10px 10px;
  27.            }
  28.            .item6 {
  29.                flex: 1;
  30.            }
  31.            .item7 {
  32.                flex: 2;
  33.            }
  34.         </style>
  35.     </head>
  36.  
  37.     <body>
  38.         <div class="container">
  39.             <div class="item0 item">item0</div>
  40.             <div class="item1 item">item1</div>
  41.             <div class="item2 item">item2</div>
  42.             <div class="item3 item">item3</div>
  43.             <div class="item4 item">item4</div>
  44.             <div class="item5 item">item5</div>
  45.             <div class="item6 item">item6</div>
  46.             <div class="item7 item">item7</div>
  47.         </div>
  48.     </body>
  49. </html>

上面的代码基本基本涵盖了我们常用的flex的属性

  • display:flex: 设置container容器为弹性布局

  • flex-direction:决定主轴的方向,项目横向或是纵向排列
    取值：row | row-reverse | column | column-reverse;
    row（默认值）：主轴为水平方向，起点在左端。
    row-reverse：主轴为水平方向，起点在右端。
    column：主轴为垂直方向，起点在上沿。
    column-reverse：主轴为垂直方向，起点在下沿。

  • justify-content: 定义Item在主轴上如何对齐。
    取值：flex-start | flex-end | center | space-between | space-around;
    flex-start（默认值）：左对齐
    flex-end：右对齐
    center： 居中
    space-between：两端对齐，项目之间的间隔都相等。
    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

  • align-items:定义Item在交叉轴上如何对齐。
    取值：align-items: flex-start | flex-end | center;
    flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中间点对齐。

  • flex-wrap:一条轴线上放不下，决定其是否换行
    取值: nowrap(不换行) | wrap(换行)

  • flex 属性：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
    flex-grow: 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 取值越大，占用剩余空间越大。
    flex-shrink: 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
    flex-basis:属性指定了flex元素在主轴方向上的初始大小

这里设置item6 与 item7 的flex为1和2，表示当前轴剩余的空间item6占1/3,item7占2/3.

我们访问caniuse查看浏览器对它支持情况,可以看到目前绝大多数浏览器是支持这个属性的。


更多的关于flex的属性可以查看这里：flex布局 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/851733
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。