前端面试 - css+html常考知识点总结
目录
1. 盒子模型
2. flex布局
3. 实现水平居中
4. inline和block
5. 垂直居中
6. 水平垂直居中
7. CSS3新增
8. CSS3伪类
9. JS动画和CSS动画
10. 清除浮动
11. 让元素消失
12. position和display
13. 相对定位与绝对定位
14. css引入方式 link import
15. css选择器及优先级
16. 行内元素有哪些？块级元素有哪些？
17. BFC
18. 伪类和伪元素
19. 重绘和重排
20. H5新特性
21. HTML、XML、XHTML 的区别
22. 标签上title属性与alt属性的区别是什么
23. 实现三角形
24. CSS单位有哪些？
25. HTML5的应用缓存是什么？
1. 盒子模型
页面上所有的元素对象，其实际的呈现形式都是一个盒子形状的抽象
盒模型有两种， IE怪异盒子模型、W3C标准盒子模型；
盒模型是由： 内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。
标准盒子模型的宽高是指的content的宽高；
怪异盒子模型的宽高是指的content+padding+border的宽高。
2. flex布局
- flex布局即弹性布局，用来为盒模型提供最大的灵活性
- 属性
- flex-direction：主轴的方向
- flex-wrap：子元素在一条轴线上放不下时，如何换行
- flex-flow：前2个属性的简写
- justify-content：子元素在主轴上的对齐方式
- align-items：子元素在交叉轴上的对齐方式
3. 实现水平居中
(1) 内联元素水平居中
利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效
(2) 内联块级元素水平居中
通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。
(3) 多级块状元素水平居中
使用inline-block: 如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型（display）为inline-block和父容器的text-align属性为center.从而使多块级元素水平居中。
利用display:flex: 利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
4. inline和block
block： 块级元素
inline： 内联元素（text-align属性有效）
问题：当设置成inline后，width和height属性是无效的（只会为文字添加背景）
inline-block: 行内块级元素（块级+内联）
5. 垂直居中
(1) 单行内联元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。
(2) 多行元素垂直居中
利用表（table）布局： 设置父元素显示类型（display）为table。子元素显示类型（display）为table-sell。利用表布局的vertical-align: middle可以实现子元素的垂直居中
利用flex布局： 利用flex布局实现垂直居中，设置显示类型（display）为flex.其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。
利用‘精灵元素ghost element’：即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。
(3) 块级元素垂直居中
固定高度的块级元素：父元素position设置为relative，子元素position设置为absolute。通过绝对定位元素距离顶部（top）50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。
未知高度的块级元素：当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
6. 水平垂直居中
固定宽高元素水平垂直居中： 通过margin平移元素整体宽度（包括padding等）的一半，使元素水平垂直居中。
未知宽高元素水平垂直居中：利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。transform: translate(-50%, -50%);
利用flex布局（display:flex）：其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式（center）；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式（center）。
利用grid布局（display:grid）：兼容性较差，不推荐
在屏幕上水平垂直居中：常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。
7. CSS3新增
- word-wrap 文字换行
- text-overflow 超过指定容器的边界时如何显示
- text-decoration 文字渲染
- text-shadow文字阴影
- gradient渐变效果
- transition过渡效果 transition-duration：过渡的持续时间
- transform拉伸，压缩，旋转，偏移等变换
- animation动画
Transition过渡 指定从一个状态到另一个状态时如何过渡; Transform: 过渡属性只有当鼠标经过时候才会作用, 过渡属性没有中间的过程，动画是一步到位,过渡属性一次鼠标经过只可以发生一次，不能重复发生动画
Animation复杂动画 可以实现更复杂的样式变化效果；使用方法：定义关键帧样式；应用动画到元素上; Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，动画是一帧一帧的绘制,可绘制复杂动画,需要配合@keyframes来使用,通过keyframe显式控制当前帧的属性值
8. CSS3伪类
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
9. JS动画和CSS动画
渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead完成（而js动画则会在main thread执行，然后出发compositor thread进行下一步操作），特别注意的是如果改变transform和opacity是不会layout或者paint的。
区别：
- 功能涵盖面，js比css大
- 实现/重构难度不一，CSS3比js更加简单，性能跳优方向固定
- 对帧速表现不好的低版本浏览器，css3可以做到自然降级
- css动画有天然事件支持
- css3有兼容性问题
10. 清除浮动
- 方法一：在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。
- 方法二：父级div定义 overflow: hidden；这种方案让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。
- 方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
11. 让元素消失
- opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发, 修改元素会造成重绘，性能消耗较少
- visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件. 修改元素只会造成本元素的重绘,性能消耗较少。读屏器读取visibility: hidden元素内容
- display:none, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉.修改元素会造成文档回流。读屏器不会读取display: none元素内容，性能消耗较大
- z-index=-1置于其他元素下面
12. position和display
position
- relative：相对定位，相对于自己原来的位置进行移动，移动后，原来的位置继续占有
- absolute：绝对定位，相对于最近一级有定位的父元素进行移动，原来的位置不继续占有
- fixed：固定定位，相对于浏览器的可视窗口进行移动，原来的位置不继续占有
- sticky：粘性定位，相对于浏览器的可视窗口进行移动，原来的位置继续占有
display
- block：转换为块级元素，独占一行、可控制宽高边距
- inline：转换为行内元素，同一行、不可控制宽高边距
- inline-block：转换为行内块元素，同一行且之间有空隙、可控制宽高边距
- none：元素不会显示
- table：作为块级表格显示
- inherit：继承父元素的值
- flex：弹性布局
13. 相对定位与绝对定位
absolute绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。fixed固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。
共同点：改变行内元素的呈现方式，都脱离了文档流；不同点：absolute的”根元素“是可以设置的，fixed的“根元素”固定为浏览器窗口
14. css引入方式 link import
3种引入方式
- 内联样式表：将样式写在元素的style属性内
- 内部样式表：将样式写在style标签内
- 外部样式表：通过link标签，引入外部样式文件
link和@import的区别
- link在页面载入时同时加载CSS文件，即同步加载；@import需要等到网页完全载入后再加载CSS文件，即异步加载
- 浏览器对link的支持早于@import，@import不支持低版本的浏览器
link属于HTML标签，而@import是css提供的；link方式的样式的权重高于@import的权重。
15. css选择器及优先级
- !important
- 内联样式style=""
- ID选择器#id
- 类选择器 /属性选择器（div[height=100px]）/伪类选择器.class.active[href=""]
- 元素选择器 /关系选择器 /伪元素选择器html+div>span::after
- 通配符选择器*
16. 行内元素有哪些？块级元素有哪些？
- 行内元素：
a,b,span,img,input,select,strong; - 块级元素：
div,ul,li,dl,dt,dd,h1-5,p等； - 空元素：
,;
17. BFC
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
（1）BFC的特性
- 属于同一个BFC的两个相邻的盒子的margin会发生重叠（比如两个div都在html元素中，上下外边距会重叠）
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
- 计算BFC的高度，浮动元素也参与计算，即BFC可以包含浮动的元素（比如父元素不设置高度但设置BFC，浮动的子元素的高度会撑起父盒子）
- 内部的Box会在垂直方向上一个接一个的放置。
- 垂直方向上的距离由margin决定
- bfc的区域不会与float的元素区域重叠。
（2）BFC应用
- 避免外边距折叠：父元素设置overflow:hidden；兄弟元素分别放在overflow:hidden的两个盒子里
- 清除内部浮动 （撑开高度）：父元素设置overflow：hidden/auto/scroll
- 自适应两（多）栏布局
- 防止字体环绕
（3）触发BFC条件
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute、fixed
18. 伪类和伪元素
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素都是用来修饰不在文档树中的部分。
伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。
- 获取不存在与DOM树中的信息。比如a标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
- 获取不能被常规CSS选择器获取的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。常见的伪元素有：::before，::after，::first-line，::first-letter，::selection、::placeholder等
因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
19. 重绘和重排
减少重绘重排的方法有：
· 不在布局信息改变时做DOM查询，
· 使用csstext,className一次性改变属性
· 使用fragment
· 对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素
20. H5新特性
（1）语义化标签：header、footer、section、nav、aside、article
（2）增强型表单：input 的多个 type
新增表单元素：datalist数据列表、output输出内容、progress进度条
新增表单属性：placehoder占位提示、required不为空、min 和 max
（3）音频视频：audio、video
（4）Canvas 基于网页画布2D位图绘图技术，善于表现细腻颜色，可用于统计图表、页面游戏、地图应用、网页特效等。绘制 矩形 文本 路径 / SVG绘图
Canvas与SVG的不同：
Canvas是位图；SVG是矢量图
Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)
Canvas内容不能使用CSS；SVG内容可以使用CSS；
Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定
（5）地理定位
（6）拖拽 H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。H5之后专门提供了七个鼠标拖动相关事件句柄：
（7）本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
（8）新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
（9）WebSocket：单个 TCP 连接上进行全双工通讯的协议
21. HTML、XML、XHTML 的区别
HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。
XHTML是HTML规范版本；HTML5是HTML、XHTML以及HTML DOM的新标准。
22. 标签上title属性与alt属性的区别是什么
alt是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。
23. 实现三角形
三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。实现圆圈梯形半圆 参考https://juejin.im/post/5df1e312f265da33d039d06d
24. CSS单位有哪些？
- px：一个绝对的像素单位
- %： 父元素相同属性的值的比例
- em：相对单位。 不同的属性有不同的参照值。
- 对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小
- border, width, height, padding, margin, line-height 在这些属性中，使用em单位的计算方式是参照该元素的字体大小，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小
- rem：是相对于根元素 html 的 font-size 来计算的，所以其参照物是固定的。
- vh：相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。100vh就是整个视窗高度的大小
25. HTML5的应用缓存是什么？
- 应用缓存
- HTML5应用缓存的最终目的，是帮助用户离线浏览页面，它可以帮助用户指定哪些文件需要缓存，哪些不需要
- 应用缓存的优势：离线浏览、速度（让已缓存资源加载得更快）、减少服务器负载（只需下载服务器更新过的资源）
- 原理：在用户没有连接网络时，可以正常访问站点或应用，在用户连接网络时，更新用户机器上的缓存文件
- 和常规的HTML浏览器缓存相比，它不强制要求用户访问网站
参考链接：https://juejin.im/post/5ed1c2cae51d45784635a50d
https://juejin.im/post/5df1e312f265da33d039d06d
https://gitee.com/wyz-1997/WebKnowledge/blob/master/CSS/CSS%E5%9F%BA%E7%A1%80.md