CSS布局实现 -- 面试题相关简答版（各种居中布局，多列布局，等分等高布局）(1)

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

3. Absolute + transform属性配合使用

二、垂直布局

1. Table-cell + vertical-align属性配合使用

2. Absolute + transform属性配合使用

三、水平垂直居中布局

1. Table-margin实现水平居中，table-cell + vertical-align实现垂直居中

2. Absolute + transform 实现水平垂直居中

四、两列布局

1. float + margin 属性配合使用

2. float + overflow 属性配合使用

3. display属性的table相关值使用

五、三列布局

1. float + margin属性配合使用

2. Float + overflow属性配合使用

3. Display属性的table相关值使用

六、圣杯布局

七、双飞翼布局

八、等分布局

1. float属性实现等分布局效果

2. Display属性的值有关table实现等分布局效果

3. 等分布局存在间距的情况

九、等高布局

1. display属性的值有关table实现

2. Padding+margin属性实现

十、CSS3多列布局

1. Columns属性

2. 列的间隙

3. 列的边框

4. 横跨多列

十一、全屏布局

---

一、水平居中布局

---

1. Inline-block  + text-algin 属性配合使用

（1）text-align属性： 为文本内容设置对齐方 . 其中 left:左对齐 center:居中对齐  right:右对齐

**（2）**display属性:

block: 块级元素

inline:内联元素（text-align属性有效）问题：当设置成inline后，width和height属性是无效的（只会为文字添加背景）

inline-block: 行内块级元素（块级+内联）整合了块级元素与内联元素的特点，width和height是有效的

（3）优缺点：

**优点：**浏览器兼容性比较好。

**缺点：**text-align属性有继承性，导致子级元素的文本也是居中显示的

2. Table + margin 属性配合使用

**（1）margin属性：**外边距

一个值：上下左右

两个值：第一个表示上下，第二个表示左右

三个值：第一个表示上，第二个值表示左右， 第三个表示下

四个值：上右下左

auto:表示根据浏览器自动分配

（2）优缺点

****优点：****只需要对子级元素进行设置就可以实现水平方向居中布局效果

****缺点：****如果子级元素脱离文档流（设置浮动，绝对定位position：absolute，固定定位fixed），导致margin属性无效，这种方法就无法实现水平居中；

3. Absolute + transform属性配合使用

（1）开启定位:

absolute 绝对定位

fixed 相对固定定位

relative 相对定位

（2）当把当前元素设置为绝对定位之后

如果父级元素没有开启定位的话，当前元素是相对于页面定位的；

如果父级元素开启了定位的话，当前元素是相对与父级元素定位的；

（3）优缺点

**优点：**无论父级元素是否脱离文档流，不影响子级元素水平居中效果

**缺点：**transform属性是CSS3中新增的属性，浏览器支持情况不好

二、垂直布局

---

1. Table-cell + vertical-align属性配合使用

（1）display属性

table： 设置当前元素为

元素（表格）

table-cell： 设置当前元素为元素（单元格）当设置table-cell相当于把父级元素变成表格中的单元格，而内容可以进行垂直方向的水平，而子级元素就相当于单元格中的内容

（2）vertical-align属性

用于设置文本内容的垂直方向对齐方式

top : 顶部对齐

middle ： 居中对齐

bottom ： 底部对齐

（3）优缺点

**优点：**浏览器兼容性比较好

**缺点：**vertical-align属性具有继承性，导致复元素的文本也是居中显示的

2. Absolute + transform属性配合使用

****优点：****父级元素是否脱离文档流，不影响子级元素垂直居中效果

****缺点：****transform属性是CSS3中新增属性，浏览器支持情况不好

三、水平垂直居中布局

---

1. Table-margin实现水平居中，table-cell + vertical-align实现垂直居中

2. Absolute + transform 实现水平垂直居中

四、两列布局

---

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。