什么是布局
一、居中布局
1、居中布局的分类
-
水平居中布局
-
概念：水平居中布局就是指当前元素，在父级元素容器中，水平方向是居中显示的
-
水平居中布局实现方式：(不止这三种，这三种比较常见)
-
inline-block + text-aligin 属性配合使用
优点：浏览器兼容性比较好
缺点：text-aligin具有继承性，导致子集元素的文本也是居中显示的
-
table + margin 属性配合使用
优点：只需要对子级元素进行设置就可以实现水平居中布局
缺点：如果子级元素脱离文档流，会导致margin属性的值无效
*补充：什么属性会脱离文档流呢？
1、将元素设置为浮动 float
2、将元素设置为绝对定位 absolute
3、将元素设置为固定定位 fixed*
-
absolute + transform 属性配合使用
优点：父级元素是否脱离文档流，都不会影响子级元素水平居中效果
缺点：transform属性是CSS3 中新增属性，浏览器支持情况不好
-
-
-
垂直居中布局
-
居中布局（水平+垂直）
二、多列布局
简单来说，多列布局就是几个元素呈现水平方式排列的效果1、两列布局
-
概念：两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果
-
实现方式：
-
float + margin 属性配合使用
优点：实现方式简单
缺点：自适应元素margin属性值与定宽元素的width属性值必须保持一致
定宽元素浮动与自适应元素不浮动， 导致浏览器兼容性不好
-
float + overflow 属性配合使用
优点：上述解决方案中的缺点都没有
缺点：overflow属性不仅解决了两列布局问题，同时设置了内容溢出的情况
-
display 属性的table相关值使用
优点：浏览器兼容性好
缺点：将所有元素的display属性设置为table相关值，受到相应制约
-
2、三列布局
-
概念：三列布局一般情况下是指三列中左边两列是确定的宽度，右边一列是自动填满剩余所有空间的一种布局效果（定宽+定宽+自适应——这种比较简单，本质上和两列布局一致）
但还有（定宽+自适应+定宽——这种就很复杂了，后面会介绍）
-
实现方式：
- float + margin 属性配合使用
- float + overflow 属性配合使用
- display 属性的table相关值使用
和两列布局的优缺点一致
3、圣杯布局
- 概念：由于该布局效果类似圣杯而得名，简单来说就是指这种三行三列布局（此时中间行的三列布局就是前面提到过的复杂三列布局：定宽+自适应+定宽）
由于三行可以由三个div来实现，而div属于块级元素，默认就是垂直排列，可以不做任何处理，从而圣杯布局的主要问题就是如何实现左右定宽+中间自适应的三列布局效果了。