HTML5基础——22、网页布局方式

原创于 2025-10-27 15:00:00 发布 · 1.4k 阅读

54 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html #布局

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。这次来学习一下网页布局的几种方式。
网页布局方式分为几种：
1、流式布局(按百分比布局)
2、 flex弹性布局
3、 less+rem+媒体查询布局

一、流式布局

流式布局又称为百分比布局，或者非固定像素布局。
一般是通过盒子的宽度设置成百分比，然后再根据屏幕的宽度进行伸缩。
比如：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 80%;
      height: 100px;
      max-width: 980px;
      min-width: 490px;
      margin: 0 auto;
    }

    .left {
      width: 30%;
      height: 100%;
      background-color: yellow;
      float: left;
    }

    .right {
      width: 70%;
      height: 100%;
      background-color: green;
      float: right;
    }
  </style>
</head>

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

网页流式布局

这时候网页的内容会根据整个窗体的宽度而变化。
在这里插入图片描述

由于container设置了是80%，所以它会占窗体宽度的80%，但由于设置了max-width和min-width，所以在缩放的时候，会有一个最大值和最小值的宽度，如果超过了最大值，就算窗体继续拉大，它也只会保持在max-width设置的大小。
然后left占30%，right占70%，这个比例会一直相对着父级的container来保持比例大小。

二、 flex弹性布局

flex是flexible box的缩写，意思是弹性布局，或者伸缩布局。
flex布局的优点是操作方便，使用简单。
缺点是PC端的浏览器支持情况比较差，在IE11或者更低的版本会不支持或者仅部分支持。所以flex在移动端的应用会更广泛一些。

1、使用方法

设置弹性布局的方法很简单，在父级设置：

display:flex

就可以了。当父盒子设置了flex之后，子元素的float、clear、vertical-align属性都会失效。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      display: flex;
      width: 80%;
      height: 300px;
      background-color: gray;
      margin: auto;
    }

    div span {
      height: 100px;
      background-color: blue;
      margin-right: 5px;
      flex: 1;
    }
  </style>
</head>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

这个时候，整个页面的显示就会根据窗口宽度缩放了。
在这里插入图片描述

作为父物体的div，由于设置了width是80%并且margin是auto，所以它会居中显示并且是窗体的80%宽。
div设置了display: flex，子元素可以设置width，也可以设置flex属性，但如果设置了flex属性，width属性就不生效了
举例，假如flex：0.1，这时候显示会变成：
在这里插入图片描述

这是因为每一个子元素会占10%的宽度，而有3个子元素，它们加上间距也不超过总的父级宽度，所以会按照设置的10%宽度去显示。
如果flex设置成1，其实3个元素各自100%的宽度加起来肯定是超过了父级的宽度了，这时候，由于flex默认子元素是不换行的，所以只能缩小子元素的宽度，就只能按照能达到的最大宽度给这3个元素平均分配了，所以就有了一开始的3个元素平均宽度的情况。

2、父级常用属性

在设置flex布局的情况下，父级有这些属性可以设置：

1. flex-direction

设置主轴排列的方向，取值有：
row：正常的行从左往右排
row-revers:行从右往左排
在这里插入图片描述

column：列从上往下排
在这里插入图片描述

column-reverse：列从下往上排
在这里插入图片描述

2. justify-content

主轴上子元素的排列方式，取值有：
flex-start:默认左对齐
在这里插入图片描述

center：中间对齐
在这里插入图片描述

flex-end：右对齐
在这里插入图片描述

space-between：两端分散对齐

在这里插入图片描述

space-around：环绕等距对齐

在这里插入图片描述

3. flex-wrap

设置元素是否换行
在上面说过，子元素可以通过flex设置宽度比例，也可以设置width。
如果设置的是width，那么假如一行上面的元素宽度超过了父级，就可以选择是否换行了。
flex-wrap的取值有2个：
nowrap：默认值，不换行
wrap：换行
在这里插入图片描述

设置了换行之后，如果一行放不下，就会自动换行。

4. align-items

在只有单行的情况下，调整侧轴的子元素排列方式。
之前说过使用flex-direction设置主轴的方向，那么侧轴又是什么呢？
其实平面上就只有2个轴，一种是正常横着排，一种是竖着排，那么指定了一种是主轴，另外一种就是侧轴了。比如我用flex-direction指定横排时主轴，那么竖排就是侧轴了。
align-items的取值可以是flex-start、center、flex-end，比如：

align-items: center;

在这里插入图片描述

这里默认主轴是横向的，所以使用align-items指定center对齐，那么在竖向方向上，元素就居中对齐了。

5. align-content

在多行的情况下，我们也可以用align-items来进行侧轴排列方式指定，比如这样：

align-items: center;

在这里插入图片描述

但这样只是把多行直接居中，它们侧轴上的间距是不会改变的。
如果使用align-content来修改对齐方式：

align-content: center;

在这里插入图片描述

这时候，多行的间距也会发生变化。
除了flex-start、center、flex-end之外，还可以使用space-around和space-between，比如：

align-content: space-around;

在这里插入图片描述

align-content: space-between;

在这里插入图片描述

6. flex-flow

同时指定主轴方向和是否换行，比如：

flex-flow: row wrap;

3、子项常用属性

1. flex

上面的例子用到过，在子项可以不指定width，而使用flex来指定子项占的百分比。

2. align-self

在父项可以使用align-items指定侧轴的排列方式，也可以在子项用align-self来指定子项自己的侧轴排列方式。
如果同时指定了父项的align-items和子项的align-self，那么会以子项的align-self优先生效。

3. order

可以在属性里面定义子项的排列顺序，比如：

  <div>
    <span>1</span>
    <span style="order:1;">2</span>
    <span>3</span>
  </div>

默认的order都是0，然后值越小越排前面。这里特意把第二项的order设置成1，那么现实的时候就会这样：
在这里插入图片描述

由于现在第二项的order比其他都大，所以它排在了最后面

三、 Less+rem+媒体查询

1、 rem

在学习rem之前，要知道有个单位叫做em。
em是相对于父元素的字体大小来说的。
比如：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      font-size: 20px;
    }

    .box {
      width: 5em;
      height: 10em;
      background-color: blue;
    }
  </style>
</head>

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

现在显示：
在这里插入图片描述

当我们调整父级的字体大小时，子级由于是使用em做宽高，所以子级的大小也会跟着改变。
在了解了em之后，接下来就可以理解一下rem了。
rem和em一样，都是通过字体大小作为相对单位，但rem相对的基准是html元素的字体。
比如：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      font-size: 20px;
    }

    .box {
      width: 5rem;
      height: 10rem;
      background-color: blue;
    }
  </style>
</head>

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

显示和刚才的em例子一样，不过这次指定的是整个html的font-size。
rem比起em的优势是，父元素的文字大小可能不一致，有大有小的，但整个页面就只有一个html，所以设置html的字体，然后通过rem设置可以起到全局统一修改的作用。

2、媒体查询

媒体查询(Medla Query)是CSS3的新语法。
可以针对不同的屏幕尺寸，设置不同的样式。当重置浏览器大小时，页面也会根据大小重新渲染。
使用方式：

@media mediatype 关键字 (媒体特性)

其中

(1)mediatype取值：

all：所有设备
print：打印机、打印预览
screen：电脑屏幕、平板电脑、只能手机。

(2)关键字的取值：

and、not、only。

(3) 媒体特性取值:

width:可见区域宽度
min-width:最小可见区域宽度
max-width:最大可见区域宽度
例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media screen and (max-width: 539px) {
      .box {
        background-color: blue;
      }
    }
    @media screen and (min-width: 540px) {
      .box {
        background-color: red;
      }
    }
    @media screen and (min-width: 970px) {
      .box {
        background-color: green;
      }
    }
    .box {
      width: 100px;
      height: 100px;
      margin: auto;
    }
  </style>
</head>

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

这里通过媒体查询，把屏幕宽度分成了3个档：
第1档是最大宽度539像素的，也就是小于等于539像素，盒子显示蓝色
在这里插入图片描述

第2档是最小宽度540像素的，也就是大于等于540像素，盒子显示红色
在这里插入图片描述

第3档是最小宽度970像素的，也就是大于等于970像素，盒子显示绿色
在这里插入图片描述

可以发现一个问题，第2档和第3档是有重叠的范围的，大于等于970也包含了大于等于540的一部分。所以写的顺序很关键，这里先写了大于等于540，然后再第3档写大于等于970，效果就是把第2档变成了是540到970之间了。

接下来结合媒体查询和rem，来做一个自适应的例子。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media screen and (max-width: 539px) {
      html {
        font-size: 20px;
      }

      .box {
        background-color: blue;
      }
    }
    @media screen and (min-width: 540px) {
      html {
        font-size: 30px;
      }

      .box {
        background-color: red;
      }
    }
    @media screen and (min-width: 740px) {
      html {
        font-size: 40px;
      }

      .box {
        background-color: green;
      }
    }
    .box {
      height: 1rem;
      font-size: 0.5rem;
      text-align: center;
      margin: auto;
      line-height: 1rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">这里是显示的文字</div>
  </div>
</body>

网页布局媒体查询rem

在刚才不同宽度显示不同颜色的基础上，加上了改变html字体大小的做法，然后box类里面的显示都使用rem作为相对单位。这样就做到了不同的屏幕大小，显示不同的高度和不同字体大小了：
在这里插入图片描述

在这里插入图片描述

还可以根据不同的屏幕大小调用不同的css文件。
写多个link标签，在link里面加上媒体查询，比如：

  <link rel="stylesheet" media="screen and (min-width: 540px)" href="css/540.css">
  <link rel="stylesheet" media="screen and (min-width: 740px)" href="css/740.css">

3、 Less

Less(Leaner Style Sheets)是一种CSS扩展语言，也称为CSS预处理器。
它在CSS的语法基础上引入了变量、运算以及函数等功能，大大简化了CSS的编写。Less最终也是要编译成CSS文件使用的。
使用方法：

1. 新建一个less后缀

2. 使用”@+变量名:值”定义变量，比如：

@color:red;
@font20:20px

3. 写style，然后可以使用之前定义的变量，比如：

div {
  color: @color;
  font-size: @font20;
}

4. 把less文件转换成css文件

Less需要编译，可以使用vscode的Easy LESS插件对less文件进行编译。
在这里插入图片描述

这个插件的好处是，只要我们写less文件，它就会自动的帮我们生成同名的css文件，而且我们修改less文件，它也会同步的更新css文件。
比如，我写了这样一个less文件，叫做azhao.less：

@color: red;
@font20: 20px;

div {
  color: @color;
  font-size: @font20;
}

span {
  font-size: @font20 * 2;
}

然后在文件列表里面，就会自动多了一个azhao.css文件
在这里插入图片描述

这个文件的内容是：

div {
  color: red;
  font-size: 20px;
}
span {
  font-size: 40px;
}

可以很简单的看出，其实所谓less的编译，就是把less里面引用了变量、计算结果的地方，变成了最终的结果填在对应css里面而已了。
这样就有助于我们编写和维护css文件，因为less能用变量，能计算，能用函数，比较符合实际编程的思想，也便于维护，修改一个变量，就能让全局都产生变化。

接下来看看less比较关键的几个点：

1. 变量

之前说了是通过

@+变量名:值

来定义变量，对于变量名，有一定的要求：
(1) 必须以@为前缀
(2) 不能包含特殊字符
(3) 不能以数字开头
(4) 大小写敏感

2. 嵌套

在写less的时候，可以使用嵌套的写法，比如

.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;

  a {
    color: darkblue;
  }
}

这样生成的CSS会是这样：

.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}
.box a {
  color: darkblue;
}

实际情况是在生成CSS的时候，会把嵌套的关系逐个生成子标签的内容。
如果嵌套的内容是伪类或者伪元素，则需要在前面加&，比如：

.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;

  a {
    color: darkblue;
  }

  &:hover {
    background-color: lightgreen;
  }

  &::before {
    content: "Hello ";
  }
}

生成的CSS文件是这样的：

.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}
.box a {
  color: darkblue;
}
.box:hover {
  background-color: lightgreen;
}
.box::before {
  content: "Hello ";
}

3. 运算

在less里面，任何数字、颜色、变量都可以进行四则运算，也就是加减乘除。
比如：

font-size: @font20 * 2;

注意：
(1) 运算符左右一定要有空格
(2) 两个不同单位的值运算，以第一个值单位为准
(3) 只有一个值有单位，则取该值的单位。

4、 less+rem+媒体查询

之前已经把三个部分都介绍过了，接下来就把它们合起来进行布局使用。
假设一个网页的设计稿使用的宽度尺寸是750px，然后我们把屏幕分成15个等份，每一份作为html字体的大小。
那么当屏幕是750px的时候，字体的大小是750/15=50px
当屏幕是320px的时候，字体的大小就是320/15=21.33px
所以我们可以根据媒体查询，做不同屏幕宽度时的不同html字体，然后通过less的计算功能，生成最终的值，用于rem。
公式：