【面试经验分享】2022 前端知识复习—— HTML + CSS 篇

2022-07-20 23:31:28 阅读：259 来源： 互联网

标签：flex Canvas 标签元素 content HTML 2022 SVG CSS

HTML 相关

HTML5 新特性有哪些？

语义标签：header、nav、section、aside、footer 等；
增强型表单：type='email'、type='date'、type='number' 等；
新增表单属性：placehoder、pattern、multiple 等；
音频和视频：audio、video；
绘图：Canvas；
其他：地理定位、拖放 API、Web Storage、Web Worker、WebSocket

Canvas 和 SVG 的区别是什么？

看这里

相同点：都是用来绘制网页 2D 图形的。
不同点：
	1. SVG 使用 XML 标签绘制；Canvas 使用 JavaScript 来绘制。
	2. SVG 绘制的是矢量图（放大或者缩小不会失真）；Canvas 绘制的是位图（能以 .png/.jpg 保存）。
	3. SVG 控制标签节点，节点过多会渲染慢；Canvas 控制像素渲染，性能可能好但实现复杂。
	4. SVG 支持分层和事件；Canvas 不支持，但可以用库实现。

如何理解 HTML 语义化？

用合适的标签描述 HTML 结构和内容。比如遇到标题就用 h1 到 h6 标签；段落用 p 标签；导航用 nav 标签等。
优点：
	1. 适合搜索引擎检索（SEO）
	2. 适合阅读，利于团队维护。

CSS 相关

CSS3 新特性有哪些？

常用：新增选择器、flex 布局、圆角、渐变、阴影、文字溢出、背景效果、边框效果、转换、平滑过渡、动画、媒体查询等。

BFC 是什么？

BFC：块级格式化上下文
触发方式：
	1. 浮动元素（float 不是 none）；
	2. 绝对定位元素（元素的 positon 为 absolute 或 fixed）；
	3. 行内块元素（inline block）；
	4. overflow 值不为 visible 的块元素；
	5. 弹性元素的 flex-item（display 为 flex 或 inline-flex 元素的直接子元素）；
	6. 使用最新的 display：flow-root 触发没有上面副作用。
解决什么问题：
	1. 清除浮动；
	2. 防止 margin 合并；

如何实现垂直居中？

1. 最常用：flex 布局
2. 子绝父相，left：50% right:50%  配合 transform: translate(-50%,-50%)
3. 子绝父相，定位全部为 0 配合 margin: auto
4. table tr td 只有一个时自带居中
5. div 伪装 tabel 居中 display: table-cell
6. 100% 高度的子元素添加前后伪元素设置 vertical-align: middle

CSS 选择器优先级如何确定？

总结：
1. 选择器越具体，其优先级越高
2. 相同优先级，出现在后面的，覆盖前面的
3. 属性后面添加 !important 的优先级最高，少用

如何清除浮动？

1. 给父元素添加 .clearfix
2. 给父元素添加 overflow:hidden 触发 BFC

CSS 两种盒子模型区别？

content-box（标准盒模型）：实际宽度 = width（content） + padding + border
border-box（IE 盒模型）：实际宽度 = width（content + padding + border）

border-box 更符合我们人类的视觉效果（IE 算是做了回好事）

说说 flex （重点）？

flex 是 flexible box 缩写，意为“弹性布局”。

flex 核心概念：
	1. felx-container、flex-item
	2. main-axis（主轴）、cross-axis（交叉轴）
	3. main-start（主轴的开始位置）、main-end、cross-start、cross-end
	4. main-size（单个项目占据的主轴空间）、cross-size
	
flex-container 属性：
	1. flex-direction：主轴的方向
	2. flex-wrap：一条轴线上放不小如何换行
	3. flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
	4. justify-content：主轴上的对齐方式
	5. align-items：交叉轴上如何对齐
	6. align-content：多根轴线的对齐方式
	
flex-item 属性：
	1. order：项目的排列顺序。数值越小，排列越靠前，默认为 0
	2. flex-grow：“成长”，item 占据剩余空间的比例
	3. flex-shrink：“缩小”， item 缩小超出空间的比例
	4. flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）
	5. flex：flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto
	6. align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items 属性（很少用）

标签：flex,Canvas,标签,元素,content,HTML,2022,SVG,CSS
来源： https://www.cnblogs.com/cqkjxxxx/p/16497810.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9