什么是布局
一、居中布局
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属于块级元素,默认就是垂直排列,可以不做任何处理,从而圣杯布局的主要问题就是如何实现左右定宽+中间自适应的三列布局效果了。