前端 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包

方法二：

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：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap：换行

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content：水平对齐方式

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items：垂直对齐方式

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

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

css隐藏元素方法

display:none

Jquery：show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。

visibility:hidden：

和display:none的区别在于，元素在页面消失后，占据的空间依旧会保留着，但是display:none不会，所以它只会导致浏览器重绘而不会回流，因此，visibility:hidden适用于那些元素隐藏后不希望页面布局发生变化的场景；

opacity:0  (透明度，元素本身不会隐藏，会引起重绘)

overflow:hidden

position: absolute： 把元素脱离文档流移出视觉区域，既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），达到一定的值，离开当前页面。

clip-path（不常用）

position定位有哪些？

1、static（静态定位，不脱流）

2、flex（固定定位，脱流）

3、relative （相对定位，不脱流）

4、absolute（绝对定位，脱流）

5、sticky（粘性定位）

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

是一个独立的渲染区域，通俗点BFC就是页面上的一个隔离的独立容器，容器里面的元素布局不受外界影响，同时也不会影响到外面的元素。

那么我们可以通过CSS为元素设置一些属性，来触发BFC,常用的方式有：

Float值不为none

Postion值不为relative和static

Overflow值为auto scroll和hidden

display值为inline-block

通过这几种方式，我们可以使用BFC来：

1、防止margin重叠2、清楚内部浮动3、消除文本环绕做出自适应两栏布局：

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

浮动为该元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动引起的问题：

父元素的高度无法被撑开，影响与父元素同级的元素

与浮动元素同级的非浮动元素（内联元素）会紧跟其后

若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动的方法：

1, 添加额外标签

  在浮动元素末尾添加一个空的标签，

优点：通俗易懂，容易掌握

缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。

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

优点：比空标签方式语义稍强，代码量较少

缺点：同样有违结构与表现的分离，不推荐使用

3, 父元素设置 overflow：hidden

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；overflow:hidden会导致中键失效。

4、父元素设置 overflow：auto 属性。同样IE6需要触发hasLayout，演示和3差不多

优点：不存在结构和语义化问题，代码量极少

缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等。

5,使用:after 伪元素

需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

.clearfix:after {content:" "; display:block; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

优点：结构和语义化完全正确,代码量居中

缺点：复用方式不当会造成代码量增加

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

外边距不重叠的情况：

1）水平margin永远不会重合

2）设置了overflow属性(visible除外)的元素和它的子元素之间的margin不会重叠

3）设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，和子元素之间也不重叠

4）设置了display:inline-block的元素，垂直margin不会重叠，和子元素之间也不重叠

5）根元素(如HTML)与body的margin不会重叠

防止外边距重叠的方法：

1）元素绝对定位position:absolute;一般用在内层元素

2）内层元素加float:left;或display:inline-block;

3）外层元素用padding增加边距

4）外层元素设置overflow:hidden;

5）内层元素透明边框border:1px solid transparent;

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

1、 如何让一个盒子水平垂直居中

①定位：（常用方法,推荐）

position:absolute;

position:relative;

left:值;

top:值;

②display:table-cell;

③外边距：margin-left:值;

margin-top:值;

④margin:auto;（不兼容低版本的IE浏览器）

⑤弹性盒模型：display:flex;

justify-content:conter;

align-itens:center;

⑥用transform的属性translate平移，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。

使用top:50%; left:50%;时，是以盒子的左上角为原点定位，是左上角的原点居中，但是元素本身并不居中。

transform：translate(-50%，-50%):分别向左向上移动自身长宽的50%，使其位于中心。

transform: translate(-50%,-50%)导致的像素模糊问题解决办法：

  /** 这 0.5px加或者减都可以 */

transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px))；

⑦用calc计算

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

圣杯布局：

缺点：当面板的main部分比两边的子面板宽度小的时候，布局就会乱掉。

双飞翼布局:

与圣杯布局很像，也是全部往左浮动，但是在内容div里再嵌套一个div，设置子div的margin为左右div预留位置，左右div只设置margin负值即可实现。

 相似点：

1.给main设置width: 100%，占满窗口，从而自适应。

2.为了形成在一行三栏布局，给三个方块都加上浮动float: left;（注意清除浮动，因为浮动会导致父元素高度塌陷）

3.利用负margin-left把三个方块拉到一行，margin-left负多少就是往左移动多少，左边需要相对父元素的-100%，移到父元素的最左边，右边只需要移动本身宽度的负值，即可在最右边。

 区别：

1.双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。

2.圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。

3.双飞翼布局不用设置相对布局，以及对应的left和right值。

flex布局

思路：顺着主轴依次放3列，内容在最前，通过order控制显示顺序，通过flex-grow让中间占据全部剩余空间，通过flex-basis设置左、右div的宽度。

缺点：兼容性。

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

静态布局（Static Layout）

 即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

 对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。

自适应布局（Adaptive Layout）

自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。

你可以把自适应布局看作是静态布局的一个系列。

流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

响应式布局（Responsive Layout）

分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。

可以把响应式布局看作是流式布局和自适应布局设计理念的融合

弹性布局（rem/em布局）

包裹文字的各元素的尺寸采用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放；而页面的主要划分区域的尺寸仍使用百分数或px做单位。

css 中的 px 是css设置自己大小，元素长宽的单位

浏览器中em和px关系是 **16px** = **1em**

rem是根据根节点，也就是html默认字体大小来设置大小的。所以改变了html根节点字体大小，em的默认值也会改变。向上面html设置为12px，那么**1rem=12px**了

rem不是子节点继承父节点大小，而是所有的节点都继承html节点，所有当html节点设置成10px时候，所有整个页面1rem就等于10px了

1.静态布局：

布局特点：宽高固定

2.自适应布局：

布局特点：不同分辨率下，页面元素位置变化，大小不变

实现方法:针对不同分辨率创建对应的样式表，使用 @media 媒体查询给不同尺寸的设备切换不同的样式

缺点：IE8及以下不支持媒体查询；只能兼容主流分辨率

3.流式布局（百分比布局）:

布局特点：不同的分辨率下显示相同的排版；高度固定，宽度自适应

实现方法:网页中主要区域的尺寸使用百分比；

缺点：大屏幕上元素被拉长，但是文字，高度还是固定大小，不协调

经典流式布局：左侧固定，右侧自适应；两侧固定，中间自适应

4.弹性布局（rem/em布局）：

布局特点：页面元素宽度，高度，字体大小会跟着屏幕大小缩放

实现方法:使用js监听当前屏幕大小，设置html的字体大小

缺点：IE678不兼容；需要计算；

5.响应式布局：一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本

布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表等等）都能显示出令人满意的效果

实现方法：媒体查询(css3中的Media Query)+流式布局

媒介查询：通过不同的媒介类型和条件定义样式表规则，媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

优点：适应pc和移动端

1.面对不同分辨率设备灵活性强

2.能够快捷解决多设备显示适应问题

缺点：要匹配足够多的屏幕大小，工作量大，设计也需要多个版本

1.会出现隐藏无用的元素

2.加载时间加长

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

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

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

产生条件：不设置文档声明，页面就会陷入怪异盒模型解析模式

解决方法：加入文档声明

二、IE6下双边距BUG

产生条件：在IE6下，块元素有浮动有横向的margin，横向的margin值 会被放大成两倍浮动方向与margin方向一致时，该方向会出现双倍边距

解决方法：display:inline

三、图片间隙问题

产生条件：给父容器设置宽度后，图片会在原来基础上把父元素撑大3-5px

解决方法：1.给父元素添加font-size：0； 2.给图片添加display：block；

四、li的间距问题

产生条件：IE6浏览器 li标签设置宽高，且li里面的元素发生了浮动 解决方法：1. li不设置宽高；

               2. li内部的标签不进行浮动

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

产生条件：部分块状元素会有默认高度（一般为16px-18px之间） 解决方法： 1.给元素添加overflow:hidden; 2.font-size：0；

六、表单行高不一致

产生条件：一行中的文本输入框和按钮不在同一高度 解决办法：给表单元素添加float：left；并去掉默认边框border：0；

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

解决方法：1.设置img为display:block; 2.父级设置overflow:hidden;

八、左浮元素margin-bottom失效

解决方法：1.显示设置高度 2.父标签设置_padding-bottom代替子标签的margin-bottom 3.再放个标签让父标签浮动，子标签margin- bottom，即(margin-bottom与float不同时 作用于一个标签)

九、position下的left，bottom错位

解决方法：为父级(relative层)设置宽高或添加*zoom:1

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

解决方法：为父级设置position:relative

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

解决方法：将行元素置于块元素内的文字前

十二、透明rgba与opacity

产生条件：IE6不支持此两种透明的设置方法 解决方法：使用IE6当中的滤镜filter替代掉， 如：opacity:0.6;filter:alpha(opacity=60)异盒模型问题

16.清空数组的方法

1.splice

var ary = [1,2,3,4];

ary.splice(0,ary.length);

console.log(ary); // 输出 []，空数组，即被清空了

2.length赋值为0

var ary = [1,2,3,4];

ary.length = 0;

console.log(ary); // 输出 []，空数组，即被清空了

3.赋值为[]

var ary = [1,2,3,4];

ary = []; // 赋值为一个空数组以达到清空原数组