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 实现水平垂直居中
四、两列布局
1. float + margin 属性配合使用
****优点：****实现方式简单
缺点：自适应元素margin属性值必须与定宽元素的width属性保持一致（需要手动修改）。定宽元素浮动（脱离文档流）与自适应元素不浮动导致浏览器兼容性不好（可能会存在空白区域）。
如果左列元素有子级元素，且设置了clear：both可能存在显示问题。
解决了第一种方法的两个问题：浮动与不浮动的问题；子级元素设置clear清除浮动的问题；
但是没有解决值耦合度高的问题。
2. float + overflow 属性配合使用
优点：第一种解决方法的问题都没有出现
缺点：overflow属性（开启了BFC模式，有副作用）不仅解决了两列布局问题，同时设置了内容溢出的情况。
3. display属性的table相关值使用
优点：浏览器兼容性比较好
缺点：将所有元素的display属性设置为table相关值，受到相应制约。
五、三列布局
1. float + margin属性配合使用
2. Float + overflow属性配合使用
3. Display属性的table相关值使用
六、圣杯布局
简单来说就是三行三列布局。 圣杯布局的核心：实现主体部分左右定宽+中间自适应的布局效果
七、双飞翼布局
主要是优化了圣杯布局中开启定位的问题。增加一个子级元素inner，主要解决问题就是重合问题。
八、等分布局
1. float属性实现等分布局效果
2. Display属性的值有关table实现等分布局效果
3. 等分布局存在间距的情况
实现等分布局时，如果需要每列之间实现空白间隔，设置margin或者padding时会多出一个边界
解决方法：在原有的HTML页面代码基础上再加一个父级容器
九、等高布局
1. display属性的值有关table实现
2. Padding+margin属性实现
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后的最后
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体免费获取
讲义、实战项目、讲解视频，并且会持续更新！**
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
[外链图片转存中…(img-sWIfijtd-1713477295540)]
最后的最后
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体免费获取
[外链图片转存中…(img-yvOg5FAx-1713477295540)]
[外链图片转存中…(img-7qf0nx0e-1713477295540)]
[外链图片转存中…(img-8gB6cBOu-1713477295540)]
[外链图片转存中…(img-hn43E0VT-1713477295541)]
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
