【HTML&CSS】运维、后端你该会的前端基本内容（五）

2023-06-30 120

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【HTML&CSS】运维、后端你该会的前端基本内容（五）

四、div+CSS布局

表格布局，布局形式一旦确定便无法更改，有较大的局限性。

使用CSS3进行网页布局，即CSS3的排版，是一种很新的排版理念，可以实现网页页面内容和表现形式相分离。CSS布局首先考虑的不是如何分割页面，而是从网页内容的逻辑关系出发，区分处内容的层次和重要性。

DIV+CSS3进行网页布局的过程：

首先，使用<div>标签将页面划分为各个块区域；

然后，对划分的各个块区域进行CSS3样式定位；

最后，在划分的各个块区域中添加相应的内容。

4.1、元素的浮动（Float）

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

描述	属性名	属性值
指定一个盒子（元素）是否可以浮动。	float	left、right、none、inherit

横向多列：对容器div中里面有嵌套div使用浮动（float）

下图情况使用：清除浮动：父类元素因为子类引起高度变为0时清除浮动，使用属性overflow:hidden。

例子

4.2、元素的定位

4.2.1、相对定位（relative）

仍在标准流中(宽度向右伸展)，对父元素无影响，基于自身原来的位置

看个案例：

1、首先是没有经过定位盒子1的位置。

2、使用相对定位（position: relative;）后盒子1的位置。

盒子1的移动是相对于自身原来位置为标准来移动，称为相对定位。

相对定位：对父元素无影响

top: 20px：相对原来上边界的位置向下移动20px

right: 20px：相对原来右边界的位置向左移动20px

源代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .n1{
        background-color: #abc;
        border: 5px solid red;
        padding: 0px;
      }
      .n2{
        padding: 20px;
        border: 2px solid;
        background-color: #cc94cc;
        position: relative;
        top: 20px;
        right: 20px;
      }
    </style>
  </head>
  <body>
    <div class="n1">
      <div class="n2">
        盒子1
      </div>
    </div>
  </body>
</html>

4.2.2、绝对定位

脱离标准流（不指定宽度时，宽度由内容决定)，对其后的兄弟盒子无影响，基于最近的已定位的祖先元素，若无则以浏览器窗口为基准

前提是最近的祖先没有设置定位，设置定位后就相对最近的父元素为标准。

注意：除了static 定位以外的定位，因为不承认static（默认）的定位

不指定宽度，宽度由内容决定

无影响：排列规则没有变

（最近的已定位的祖先元素，没有定位，若无则以浏览器窗口为基准），已定位指：除了自身之外和static定位的定位。 不承认static ，static 定位不算定位

top20px：相对外层div上边界的位置向下移动20px

right20px：相对外层div右边界的位置向左移动20px

top20px： 相对浏览器上边界的位置向下移动20px

right20px： 相对浏览器右边界的位置向左移动20px

下图对祖先元素设置了相对定位，从而实现以父元素为参考标准，所以：

top20px： 相对第一层div（最近祖先元素）上边界的位置向下移动20px

right20px： 相对第一层div（最近祖先元素）右边界的位置向左移动20px

源代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .t1{
        background-color: #abc;
        border: 5px solid red;
        padding: 20px;
      }
      .n1,.n2,.n3{
        padding: 20px;
        border: 2px solid;
        background-color: #cc94cc;
      }
      .n2{
        position: absolute;
        top: 20px;
        right: 20px;
      }
    </style>
  </head>
  <body>
    <div class="t1">
      <div class="n1">
        盒子1
      </div>
      <div class="n2">
        盒子2盒子2
      </div>
      <div class="n3">
        盒子3盒子3盒子3盒子3
      </div>
    </div>
  </body>
</html>

4.2.3、固定定位（fixed）

脱离标准流（不指定宽度时，宽度由内容决定)，基于浏览器窗口，相对于浏览器窗口是固定位置。

固定定位：基于浏览器窗口，且是固定位置，如果值不变就会一直在固定的位置

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body{
        border: 5px solid red;
      }
      p{
        border: 2px solid skyblue;
      }
      .p1{
        position: fixed;
        border: 6px solid gold;
        top: 0px;
        right: 0px;
      }
    </style>
  </head>
  <body>
    <p class="p1">Some more text</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
    <p>Some more</p>
  </body>
</html>

4.3、网格布局

网格是一组相交的水平线和垂直线，它定义了网格的列和行。

网格布局（Grid）将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，如下图：

4.3.1、基本概念

4.3.1.1、容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

上面代码中最外层div标签就是容器，里面三层div就是项目

注意：项目只能是容器的顶层子标签，不包含项目的子标签，比如上面代码的<p>标签就不是项目。Grid 布局只对项目生效。

4.3.1.2、容器属性

display: grid; 指定一个容器采用网格布局。

div {
  display: grid;
}

默认情况下，容器元素都是块级元素，但也可以设成行内元素。

div {
  display: inline-grid;
}

4.3.2、 grid-template-columns、grid-template-rows 属性，

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

.container {
  display: grid;
  grid-template-columns: auto auto auto; /* 定义三列，高度为浏览器自适应 */
  grid-template-rows: 100px 100px 100px; /* 定义三行，高度为100px */
}

4.3.3、repeat()

有时候，重复写同样的值比较麻烦。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。

.container {
  display: grid;
  grid-template-columns: repeat(3, 30%);
  grid-template-rows: repeat(3, 30%);
}

4.3.4、grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

将容器划为了九个单元格，分别对应9个区域。

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:"a1 a2 a3"
            "a4 a5 a6"
            "a7 a8 a9";
}

多个单元格合并成一个区域的写法如下。

grid-template-areas:"a1 a1 a1"
            "a2 a2 a2"
            "a3 a3 a3";

4.3.5、grid-area属性

grid-area属性指定项目放在哪一个区域。

使用grid-area属性，将每一个项目取一个区域名称，分别与grid-template-areas

.left{
  background-color: green;
  grid-area: a1;
}
.center{
  background-color: royalblue;
  grid-area: a2;
}
.right{
  background-color: fuchsia;
  grid-area: a3;
}

4.3.6、fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两个相同宽度的列 */
  grid-template-columns: 1fr 2fr; /* 后者宽度是前者的两倍 */
}

总结

我是秋意临，欢迎大家一键三连、加入云社区

我们下期再见(⊙o⊙)！！！

【HTML&CSS】运维、后端你该会的前端基本内容（五）

四、div+CSS布局

4.1、元素的浮动（Float）

4.2、元素的定位

4.2.1、相对定位（relative）

4.2.2、绝对定位

4.2.3、固定定位（fixed）

4.3、网格布局

4.3.1、基本概念

4.3.1.1、容器和项目

4.3.1.2、容器属性

4.3.2、 grid-template-columns、grid-template-rows 属性，

4.3.3、repeat()

4.3.4、grid-template-areas 属性

4.3.5、grid-area属性

4.3.6、fr 关键字

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【HTML&CSS】运维、后端你该会的前端基本内容（五）

四、div+CSS布局

4.1、元素的浮动（Float）

4.2、元素的定位

4.2.1、相对定位（relative）

4.2.2、绝对定位

4.2.3、固定定位（fixed）

4.3、网格布局

4.3.1、基本概念

4.3.1.1、容器和项目

4.3.1.2、容器属性

4.3.2、 grid-template-columns、grid-template-rows 属性，

4.3.3、repeat()

4.3.4、grid-template-areas 属性

4.3.5、grid-area属性

4.3.6、fr 关键字

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景