❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
响应式设计的基本原理:基本原理是通过媒体查询检测不同的设备屏幕尺寸设置不同的css样式 页面头部必须有meta声明的
17、什么叫CSS盒模型?有哪几种盒模型?有什么区别?box-sizing属性有什么用?
1、什么是CSS盒模型?
在我们的HTML页面中,每一个元素都可以被看成一个盒子,而这个盒子由:内容(content)、内边距(padding)、 边框(border)、外边距(margin) 四部分组成.
2、有哪几种盒模型?
对于盒模型,分为标准盒模型和怪异盒模型一下两种
标准(W3C)盒模型的范围包括margin、border、padding、content,并且宽高只包含content,不包含其他部分
怪异(IE)盒模型的范围包括margin、border、padding、content,和标准盒模型不同的是,怪异盒模型的宽高包含了padding和 border
box-sizing作用
用来控制元素的盒子模型的解析模式,默认为content-box context-box标准盒模型 border-box怪异盒模型
18、 Doctype作用? 标准模式与兼容模式(兼容模式)如何区分?
文档声明;用于告知浏览器该以何种模式来渲染文档.
严格模式和混杂模式的区别:
严格模式:页面排版及 JS 解析是以该浏览器支持的最高标准来执行
混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容
19、 为什么会出现浮动?浮动会带来哪些问题?清除浮动的方式有哪些?哪种最好?
1、为什么会出现浮动:
由于浮动元素脱离了文档流,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上.
2、浮动带来的问题:
- 父元素的高度无法被撑开,影响与父元素同级的元素
- 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构.
- 与浮动元素同级的非浮动元素(内联元素)会跟随其后
3、清除浮动的方式:
- 父级div定义height
- 结尾处加空div标签clear:both
- 父级div定义伪类:after、before
- 父级div定义overflow:hidden
- 父级div定义overflow:auto。
- 父级div也浮动,需要定义宽度。
- 父级div定义display:table。
- 结尾处加br标签clear:both
比较好的是第3种,无需多余标签,方便维护,通过伪类就可以解决
20、元素的alt和title有什么异同
不同点: 元素的alt是表示图片加载失败显示的文本内容,而title是表示鼠标悬停图片时显示的文本内容.
相同点: 在alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字
21、Div+CSS较table相比有什么样的优点?
正常场景一般都适用div+CSS布局,Div+CSS优点:
- 开发中结构与样式分离,便于后期项目的维护和迭代
- 代码语义性好
- 更符合HTML标准规范
- SEO友好
table缺点:
- 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量
- 灵活性差,比如要将tr设置border等属性,是不行的,得通过td
- 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
- 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱,不够语义化。
22、 ::before和:before有何异同?
- 单冒号(:)用于CSS3伪类,
- 双冒号(::)用于CSS3伪元素。伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且
伪类: 用于已有元素处于某种状态时为其添加对应的样式,这个状态是根据用户行为而动态变化的。
例如: 当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般css相似,可以为已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式,所以称为伪类。
伪元素: 用于创建一些不在DOM树中的元素,并为其添加样式。
例如: 我们可以通过:before来在一个元素之前添加一些文本,并为这些文本添加样式,虽然用户可以看见这些文本,但是它实际上并不在 DOM文档中。
23、什么是回流什么是重绘以及区别?
回流:
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建render tree.
重绘:
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘.
区别:
回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流,当页面布局和几何属性改变时就需要回流
24、.简单说一下H5新增了哪些新特性
语义化标签:header、footer、section、nav、aside、article
增强型表单:input 的多个 type calendar、date、time、url、search、tel、file、number 新增表单属性:placehoder、required、min 和 max
音频视频:audio、video
canvas 画布
kan wa si 地理定位(Geolocation)
拖拽释放:拖拽是一种常见的特性,即抓取对象以后拖到另一个位置,在HTML5中,
本地存储: localStorage 没有时间限制的数据存储; sessionStorage, session 的数据存储,当用户关闭浏览器窗口后,
数据会被删除 新事件:onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
WebSocket:建立持久通信协议,新的技术:webworker、websocket、Geolocation
25、css3新增了那些特征?
1、颜色:新增RGBA、HSLA模式
2、文字阴影:(text-shadow)
3、边框:圆角(border-radius)边框阴影:box-shadow
4、盒子模型:box-sizing
5、背景:background-size,background-origin background-clip(削弱)
6、渐变:linear-gradient(线性渐变):
eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);
radial-gradient (径向渐变)
7、过渡:transition可实现动画
8、自定义动画: animate@keyfrom
9、媒体查询:多栏布局@media screen and (width:800px)
10、border-image
11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放
12、3D转换
13、字体图标:font-size
14、弹性布局:flex
26、浏览器是如何渲染页面的
浏览器将获取的HTML文档解析成DOM树。
处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。
将DOM和CSSOM合并为渲染树(
rendering tree
),代表一系列将被渲染的对象。
渲染树的每个元素包含的内容都是计算过的,它被称之为布局
layout
。浏览器使用一种流式处理的方法,只需要一次绘制操作就可以布局所有的元素。
将渲染树的各个节点绘制到屏幕上,这一步被称为绘制
painting
。
- 构建对象模型(DOM,CSSOM)
- 构建渲染树(RenderTree)
- 布局
- 渲染
27、元素居中的方式、以及垂直上下居中
方法一:给父元素设置成弹性盒子,子元素横向居中,纵向居中
方法二:父相子绝后,子部分向上移动本身宽度和高度的一半,也可以用transfrom:translate(-50%,-50%)(最常用方法)
方法三:父相子绝,子元素所有定位为0,margin设置auto自适应
28、两/三栏布局(圣杯双飞翼)
-
两栏布局,左边定宽,右边自适应
-
三栏布局、圣杯布局、双飞翼布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。(中间先加载渲染)
1. 首先要给两侧设置padding预留出相应的空间
2. 随后分别为三列设置宽度与浮动,同时对footer设置清除浮动
3. 根据浮动的特性,由于center的宽度为100%,即占据了第一行的所有空间,所以left和right被“挤”到了第二行。
4. 接下来的工作是将left放置到之前预留出的位置上,这里使用负外边距
5. 这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px,以完成left的放
三栏布局两栏布局css代码
29、flex布局属性以及使用场景
Flex 布局,可以简便、完整、响应式地实现各种页面布局,任何一个容器都可以指定为 Flex 布局,行内元素也可以使用 Flex 布局。
我在项目中常用到的有九宫格布局,列表布局等,都会经常用到。
flex的属性:
flex-direction :设置主轴的方向
justify-content :设置主轴上的子元素排列方式
flex-wrap :设置子元素是否换行
align-content :设置侧轴上的子元素排列方式(多行)
align-items :设置侧轴上的子元素排列方式(单行)
flex-flow :复合属性,相当于同时设置了flex-direction和flex-wrap
flex:1;的原理
flex-grow:1;flex-shrink:1;flex-basis:auto; 这三个样式的和写
flex: 1 1 auto; 简写 flex:1;
flex-grow:0; 扩展比率
默认值为0,容器中项目没有占满时,不分配剩余空间。
flex-shrink:1; 收缩比率
默认值为1,容器中项目超出容器大小时,把项目平均压缩到容器内。
flex-basis:auto; 伸缩基准值
默认值为auto,定义容器中项目的占据空间,一般用百分数设值
30、常见的块级、行级、空元素
在CSS中规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。
我们在平常的项目中经常使用到的有
· 行内元素有:span a b i img input select strong
· 块级元素有:div p h1-h6 ul table form ul ol li dl dt dd…
· 空元素(没有内容):
31、css hack
概念:CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack 就是让你记住这个标准),以达到应用不同的 CSS 样式的目的
1、 条件hack
条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
2、 选择符Hack
比如IE6能识别 html .class{},IE7能识别+html .class{}
3、属性Hack 比如IE6能识别下划线_和星号_,IE7能识别星号_,但不能识别下划线_,而firefox两个都不能认识。
1、写CSS hack需要遵循以下三条原则:
· 有效: 能够通过 Web 标准的验证
· 只针对太古老的/不再开发的/已被抛弃的浏览器, 而不是目前的主流浏览器
· 代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则,而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此,并不推荐使用CSS hack来解决兼容性问题。
32、html和XML
html被称为超文本标记语言, 是一种描述性语言,用html 可以创建能在互联网上传输的信息页,是构成网页文档的主要语言,它是由很多的标签组成
xml 即可扩展标记语言,是Internet环境中跨平台的、依赖于内容的技术,是当前处理结构化文档信息的有力工具,满足了Web内容发布与交换的需要,适合作为各种存储与共享的通用平台。
都可以通过DOM 变成方式来访问。
都可以通过CSS来改变外观。
html和xml 都是标记语言,都是基于文本编辑和修改的。
xml不是要来取代html的,是对html的补充,用来与html协同工作的语言,基于上面这些优势,xml将来成为所有的数据处理和数据传输的常用工具非常可观。
34、毛玻璃效果
background: rgba(244, 243, 244, 0.18);
box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
35、web worek
新开了一个子线程,而且子线程不受线程的影响
- 大数据处理,耗费时间较长的操作
36、canvas 常用api有哪些
常用API:
-
fillRect(x,y,width,height) 实心矩形;
-
strokeRect(x,y,width,height) 空心矩形;
-
fillText( “Hello world” , 200 , 200 ) 实心文字;
-
strokeText( “Hello world” , 200 , 300 ) 空心文字;
37、语义化的好处
- 在我们开发中,语义化让,页面结构更加清晰,便于后期的维护,便于浏览器,搜索引擎解析
- 理由搜索引擎的爬取,利于seo
38、浏览器兼容性的问题
在不同的浏览器中,浏览器的内核都是不相同的,所以各个浏览器对网页的解析存在一定的差异。
简单来说就是写的代码在各个浏览器上显示不同的效果
解决:
1、css3新属性,加浏览器前缀兼容早期浏览
-moz- 火狐浏览器
-webkit- Safari, 谷歌浏览器等使用Webkit引擎的浏览器
-o- Opera浏览器(早期)
-ms- IE
2、css hack解决浏览器兼容性不同浏览器,识别不同的样式,css hack本身就是处理浏览器兼容的
3、图片默认有间距:
几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起作用。 可以通过使用float属性为img布局(所有图片左浮)
4、不同浏览器的标签默认的 margin 和 padding 不同
解决办法:可以通过设置全局样式来解决这个问题,这样所有的样式都会重置,初始值都会相同了。
39. 用纯CSS实现三角形的原理是什么?
首先,需要把元素的宽度、高度设为0。然后设置边框样式为透明,代码如下:
div{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
2种更简单
div{
width: 0;
专业技能
一般来说,面试官会根据你的简历内容去提问,但是技术基础还有需要自己去准备分类,形成自己的知识体系的。简单列一下我自己遇到的一些题
- HTML+CSS
- JavaScript
- 前端框架
- 前端性能优化
- 前端监控
- 模块化+项目构建
- 代码管理
- 信息安全
- 网络协议
- 浏览器
- 算法与数据结构
- 团队管理
- 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最近得空把之前遇到的面试题做了一个整理,包括我本人自己去面试遇到的,还有其他人员去面试遇到的,还有网上刷到的,我都统一的整理了一下,希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限,仅展示部分内容
明,代码如下:
div{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
2种更简单
div{
width: 0;
专业技能
一般来说,面试官会根据你的简历内容去提问,但是技术基础还有需要自己去准备分类,形成自己的知识体系的。简单列一下我自己遇到的一些题
- HTML+CSS
- JavaScript
- 前端框架
- 前端性能优化
- 前端监控
- 模块化+项目构建
- 代码管理
- 信息安全
- 网络协议
- 浏览器
- 算法与数据结构
- 团队管理
- 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最近得空把之前遇到的面试题做了一个整理,包括我本人自己去面试遇到的,还有其他人员去面试遇到的,还有网上刷到的,我都统一的整理了一下,希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限,仅展示部分内容