css布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

/* div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。 */
.example-1{
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
/* 仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。 */
.example-2 {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

如果用flex实现，是这样的。

/*通过flex的主轴纵轴上子元素的对齐方式align-items、justify-content属性实现*/
.example-3 {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}
/**/
.example-4 {
     display: flex;
     width: 100%;
}
.example-4 .main{
     margin: auto;
}

display

| 值 |描述|
|---|---|---|---|---|
|none|此元素不会被显示。|
|block |此元素将显示为块级元素，此元素前后会带有换行符。|
|inline |默认。此元素会被显示为内联元素，元素前后没有换行符。|
|inline-block |行内块元素。（CSS2.1 新增的值）|
|list-item| 此元素会作为列表显示。|
|run-in |此元素会根据上下文作为块级元素或内联元素显示。|
|table| 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。|
|inline-table|此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。|
|inherit|规定应该从父元素继承 display 属性的值。|

由display的属性引出各种布局
页面布局的几种方式

1. 定位布局（position）
     定位布局分为两种：绝对定位（absolute）和相对定位（relative），但是位置是写死的，很不灵活，一般只用在页面中一些需要固定的小标签上。

2. 浮动布局（float）
     相对于普通文档流布局，浮动布局会脱离普通文档流，起初是为了解决图文信息中图片与文字冲突的问题，应用float后，就可以轻松实现文字环绕图像的效果。
     float会带来一个问题，当父元素没有设定高度时，子元素浮动，父元素的高度坍塌为0，解决方法参考：
     关于浮动元素float使其父元素高度塌陷的原因及解决方法

3. 弹性布局（flex）
     弹性布局flex（Flexible Box），十分灵活，避免了传统css代码繁复的问题，可以快速实现垂直居中等效果。flex布局比较适合一维的，所以在页面中适合用来做局部的布局，如导航、菜单等。教程可参考：
     Flex 布局教程：语法篇
     Flex 布局教程：实例篇

4. 网格布局（grid）
     grid是比较新的技术，相对于flex，grid可以实现二维布局，从下图可以看出，目前浏览器的支持性还不是太好，但是在未来一定会成为一个主要的布局方式。

参考教程：
  Grid布局指南：https://www.jianshu.com/p/d183265a8dad

5. Table布局
     Table布局是比较早期的技术，现在基本已经不用，想了解的可以参考一下教程：
     css table布局大法，解决你大部分居中、多列等高、左右布局的问题

总结
  如果是面向客户，考虑到浏览器的兼容问题，还是用传统的display+position+float方式做整体布局，用flex做局部（导航、菜单等）的布局。如果是自己实践，不面向大众群体的话，可以多尝试flex+grid的方法。

适用方式、兼容性
CSS布局的发展历程：

image.png

参考资料：

Flex布局原理介绍：https://www.jianshu.com/p/c25a41f88705
弹性布局flex的那些坑，你踩过多少？：https://baijiahao.baidu.com/s?id=1606138910037135099&wfr=spider&for=pc
几张 GIF 动图让你看懂弹性盒模型（Flexbox）如何工作：https://yq.aliyun.com/articles/226495