在写页面的时候，使用css布局的方式有很多，主要有盒子布局（padding、margin）、浮动方式布局(float)、定位方式布局（position）、弹性盒子布局（display:flex）、网格布局（display:grid）
1. 盒子模型
盒子模型示例如下：
其中padding表示内边距，margin表示外边距，border表示边框。width和height表示盒子中内容（content）的大小。
2.浮动布局
浮动方式就是使用float来进行布局，float最开始的使用目的是为了图文环绕的，它具体可以使用于对于块级的元素，它可以实现其左右布局。
浮动特点
- 浮动元素会脱离标准流（脱标），在标准流中不占位置
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素特殊的显示效果：一行可以显示多个、可以设置宽高
- 注意的是：浮动的元素不能通过text-align:center或margin:0 auto设置居中
浮动属性
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
具体使用
有以下三个不同颜色的盒子，其中包含一个父盒子，里面有两个子盒子。html代码如下：
<div class="father">
<div class="one">111</div>
<div class="two">222</div>
</div>
没有使用浮动前的css代码如下：
div{
width: 100px;
height: 100px;
}
.father{
width: 300px;
height: 300px;
background-color: pink;
}
.one{
background-color: red;
}
.two{
background-color: blue;
}
没有使用浮动前显示的结果如下：
给111的盒子设置float:left，222的盒子设置float:left，结果如下：
清除浮动
为什么需要清除浮动？当父级元素没有设置高度时，float的子元素无法撑开父级元素，所以会导致该子元素后面的元素布局紊乱。故需要清除浮动。清除浮动的方法有很多，常用的方式有以下两种。
a.伪元素清除
给浮动元素的父级增加.clearfix，具体css代码如下：
.clearfix::after{
content:'';
display:block;
clear:both;
}
该方法不会先增添标签，不会有其他的影响，是比较流行的使用方法。
b.给父级元素设置overflow:hidden
直接给父元素设置overflow:hidden，使用该方法的的缺点是当父级元素中有定位元素超出父级时，超出的部分会隐藏，故在不涉及父级元素有超出内容的情况下，该方法比较常用。
3.定位布局
定位可以让元素自由的摆放在网页中的任意位置，可以解决盒子之间的层叠问题，也可以使盒子固定在页面中的某个位置。
| 定位方式 | 属性值 | 特点 |
|---|---|---|
| 静态定位 | static | 默认值，就是标准流 |
| 相对定位 | relative | 1.需要配合方位属性实现移动 2.相对于自己原来的位置移动（自恋型）3.在页面中占位置，没有脱标 |
| 绝对定位 | absolute | 1.需要配合方位属性实现移动 2.相对于有定位的父元素进行定位移动（拼爹型）3.在页面中不占位置，已经脱标 |
| 固定定位 | fixed | 1.需要配合方位属性实现移动 2.相对于浏览器可视区域进行移动（死心眼型）3.在页面中不占位置，已经脱标 |
对于定位方式来说，使用的比较多的就是相对定位与绝对定位的配合使用，父级上添加相对定位，自己上添加绝对定位，简称子绝父相，这样子元素就可以相对于父元素摆放在任意位置了。固定定位使用的比较多的是需要固定在页面的某一个位置，比如侧边栏等。
使用子绝父相可以实现子盒子在父盒子中水平垂直居中。实习代码如下：
html代码片段：
<div class="father">
<div class="son"></div>
</div>
css代码片段：
.father{
position: relative;
width: 300px;
height: 300px;
background-color: red;
}
.son{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 100px;
background-color: blue;
}
实现效果如下：
4.弹性盒子布局
使用弹性框布局，可以更轻松地设计灵活的响应式布局结构。 首先要使用display：flex设置它为弹性盒子，在这个父元素内使用它的其他属性设置布局。
弹性盒子常用属性介绍：
| 属性 | 功能介绍 |
|---|---|
| flex-direction | 指定弹性盒子中子元素的排序方向，默认情况下是横向排序（从左往右），但是设置flex-direction:column后，就可以改为纵向排序（从上往下） |
| flex-wrap | 是否应该对flex项目换行，flex-wrap:wrap表示换行 |
| justify-content | 用户对齐flex项目，justify-content:center在容器中央对齐、justify-content:space-around显示行之前、之间和之后带有空格的 flex 项目、justify-content:space-between显示行之间有空格的 flex 项目 |
| align-items | 用于垂直对齐flex项目，align-items:center垂直对齐 |
使用弹性盒子来将子元素在父元素中水平垂直居中。
html代码片段：
<div class="father">
<div class="son"></div>
</div>
css代码片段：
.father{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background-color: red;
}
.son{
width: 200px;
height: 100px;
background-color: blue;
}
5.网格布局
grid布局跟flex布局有些相似，但是grid布局的维度比flex布局更广。
Flexbox布局的区别在于，Flexbox是根据轴线对弹性项进行排列，而Grid布局是将容器划分为行和列，产生单元格，然后再对单元格进行操作。
它可以任意组合不同的网格，做出各种各样的布局。首先就需要使用display:grid设置成网格布局形式。
Grid相关常用属性：
| 属性 | 介绍 |
|---|---|
| grid-template-rows | 布局网格行，例如：grid-template-rows:100px 100px表示从上至下，每行高度为100px，如果重写很麻烦，那么可以写为： grid-template-rows:repeat(2,100px) |
| grid-template-columns | 定义网格列，例如：grid-template-columns:100px 100px表示有两列，每列的宽度为100px，当然也是可以使用repeat重写的，为了方便表示比例关系，还可以使用fr关键字，例如：grid-template-columns:repeat(2,1fr)表示两列的宽度各占50% |
| grid-gap | 表示行间距和列间距，该属性为"grid-row-gap"和"grid-column-gap"两个属性的简写 |
| grid-template-areas | 网格布局允许指定区域，一个区域由单个或多个单元格组成。例如：grid-template-areas: 'a b c''d e f''g h i'就表示给三行三列的指定各个区域 |
| grid-area | 给单元格使用的属性，可以指定到区域中，配合上面这个属性使用，比如：grid-area:e表示可以将该单元格换到e处区域。 |
就属性而言，当然不止这么多，同样也有'justify-content'、'align-items'等属性。
就以下这种布局，就可以使用网格布局(图片来源于网站)。
html代码片段：
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
<article>7</article>
<article>8</article>
<article>9</article>
<article>10</article>
<article>11</article>
<article>12</article>
</section>
css代码片段：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
display:grid;
grid-template-rows:repeat(3,100px);
grid-template-columns:repeat(4,1fr);
width: 400px;
text-align: center;
}
article {
height: 100px;
border: 1px solid black;
}
布局结果显示：
