小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
什么是布局
所谓的布局, 就是 HTML 页面的结构。实现布局是要通过 HTML 元素和 CSS 样式结合。布局特别想盖楼的时候的设计图纸。
布局的分类
目前比较流行的布局:
-
居中布局: 水平方向居中布局、垂直方向居中布局以及水平和垂直都居中的布局
-
多列布局: 两列布局和三列布局、等分布局和等高布局(圣杯布局和双飞翼布局)
-
全屏布局：使用百分比。
从技术角度分化的话:
-
CSS3 新增的弹性(flex)盒子模型
-
CSS3 新增的网格(grid)布局
根据场景不同, 也可以这样划分:
-
响应式布局: 一个 HTML 既可以在 PC 电脑端浏览器打开, 也可以在移动端浏览器打开
-
移动端布局: 在手机端或平板电脑端浏览器打开
之前比较流行的布局:
-
圣杯布局(三行三列布局)
-
双飞翼布局(优化版的圣杯布局, 淘宝前端团队推出的)
-
瀑布流布局
实现水平局中
第一种实现水平居中的解决方案:
问题: 子级元素的文本内容同时也会居中对齐，为了实现子级元素的水平居中, 为父级元素设置额外的样式属性。
将实现水平方向居中效果的元素设置为inline-block:
-
多个inline-block元素之间水平方向排列
-
inline-block元素可以设置width和height属性的
-
inline-block元素具备inline元素的特性
text-align属性: 原本作用是设置文本内容的对齐方式，对inline-block元素同样有效
第二种实现水平居中的解决方案:
问题: 如果当前元素脱离了文档流, margin属性失效了。
为当前元素设置width属性(定宽)
使用margin属性实现水平居中
第三种实现水平居中的解决方案:
问题:为了实现子级元素的水平居中, 为父级元素设置额外的样式属性。如果使用transform属性: CSS3 新增属性。实现水平居中时:如果使用margin-left属性: 导致耦合度升高。
将子级元素设置为绝对定位(父级元素设置相对定位)，left设置50%和translateX()设置-50%实现水平居中。
margin-left属性的值与当前元素的width属性的值有关的
translateX()函数的50%指的是当前元素宽度的50%
垂直居中
第一种实现垂直居中:
问题: 为了实现子级元素的水平居中, 为父级元素设置额外的样式属性。
将父级元素设置为table-cell，在父级元素设置vertical-align属性垂直居中。
默认作用: 设置文本内容在垂直方向的对齐方式vertical-align: middle;
table-cell值相当于HTML中的元素display: table-cell;
第二种实现垂直居中:
问题:为了实现子级元素的垂直居中, 为父级元素设置额外的样式属性。实现垂直居中时:如果使用margin-top属性: 导致耦合度升高，如果使用transform属性: CSS3 新增属性。
将子级元素设置为绝对定位(父级元素设置相对定位)，left设置50%和translateY()设置-50%实现垂直居中。
两列布局
所谓的两列布局, 并不是简单将两个元素水平排列, 而是一列是定宽的, 另一列是自适应的。
-
其中一列是定宽: 将该元素的宽度设置为固定的宽度
-
其中一列是自适应: 除了定宽之外所有的宽度都为第二列
第一种两列布局：
通过浮动和移动或遮挡实现两列布局。
第二种两列布局：
通过overflow: hidden;开启BFC: 创建出一个完全隔离的空间。
第三种两列布局：
通过display: table;改变了父级元素的显示类型。将外层div变成table里面的元素转变为表格元素。
三列布局
所谓的三列布局, 其中两列是定宽, 另一列是自适应。划分成以下两种情况:
-
定宽+定宽+自适应: 两个定宽的列是相邻的
-
定宽+自适应+定宽: 两个定宽的列不是相邻的(自适应这一列在中间)
