标签将页面划分为各个块区域； 然后，对划分的各个块区域进行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 源代码如下 4.2.2、绝对定位 脱离标准流（不指定宽度时，宽度由内容决定)，对其后的兄弟盒子无影响，基于最近的已定位的祖先元素，若无则以浏览器窗口为基准 前提是最近的祖先没有设置定位，设置定位后就相对最近的父元素为标准。 注意：除了static 定位以外的定位，因为不承认static（默认）的定位 不指定宽度，宽度由内容决定 无影响：排列规则没有变 （最近的已定位的祖先元素，没有定位，若无则以浏览器窗口为基准），已定位指：除了自身之外和static定位的定位。 不承认static ，static 定位不算定位 top20px：相对外层div上边界的位置向下移动20px right20px：相对外层div右边界的位置向左移动20px top20px： 相对浏览器上边界的位置向下移动20px right20px： 相对浏览器右边界的位置向左移动20px 下图对祖先元素设置了相对定位，从而实现以父元素为参考标准，所以： top20px： 相对第一层div（最近祖先元素）上边界的位置向下移动20px right20px： 相对第一层div（最近祖先元素）右边界的位置向左移动20px 源代码 4.2.3、固定定位（fixed） 脱离标准流（不指定宽度时，宽度由内容决定)，基于浏览器窗口，相对于浏览器窗口是固定位置。 固定定位：基于浏览器窗口，且是固定位置，如果值不变就会一直在固定的位置

Some more text

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

Some more

4.3、网格布局 网格是一组相交的水平线和垂直线，它定义了网格的列和行。 网格布局（Grid）将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，如下图： 4.3.1、基本概念 4.3.1.1、容器和项目 采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。 上面代码中最外层div标签就是容器，里面三层div就是项目 注意：项目只能是容器的顶层子标签，不包含项目的子标签，比如上面代码的

标签就不是项目。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⊙)！！！