持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情
（1）流式布局：
元素依次从左向右(行元素,块元素) 从上到下(块元素)的方式进行排列；html中所有的标签默认都为static定位,static采用的是流式布局.
（2）定位：
static静态定位,元素的默认定位方式,进行流式布局;
relative相对定位,当需要将元素在原有的位置上进行微调时使用;
absolute绝对定位,当希望通过一个元素的坐标设置其位置时使用;
fixed固定定位,当需要一个元素不随页面的滚动而滚动时使用；
（3）浮动布局：
float设置元素使用浮动布局，浮动有左浮动和右浮动。在浮动文档流中,块元素也横向排列,而且不在自动宽度为100%。
注：使用浮动布局必须在最后一个浮动元素结束的地方清除浮动,否则会影响后续的界面,也会导致父元素不能根据内容显示高度。
清楚浮动两种方法：
1>最基本的清除：在最后一个浮动元素后面添加一个元素，设置这个元素的clear样式为both.
.clear{
clear:both
}
2>在不添加新元素的情况下清除：在浮动的父元素上添加一个class,为这个class添加后缀:after
.clear-fix:after{
content:"";
display:block;
clear:both;
}
（4）flex布局:
子元素不在使用原有的流式布局,而是参与flex布局,flex布局中无论是行元素还是块元素,都会按照flex方向布局.
justify-content 水平方向
algin-items 垂直方向
值：center表示居中
space-between 前后贴边 间距平分
space-around 间距平分
flex-start,布局开始方向对齐
flex-end布局结束方向对齐
flex-grow 当父元素在布局方式上有多余的空间时,本元素占有这些空间的比例(当父元素变大时,本元素是否随之变大)，flex-grow 的默认值为0
flex-shrink 当父元素缩小时,没有足够空间显示本元素时,本元素随之缩小的比例,默认值为1,设置为0即可不随父元素缩小
flex-wrap flex默认不能折行，若需折行则需设置flex-wrap:wrap
（5）布局框架（如：Bootstrap栅格）:
bootstrap的栅格系统将一个容器横向分为12列,又将不同的屏幕分为4个档次,分别是lg,md,sm,xs,容器中的子元素可以通过class来决定本元素在不同屏幕尺寸时所占用的列数,例如col-lg-3表示本元素在大号尺寸时占用三列.
使用bootstrap需要导入3个文件:
第1步,bootstrap.css (bootatrap.css中集成了normalize.css,对浏览器的样式进行了初始化,例如消除body 8px的外间距,同时也抹平了浏览器之间的样式差异;bootstrap对大部分html元素都进行了样式重新设计,让这些元素更加美观)
第2步,导入juqury.js (bootstrap.js依赖于jquery.js,所以必须先导入juqery,后导入bootatrap.js)
第3步,导入bootstrap.js
注意：absoulte、fixed、float、flex会脱离文档流。
