布局和定位（实战）常用方法
布局主要分为两个部分，一部分是用display控制元素的布局方式，另一部分则position控制的定位方式。
display常用的方式有，inline、block、inline-block、flex。
- 其中inline代表行内布局，也就是不会独占一行，高度和宽度由元素的高度和宽度进行决定。
- block代表块级布局，也就是会独占一行，并且可以设置高度和宽度。inline-block代表行内块级布局，也就是不会独占一行，并且可以设置高度和宽度。
- flex代表弹性布局，也就是里面的元素会变成弹性项目，可以根据弹性模型进行布局和对齐，可以实现水平居中、水平排列、垂直排列等需求
postion常用的方式有，relative、absolute、fixed。
- 其中relative代表相对位置， top、right、bottom、left 属性可以调整元素的位置，可以当作绝对定位的子元素时，可以实现居中对齐的需求。
- absolute代表绝对位置，元素相对于最近的已定位祖先元素（即 position 属性值不为 static 的祖先元素）进行定位，如果没有已定位的祖先元素，则相对于 元素进行定位。元素会脱离文档流，不占据原来的空间。
- fixed代表固定定位，元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变。元素会脱离文档流，不占据原来的空间。通常用于想把按钮固定在底部的位置，可以用该方法设置在底部，然后用absolute的方法控制按钮水平居中，
margin-left：auto和margin-right:auto什么时候可以实现水平居中对齐
可以实现居中对齐的情况
- 当父级元素是个div标签，并且宽度固定（默认的也可）。
- 父级元素是个div标签，并且宽度固定，子级元素display设置为table布局
不可以实现居中对齐的情况
- 行内元素或者行内块元素，也就是说元素的宽度是根据内容决定的，并且它们不会独占一行，如果想要实现水平居中，可在其父元素上设置 text-align: center。
- 父级元素是相对定位或者固定定位，因为父级元素脱离了文档流所以不可以居中，如果想要居中可以在子级元素设置绝对定位并且left:0，right：0。
水平居中的方法
