1.1 table布局
我们学习表格的时候，通过表格里面嵌套表格完成了基本的页面布局，这种页面布局方式就是表格布局。在早期（90年代）的页面制作时，都是通过表格完成页面布局的。虽然表格布局简单易懂，但是表格布局存在着一些不足之处：改动不便,需重新调整,工作量大，也就是维护成本较高，所以在2000年之后，慢慢的被DIV+CSS页面布局方式所取代。
1.2 DIV + CSS页面布局
之前我们学习过一种网页布局方式，就是table布局，这种布局方式随着技术的更新和发展，因为自身的缺陷问题，被DIV+CSS页面布局所替代。
1.2.1 DIV 相关的技术
div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。
span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合CSS 来使用。它主要用于对括起来的内容进行样式的修饰。
1.2.2 盒子模型
div是一个标准块标签，而HTML的块标签都存在了 margin,padding,border 等属性，我们就可以通过这些内边距、边框、外边距来控制不同的标签的布局和存放位置，这个就是我们经常说的盒子模型。
自从 1996 年 CSS1 的推出，W3C 组织就建议把所有网页上的对象都放在一个盒子(box)中，我们可以通过控制盒子属性，来操作页面。
盒模型主要定义四个区域：内容(content)、内边距(padding)、边界(border)和外边距(margin)，如图所示。
DIV+CSS页面布局就是把每一个标签当做一个盒子，使用属性完成盒子的布局，标签之间就是盒子嵌套、挤压盒子等。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>师范大学</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/iconfont.css"/><!-- <link rel="stylesheet" type="text/css" href="css/index.css"/> --><style>/* a这些公共样式设置 */a {text-decoration: none;font-size: 14px;color: #999;}a:hover {text-decoration: underline;color: #991F01;}.top {/* 顶部盒子 */width: 100%;height: 55px;background-color: #BB1F01;}.top .top-center {height: 55px;width: 1200px;margin: auto;}.top .top-center a {color: white;}.top .top-center a:hover {text-decoration: none;}.top-left {/* 顶部左侧盒子 */width: 150px;height: 55px;float: left;}.top-left>li {width: 30px;height: 55px;float: left;text-align: center;line-height: 55px;margin-left: 10px;}.top-left>li em {font-size: 25px;}.top-left>li em:first-child {font-size: 30px;}.top-right {/*右侧盒子*/width: 250px;height: 55px;float: right;}.top-right>li {width: 60px;height: 55px;float: right;text-align: center;line-height: 55px;}.top-right>li:hover {background: darkred;cursor: pointer;}.top-right>li:first-child {background-color: white;height: 40px;width: 40px;position: relative;border-radius: 50%;margin-top: 10px;}.top-right>li:first-child:hover {border-radius: 0px;border-bottom-right-radius: 50%;border-top-right-radius: 50%;}.top-right>li:first-child:hover #search {display: block;}#search {width: 200px;height: 36px;position: absolute;top: 0px;right: 35px;border-bottom-left-radius: 30px;border-top-left-radius: 30px;display: none;border: 1px solid red;}</style></head><body><div class="top"><div class="top-center"><ul class="top-left"><li><a href="#"><em class="iconfont icon-tengxunweibo"></em></a></li><li><a href="#"><em class="iconfont icon-weibo"></em></a></li><li><a href="#"><em class="iconfont icon-weixin"></em></a></li></ul><ul class="top-right"><li><input type="text" id="search" placeholder="搜索" autocomplete="off" /><em class="iconfont icon-weixin"></em></li><li><a href="#">中文</a></li><li><a href="#">English</a></li></ul></div></div><div class="nav"></div><div class="banner"></div><div class="intro"></div><div class="notice"></div><div class="news"></div><div class="login"></div><div class="find"></div><div class="address"></div><div class="footer"></div></body>
</html>综合案例，时间原因，只使用DIV+CSS布局，完成了顶部布局图5-2。
注意：我们使用的盒子模型是基于W3C标准盒子模型除此之外，还有IE的盒子模型
可以看出，IE浏览器中盒子的宽高是包含了 内容 + 内边距+ 边线，而标准的盒子模型宽高就是内容部分。当然，随着技术的发展，IE浏览器注定要退出市场，只是目前国内还存在一定的份额，大家在有需求的时候注意下即可，这儿我们就不重点讲解了（IE浏览器已经成为了历史了，微软自己都放弃了，在全力开发Edge浏览器，采用了webkit内核）。
1.3 CSS3 弹性盒子(Flex Box)
传统的盒子模型布局，也存在一些缺陷的，如我们需要垂直居中，实现起来就非常的难，所以在2009年，W3C 提出了一种新的方案----Flex 布局，又叫做弹性盒子布局。弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>css3弹性盒子</title> <style> .flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey;}.flex-item {background-color: red;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div> </div>
</body>
</html>运行结果如图
1.3.1 CSS3 弹性盒子常用属性
弹性盒子常见的属性如表
| 属性 | 描述 |
|---|---|
| flex-direction | 指定弹性容器中子元素排列方式 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式 |
1.3.2 flex-direction属性
flex-direction 属性指定了弹性子元素在父容器中的位置。
| 语法结构 |
|---|
| flex-direction: row | row-reverse | column | column-reverse |
flex-direction的值有:
- row：横向从左到右排列（左对齐），默认的排列方式。
-
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
-
column：纵向排列。
-
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>css3弹性盒子</title> <style> .flex-container {display: flex;flex-direction: row-reverse;width: 400px;height: 250px;background-color: lightgrey;}.flex-item {background-color: red;width: 100px;height: 100px;margin: 10px;}</style> </head> <body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div> </div> </body> </html>运行结果如图所示。
1.3.3 justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
语法结构 justify-content: flex-start | flex-end | center | space-between | space-around -
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
-
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
-
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
-
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
-
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>css3弹性盒子</title> <style> div {margin: 10px;}.flex-container {display: -webkit-flex;display: flex;justify-content: space-between;width: 800px;height: 150px;background-color: lightgrey;}.flex-container2 {display: -webkit-flex;display: flex;justify-content: flex-end;width: 800px;height: 150px;background-color: lightgrey;}.flex-item {background-color: red;width: 100px;height: 100px;margin: 10px;}</style> </head> <body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div> </div><div class="flex-container2"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div> </div> </body> </html>
运行结果如图
1.3.4 align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
| 语法结构 |
|---|
| align-items: flex-start | flex-end | center | baseline | stretch |
-
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
-
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
-
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
-
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
-
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>css3弹性盒子</title> <style> .flex-container {display: flex;-webkit-align-items: stretch;align-items: stretch;width: 400px;height: 250px;background-color: lightgrey;}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;}</style> </head> <body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div> </div> </body> </html>
运行结果如图所示。
1.3.5 flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
| 语法结构 |
|---|
| flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; |
-
nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
-
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
-
wrap-reverse -反转 wrap 排列。
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>css3弹性盒子</title> <style> .flex-container {display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 300px;height: 250px;background-color: lightgrey;}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;}</style> </head> <body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div> </div> </body> </html>运行结果如图所示。
1.3.6 align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法结构 align-content: flex-start | flex-end | center | space-between | space-around | stretch -
stretch - 默认。各行将会伸展以占用剩余的空间。
-
flex-start - 各行向弹性盒容器的起始位置堆叠。
-
flex-end- 各行向弹性盒容器的结束位置堆叠。
-
center -各行向弹性盒容器的中间位置堆叠。
-
space-between -各行在弹性盒容器中平均分布。
-
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>css3弹性盒子</title> <style> .flex-container {display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-align-content: center;align-content: center;width: 300px;height: 300px;background-color: lightgrey;}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;}</style> </head> <body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div> </div> </body> </html>运行结果如图所示。
1.3.7 弹性子元素属性
order 属性设置弹性容器内弹性子元素的属性。
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>css3弹性盒子</title> <style> .flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey;}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;}.first {order: -1;}</style> </head> <body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item first">flex item 2</div><div class="flex-item">flex item 3</div> </div> </body> </html>运行结果如
更多的子元素属性，见表
属性 描述 display 指定 HTML 元素盒子类型。 flex-direction 指定了弹性容器中子元素的排列方式 justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。 align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 flex-flow flex-direction 和 flex-wrap 的简写 order 设置弹性盒子的子元素排列顺序。 align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。 flex 设置弹性盒子的子元素如何分配空间。是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性 flex-grow 设置或检索弹性盒子元素的扩展比率 flex-shrink 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。 flex-basis 用于设置或检索弹性盒伸缩基准值。 1.4 CSS3 Grid布局
之前我们介绍了CSS3的Flexbox 布局方式，Flexbox布局方式是一维布局，也就是针对的是一行或者一列，没办法对应多行多列，因此CSS3提供 Grid布局，Grid布局是多维布局方式。
Grid做前端的朋友应该都很熟悉了，翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design的朋友肯定都了解grid layout（删格布局）。Grid作为一个二维的栅格系统，由若干列（column）和行（row）构成。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.box {display: grid;/* 可以使用 百分比*/grid-template-columns: 20% 20% 20% 20%;/* 也可以使用确定的长度 */grid-template-columns: 200px 200px 200px 200px;grid-template-rows: 200px 200px 200px;/* 也可以配合确定长度，使用fr进行百分比的划分 */width: 500px;grid-template-columns: repeat(5, 1fr);height: 400px;grid-template-rows: repeat(3, 200px);/* 单元格之间的间距 */grid-gap: 10px;}.box>div{border: 1px solid red;}.test {/* 通过坐标布局子标签的位置 */grid-column-start: 2;grid-column-end: 5;grid-row-start: 2;grid-row-end: 3;/* 也可以这么写*/grid-column: 2 / 5;grid-row: 2 / 3;/* 或者在简化写法*/grid-area: 2 / 2 / 3 / 5;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div class="test">8</div><div>9</div><div>7</div><div>8</div><div>9</div><div>9</div><div>9</div><div>9</div></div></body> </html>代码运行结果如下图
grid提供的模板布局方式：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>#content {display: grid;grid-template-columns: repeat(4, 1fr);grid-auto-rows: minmax(100px, auto);max-width: 960px;margin: 0 auto;grid-gap: 10px;grid-template-areas:"header header header header""aside . main main""nav . main main""section section section section""section section section section""footer footer footer footer";}#content>* {background: #3bbced;padding: 30px;}header { grid-area: header; }main { grid-area: main; }section{ grid-area: section; }aside { grid-area: aside; }nav { grid-area: nav; }footer { grid-area: footer; }</style></head><body><div id="content"><header>Header</header><main>Main</main><section>Section</section><aside>Aside</aside><nav>Nav</nav><footer>Footer</footer></div></body> </html>