2024年Web前端最全css-知识点（学习笔记）(1)，2024年最新大厂web前端开发面试解答问题

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

前端面试题汇总

• flex+margin

• margin：0 auto；

• 子盒子浮动的情况下 父盒子必须添加：width：fit-content；和 maigin：0 auto；

5.2、浮动元素水平居中：

• 对于定宽的浮动元素，通过子元素设置relative + 负margin

• 对于不定宽的浮动元素，父子容器都用相对定位

通用方法(不管是定宽还是不定宽)：flex布局

5.3、行内元素垂直居中：

• flex

• 行高等于父盒子的高度

• 利用表布局（table）display:table;（将父盒子转成表格的方式在将里面的内容居中）

利用表布局的vertical-align: middle可以实现子元素的垂直居中。（都写在父盒子里面）

5.3、块元素垂直居中：

• 使用absolute+负margin(已知高度宽度)

通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。

• 使用absolute+transform

当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

• 使用flex+align-items

通过设置flex布局中的属性align-items，使子元素垂直居中。

• 使用table-cell+vertical-align: middle 添加在父盒子里面

通过将父元素转化为一个表格单元格显示（类似 和 ），再通过设置 vertical-align属性，使表格单元格内容垂直居中。

六、三栏布局

知识点：

margin-left:-100%

是对象向左移动一段距离，这段距离等于父亲的内容宽度，浮动到前面元素的最左边。

圣杯布局和双飞翼布局实现的效果一样，但是在解决中间部分被挡住的问题，采取解决的方法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

————————————————

版权声明：本文为CSDN博主「@Demi」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_38128179/article/details/86542447

6.1、双飞翼布局:左右盒子固定 中间盒子自适应

举例：

定高200px，左右宽度为200px，中间自适应

html

左边

右边

中间

• {

padding: 0;

margin: 0;

}

/* 清除浮动*/

.box {

overflow: hidden;

}

.box1 {

text-align: center;

list-style: 600px;

float: left;

width: 200px;

height: 200px;

background-color: pink;

}

.box2 {

height: 200px;

background-color: plum;

margin-right: 200px;

margin-left: 200px;

}

.box3 {

text-align: center;

list-style: 200px;

float: right;

width: 200px;

height: 200px;

background-color: pink;

}

6.2、圣杯布局: 要求中间区域优先渲染，左右区块给定宽，中间区块自适应；浮动和定位都用到

html

中间

左边

右边

css

• {

padding: 0;

margin: 0;

box-sizing: border-box;

}

.box {

width: 100%;

margin: 0 auto;

padding: 0 200px 0 200px;

overflow: hidden;

}

.box2 {

width: 100%;

position: relative;

float: left;

height: 100px;

background-color: pink;

}

.box1 {

position: relative;

float: left;

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

[外链图片转存中…(img-93WbJnll-1715365905410)]