Dg's Blog-专注健康快乐每一天 - 面试题
type: channel
link: https://www.zhougewk8.cn/tag/%E9%9D%A2%E8%AF%95%E9%A2%98/
items: 前端-基础面试题汇总(含Vue、React)

前端-基础面试题汇总(含Vue、React)
type: item
date: 2022-05-02T22:59:00+08:00
description: 一、移动web部分1、前端页面有哪三层构成，分别是什么？作用是什么？1、结构层：由 HTML 标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。 2、表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。 3、行为层：由脚本（js）负责。解决了页面上“内容应该如何对事件作出反应”的问题2、主流的浏览器分别是什么内核？Trident内核：（国产的绝大部分浏览器）IE，360，搜狗 Gecko内核：Firefox，NetScape6及以上 Presto内核：Opera7及以上 Webkit内核：（国产大部分双核浏览器其中一核）Safari（苹果），Chrome3、如何居中一个浮动元素?父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。 Test Float Element Center 4、行内元素有哪些？块级元素有哪些？空元素（void）有哪些？1、行内元素：a，b，span，img，input，strong，label，button，select，textarea，em 2、块级元素：div，ul（无序列表），ol，li，dl（自定义列表），dt（自定义列表项），dd（自定义列表项的定义），p，h1-h6，blockquote（块引用） 3、空元素（void）：即没有内容的HTML元素。br（换行），hr（水平分割线），meta，link，input，img5、BFC（Block Formatting Context，块级格式化上下文）1、是什么：决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。简言之，就是一个特殊的块，内部的元素和外部的元素不会相互影响。BFC内的盒子会在垂直方向上一个接一个地放置，垂直方向上也会发生外边距重叠。 2、应用场景：自适应布局（BFC不与float box重叠）、清除浮动（计算BFC的高度时，内部的浮动元素也被计算在内）、防止外边距重叠 3、如何触发BFC：float属性（不为none）、overflow属性（不为visible）、position属性（absolute，fixed）、display属性（inline-block，table-cell，table-caption，flex，inline-flex）6、CSS选择器的优先级!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 7、初始化CSS样式的意义1、为什么要初始化CSS样式：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有对CSS初始化往往会出现浏览器之间的页面显示差异。8、HTML5新增了哪些属性1. 语义化标签: header nav section article aside footer 2. 多媒体标签: video audio 3. input类型: number search email tel date file time url 4. 本地离线存储 localStorage 长期存储数据,改变浏览器数据不会丢失 sessionStorage 浏览器关闭数据会丢失 5. 自定义属性 data-* 6. 画布 Canvas 7. webscoket 双向通信协议9、CSS3新增了哪些属性1. 圆角 border-radius 2. 盒子模型 box-sizing 3. 阴影 box-shadow 盒子阴影 text-shadow 文字阴影 4. 过渡 transition 5. 2D转换transform translate(平移) scale(缩放) skew(斜切) rotate(旋转) transform-origin 控制转换中心点 6. 3D转换 perspective(透视距) transform-style(3D控件效果) 7. 渐变 linear-gradient radial-gradient 8. 弹性布局 flex 9. 媒体查询 @media screen and () {...} 10. 边框图片 border-image 11. 自定义动画 @keyframes animation 12. 颜色 新增RGBA HSLA模式 13. 背景 background-size background-origin background-clip10、对HTML语义化的理解1、用正确的标签做正确的事情 2、HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析 3、即使在没有样式CSS情况下也以一种文档格式显示，并且是易于阅读的 4、搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO …