HTML5教程

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

本文主要是介绍【面试经验分享】2022 前端知识复习—— HTML + 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 选择器优先级如何确定?

image

总结:
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 属性(很少用)
这篇关于【面试经验分享】2022 前端知识复习—— HTML + CSS 篇的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!