本文汇总了一些常见的css布局技巧，包括浮动、定位、flex布局和grid布局等。
浮动定位
- 在介绍浮动定位之前，需要介绍一下文档流的概念。所谓的文档流，就是指各元素按照默认的方式排列，即块级元素独占一行，行内元素从左到右依次排列。
- 如果给一个元素设定了浮动属性，它就会脱离文档流，显示在文档流以上的层级。一旦给多个元素同时设定了浮动属性，这些元素就会在同一行内排列显示。
- 当我们想要实现文字环绕图片显示的效果时也可以用浮动布局。
- float用于给元素设置浮动属性。其中的属性值有三种：left,right,none(默认）
选择器 {
float:属性值;
}
- 当属性值为none时,元素默认不浮动。
- 当属性值为left时，元素就会显示在左上角。在一行中将从左向右进行排列。
- 当属性值为right时，元素就会显示在右上角。在一行中将从右向左进行排列。
定位
- 使用position属性来设置元素的定位，position有四个值：relative（相对定位）、absolute（绝对定位）、static（静态定位）和fixed（固定定位）。
选择器 {
position:属性值;
}
设置完position后，可以通过top、left、right、bottom来调整元素的位置。
相对定位
- 设置了相对定位的元素，仍然存在于文档流。当我们通过top、left、right、bottom来对这个元素进行移动时，移动的是这个元素相对于原来的位置，文档流内的元素当他没有偏移一样布局。
绝对定位
- 绝对定位的元素脱离了文档流，设置的定位指的是它相对于它的静态祖先的位置。
静态定位
- 默认情况。不脱离文档流，遵循基本的定位规定。
固定定位
- 脱离文档流。相对于浏览器窗口来进行定位，滚动页面时位置不会改变。
flex布局
- flex布局又叫做弹性盒子布局，它可以通过设置父元素的属性，来实现控制子集盒子的摆放位置、方向、顺序、宽度和高度、对齐。
- 使用flex-direction设置子元素排列方向。row为横向（主轴）,column为纵向（侧轴）
- 主轴方向使用justify-content来设置子元素的摆放。
垂直方向使用align-items来设置子元素的摆放。
grid布局
使用grid布局,可以将父元素设置成一个指定了行数和列数的表格，它的子元素就整齐地排列在表格中。
使用grid-template-columns划分列
grid-template-columns：1fr 2fr
在容器中划分出两列。其中两列的宽度比为1：2。除了fr，还可以用px、%等单位。
grid-template-row：1fr 2fr
在容器中划分出两行。 划分完父元素的表格后，就可以对每个子元素进行单独设置，指定子元素的起始和结束位置。
