四、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⊙)！！！
