总结前端/面试/温故

html/css

备注

1、使用css代码画一个三角形

.triangle{
  width:0;
  height:0;
  border:100px solid red;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

2、1rem、1em、1vh、1vw、1px各自代表的含义

1rem与网站根标签font-size有关，若html根标签设置font-size:20px，那么这里的1rem为20px；
1em与父元素有关，若父元素设置的font-size:20px；那么在子组件中2em就表示为40px；
1vh(Viewport Height)表示可视化窗口高度的的1%；
1vw(Viewport Width)表示可视化窗口宽度的的1% ；
1px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的；

3、图片懒加载和预加载

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

4、使用css画一条0.5px的

.line{ border:1px solid gray; transform:scaleY(0.5)}

5、link标签和import标签的区别

link 属于 html 标签，而@import 是 css 提供的
页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。
link 方式样式的权重高于@import

6、CSS有哪三大特性，有哪些选择器

层叠性、继承性、优先级
id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等
优先级：important > 内敛样式 > id 选择器 > class 选择器 > 标签选择器

7、HTML5 和 CSS3 新属性

8 个语义元素： header section footer aside nav main article figure(经测试，只要figure有样式，其它语义标签只是display:block)
内容元素：
mark 高亮 { background-color:mark;color:marktext }
progress 进度新的表单控件
input type新加属性 date time search color datetime-local
canvas 绘图
支持内联 SVG。
多媒体元素 audio(audio中source) video embed track
本地离线存储，把需要离线存储在本地的文件列在一个 manifest 配置文件
web 存储 localStorage、SessionStorage
CSS3 边框如 border-radius，box-shadow 等；
CSS3 背景如 background-size，background-origin 等；
CSS3 2D，3D 转换如 transform 等；CSS3 动画如 animation等。

8、CSS中的常用伪类和伪元素有哪些

1、伪类可以从状态类伪类、结构类伪类、其它伪类和表单相关伪类进行分类。
状态类伪类：** :hover、:link、:active、:visited、:focus**
结构类伪类：** :first-child、:last-child、:nth-child(n)**
其它伪类： :fullscreen全屏显示、:lang()匹配指定语言
表单相关伪类： :checked选中、:disabled禁用、:required必填、:read-only只读
2、伪元素：::before、::after、::first-letter、::first-line、::selection、::placeholder

9、什么是响应式设计,实现响应的方法

1、简单理解：同时适配PC+平板+手机等设备,网站的布局会根据视口来调整模块的大小和位置。
2、基本原理：通过媒体查询 监测不同设备 做屏幕尺寸处理, 需要注意为了处理移动端,页面头部必须有meta声明viewport

10、CSS重绘和回流（重排）

重绘：元素样式改变不改变布局，浏览器重绘对元素进行更新，如颜色改变；
回流：元素的大小、结构变化，浏览器重新渲染页面，如width，height改变；

11、transition 和 animation 的区别

transition 需要触发一个事件才能改变属性
animation 不需要触发任何事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从from … to，而 animation 可以一帧一帧的

12、Doctype 作用是什么?严格模式与混杂模式如何区分？它们有何作用?

声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签,高速诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

13、可替换元素

CSS可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。例如