前端 html,css 经典面试题 16道 （20220322）

目录

1.html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？HTML5是构建web内容的一种语言描述方式，在08年正式发布，12年已形成了稳定的版本。

H5新特性有：

处理h5新标签的浏览器兼容性问题：

方法一 :

方法二：

2.行内元素和块级元素的区别？什么是重绘和回流？

3.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 选择符有哪些？

优先级算法如何计算？

4.CSS3有哪些新特性？

5.解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？

6.简述flex布局

7.css 隐藏元素有哪几种方法？

8.BFC（Block Formatting Context） 是什么？应用？

9.解释下浮动和它的工作原理？清除浮动的方法（4种）

1, 添加额外标签

2, 使用 br标签和其自身的 html属性

10.什么是外边距重叠？重叠的结果是什么？

外边距不重叠的情况：

防止外边距重叠的方法：

11.如何让一个盒子水平垂直居中

12.左右固定中间自适应 三栏布局（圣杯、双飞翼、弹性盒子...）

圣杯布局：

双飞翼布局:

 相似点：

 区别：

flex布局

13.静态布局、自适应布局、流式布局、响应式布局、弹性布局（rem、em）

静态布局（Static Layout）

自适应布局（Adaptive Layout）

流式布局（Liquid Layout）

响应式布局（Responsive Layout）

弹性布局（rem/em布局）

14.less、sass、 stylus分别都有哪些优缺点？

15.说一下在IE（IE6）中常见的几个兼容性问题

一、头文档所引起的怪异盒模型问题

二、IE6下双边距BUG

三、图片间隙问题

四、li的间距问题

五、块状元素默认高度问题

六、表单行高不一致

七、图片元素img下高度超出,出现多余空白

八、左浮元素margin-bottom失效

九、position下的left，bottom错位

十、子级中有设置position，则父级overflow失效

十一、块元素中有文字及右浮动的行元素，行元素换行

十二、透明rgba与opacity

16.清空数组的方法

---

1.html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？HTML5是构建web内容的一种语言描述方式，在08年正式发布，12年已形成了稳定的版本。

H5新特性有：

语义标签、增强型表单、Canvas绘图、地理定位、SVG绘图、拖放API、WebWorker、WebStorage、WebSocket

移除了：

 1、显现层元素：basefont 、big、center、font、s、strike、tt、u

 2、性能较差元素：frame、frameset、noframes

处理h5新标签的浏览器兼容性问题：

方法一 :

1、使用静态资源的html5shiv包

<!--[if lt IE9]>

<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

<![endif]-->

方法二：

IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签

如何区分HTML和HTML5：

1，文档的类型声明不同

HTML的代码很长。而H5的声明代码很简单

2，在语义结构方面

HTML：没有结构语义化标签（通俗来讲就是不方便阅读，没有告诉你哪里是头，哪里是尾）

H5：添加了许多具有语义化的标签，使代码解构清晰，提高了代码的可读性。

2.行内元素和块级元素的区别？什么是重绘和回流？

行内元素：

共占一行，与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度，行内元素只能嵌套包括自己在内的所有行内元素；a/b/i/u/em/strong/font/del/strike/span

块级元素：

独占一行，不能与其他任何元素并列，可以设置宽h/p/ul/ol/li/dl/dd/dt/table/caption/tr/th/td/tbody/tfoot/thead/div

回流：

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。

重绘：

当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，则就称为重绘。

区别：

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流

当页面布局和几何属性改变时就需要回流

3.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 选择符有哪些？

1.id选择器（#id）

2.类选择器（.class）

3.标签选择器（div，h1，p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[title]）

9.伪类选择器（a:hover，li:nth-child）

优先级算法如何计算？

1.优先级就近原则，同权重情况下样式定义最近者为准；

2.载入样式以最后载入的定位为准；

3.!important > id > class > tag；

4.important 比 内联优先级高，但内联比id要高；

1、第一等：代表内联样式，如: style=””，权值为1000。

2、第二等：代表ID选择器，如：#content，权值为0100。

3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5、通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6、继承的样式没有权值。

4.CSS3有哪些新特性？

word-wrap 文字换行

text-overflow 超过指定容器的边界时如何显示

text-decoration 文字渲染

text-shadow文字阴影

gradient渐变效果

transition过渡效果 transition-duration：过渡的持续时间

transform拉伸，压缩，旋转，偏移等变换

animation动画

5.解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？

在盒模型中，有个问题免不了存在，边界塌陷。两个盒子垂直方向设置外边距，会造成便捷塌陷，只保留一个，哪个值大保留哪个。

 注意：

   浮动元素和绝对定位元素不会发生边界坍塌

   只有块级元素的垂直方向才存在margin合并的问题，再说一下margin负值向内部缩减，正值向外。

6.简述flex布局

flex弹性布局，可以简便、完整、响应式地实现各种页面布局, 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

flex-direction：决定主轴的方向

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。