HTML篇

1、前端⻚⾯有哪三层构成，分别是什么？作⽤是什么？

1.结构层：由 HTML 标记语⾔负责创建，仅负责语义的表达。解决了⻚⾯“内容是什么”的问题。
2.表示层：由CSS负责创建，解决了⻚⾯“如何显示内容”的问题。
3.⾏为层：由脚本（js）负责。解决了⻚⾯上“内容应该如何对事件作出反应”的问题

2.⾏内元素有哪些？块级元素有哪些？空元素（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，img

3、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）

4. CSS选择器的优先级

!important > ⾏内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承

5.初始化CSS样式的意义

1、为什么要初始化CSS样式：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有对CSS初始化往往会出现浏览器之间的⻚⾯显示差异。

6.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 双向通信协议

7.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-clip

8. 对HTML语义化的理解

1、⽤正确的标签做正确的事情

2、HTML语义化让⻚⾯的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析

3、即使在没有样式CSS情况下也以⼀种⽂档格式显示，并且是易于阅读的

4、搜索引擎的爬⾍也依赖于HTML标记来确定上下⽂和各个关键字的权重，利于SEO

5、使阅读源代码的⼈更容易将⽹站分块，便于阅读维护理解

9.CSS的盒⼦模型

1、有两种， IE 盒⼦模型、W3C 盒⼦模型；

2、盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；

3、区 别： IE的content部分把 border 和 padding计算了进去;

10.什么是重绘和重排

1、重排: 当DOM元素影响了元素的⼏何属性（例如宽和⾼），浏览器需要重新计算元素的⼏何属性，同样其它元素的⼏何属性也会和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为“重排”。

2、重绘: 完成重排后，浏览器会重新绘制受影响的部分到屏幕上中，该过程称为“重绘”。当我们改变DOM的⼤⼩，增加删除都会导致重排，当给DOM元素改变颜⾊的时候，会导致重绘，重排⼀定会重绘，重绘不会重排。重排会影响性能，所以我们尽快能的减少重排的操作

11.px/em/rem有什么区别

1、px 是固定的像素，⼀旦设置了就⽆法因为适应⻚⾯⼤⼩⽽改变

2、em 和rem相对于px更具有灵活性，他们是相对⻓度单位，意思是⻓度不是定死了的，更适⽤于响应式布局

3、em 相对⾃身font-size，没有则相对于⽗元素，rem相对于根元素的font-size

12.rem布局的原理

1、rem 是css的相对单位，rem缩放是相对根元素字体⼤⼩.

2、rem 布局的本质是等⽐缩放，⼀般是基于宽度。

3、rem 会配合媒体查询（或js动态获取屏幕宽度）来⼀起使⽤，来实现屏幕的适配。

13、如何水平垂直居中div

    /* 方式一： 使用定位加平移*/

    div {

        position: absolute; /* 相对定位或绝对定位均可 */

        width:500px;

        height:300px;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        background-color: pink; /* ⽅便看效果 */

    }
    
   /* 方式二： 使用flex布局 ，
实际使⽤时应考虑兼容性*/
   
.container {

    display: flex;

    align-items: center; /* 垂直居中 */

    justify-content: center; /* ⽔平居中 */

}

.container div {

    width: 100px;

    height: 100px;

    background-color: pink; /* ⽅便看效果 */

}