2021年前端面试题汇总（2023前端面试题集（含答案）之HTML+CSS篇（一））

在又到了金三银四的招聘季
    
    
   ，不管你是刚入行的小白     


     


     

，亦或是混迹职场的老鸟 




 




 




，还在为面试前端工程师时不知道面试官要问什么怎么回答而苦恼吗？为了帮助你获得面试官的青睐

   

   

  ，顺利通过面试     

     

     
，跳槽进入大厂  




  




  




，走上人生巅峰


  


  


 ，整理了一些前端面试     
     
     ，希望对在面试中或学习工作中的你有所帮助！

01    
    
    
、CSS3的新特性

盒子阴影：（box-shadow）；

边框：边框圆角 （border-radius） 


     


     


   、边框背景图片 （border-image）；

IE（怪异）盒模型：（box-sizing:border-box）；

背景：背景图片尺寸（background-size）

 




 




 

、规定背景图片的位置相对于什么位置来定位（background-origin）   

   

   

、背景的绘制区域（background-clip）；

弹性布局：flex；

渐变：线性渐变（linear-gradient）  

     

     

  、径向渐变（radial-gradient）；

过渡效果：transition；

2D转换：transform：移动translate(x   




   




   




，y)


  




  




  
、旋转rotate(x



 



 



，y)  


  


  


、翻转skew(x               ，y)   
     
     
 、缩放scale(x    




    




    



，y)；

3D转换：translate3d(tx














，ty              ，tz)



   




   




   、rotate3d(x, y, z, a) 



 



 



、scale3d(sx, sy, sz)              、perspective(l)等；

自定义动画：animation；

媒体查询：@media    
    
    
。

02




    




    




    、H5的新增特性

新增语义化标签：header













、nav               、article



     



     



    、section













、aside    
    
    
、footer；

新增数据存储方法：sessionStorage 


     


     


   、localStorage；

新增视频 video 标签和音频 audio 标签；

新增绘画canvas和svg元素；

新增input标签的type属性类型：date

 




 




 

、time   

   

   

、month  

     

     

  、email


  




  




  
、url  


  


  


、search   
     
     
 、range



   




   




   、color 



 



 



、number；

新增表单input元素验证：required              、pattern；

新增获取用户地理位置定位API：Geolocation 


     


     


   。

03




    




    




    、简述盒模型

盒模型分为两种：标准盒模型（W3C盒模型）和怪异盒模型（IE盒模型）

 




 




 

。

盒模型是依次由margin（外边距）+ border（边框）+ padding（内边距）+ content（内容）组成的   

   

   

。

标准盒模型的width指的是内容content的宽度     



     



     


，height指的是内容content的高度；怪异盒模型（IE盒模型）的width指的是content（内容） + padding（内边距）+ border（边框）的总宽度














，height也是同样  

     

     

  。

在IE浏览器的IE6













、IE7               、IE8版本中会触发怪异模式（IE盒模型）
    
    
   ，在其它浏览器中默认为W3C标准模式


  




  




  
。标准（W3C）盒模型的CSS属性为box-sizing: content-box     


     


     

，怪异（IE）盒模型的CSS属性为box-sizing: border-box  


  


  


。

04



     



     



    、link标签和import的区别

link 属于 html 标签 




 




 




，可以加载css文件

   

   

  ，还可以定义RSS













、rel连接属性等；而@import 是 css 提供的     

     

     
，是有导入样式的作用   
     
     
 。

页面被加载时  




  




  




，link 会同时被加载


  


  


 ，而@import 引用的 css 会等到页面加载结束后加载



   




   




   。

link 是 html 标签     
     
     ，因此没有兼容性   




   




   




，而@import 只有 IE5 以上才能识别 



 



 



。

link 方式样式的权重高于@import 的              。

link可以使用js动态创建并导入



 



 



，@import则不行




    




    




    。

05    
    
    
、水平垂直居中的实现方式

CSS中实现元素水平垂直居中的几种方法总结               ，总有一种适合你！

06 


     


     


   、CSS中的BFC

一文弄懂CSS中的BFC

07

 




 




 

、块元素和行元素区别

行内元素会在一行上显示    




    




    



，当此行上剩余的空间无法承载当前的行内元素时














，此行内元素才会在新的一行上显示              ，每个元素是水平排列的；每个块级元素各占据一行     



     



     


，每个元素时竖直方向排列的













。

块级元素可以包含行内元素和块级元素














，宽度默认100%
    
    
   ，即和浏览器同宽               。行内元素不能包含块级元素



     



     



    。

行内元素与块级元素属性的不同     


     


     

，主要是盒模型属性上













。

常见的块元素有div   

   

   

、p  

     

     

  、h1-h6


  




  




  
、form  


  


  


、ul   
     
     
 、ol



   




   




   、dl 



 



 



、dt              、dd




    




    




    、li













、table               、tr



     



     



    、td













、th    
    
    
、hr 


     


     


   、header

 




 




 

、section   

   

   

、article  

     

     

  、footer等    
    
    
。

常见的行元素以及行内块元素有span


  




  




  
、img  


  


  


、a   
     
     
 、label



   




   




   、input 



 



 



、em              、i




    




    




    、textarea













、select               、strong等 


     


     


   。

转为块元素：display: block;

转为行元素：display: inline;

转为行内块元素：display: inline-block

 




 




 

。

08



     



     



    、高度塌陷和清除浮动

高度塌陷：

标准的文档流 




 




 




，在不给父元素设置高度的情况下

   

   

  ，父元素的高度是由子元素撑开的     

     

     
，子元素多高  




  




  




，父元素就多高


  


  


 ，但当子元素设置浮动后     
     
     ，子元素会脱离标准文档流   




   




   




，从而导致不占位置



 



 



，父元素的高度就会变为 0               ，这种现象    




    




    



，叫做高度塌陷   

   

   

。

高度塌陷大部分都是由子元素脱标不占位置导致的父元素高度的丢失














，一般在子元素浮动后会产生高度塌陷  

     

     

  。所以              ，解决的办法可以使用清除浮动的方式来解决


  




  




  
。

清除浮动的方式：

浮动的元素会脱离标准文档流     



     



     


，脱离标准文档流的元素在文档流中不占位置  


  


  


。

给浮动元素的父元素设置高度；

给父元素设置overflow: hidden属性；

在父元素内部的最后面添加一个块级元素的空标签














，并给这个空标签设置clear: both；

单伪元素: .clearfix::after { content: ; clear: both; display: block; height: 0; visibility: hidden; zoom: 1; }

双伪元素(推荐使用)：

.clearfix::before, .clearfix::after { content: ; clear: both; display: block; height: 0; visibility: hidden; zoom: 1; }

09













、position的属性及作用

position 几个属性一般都要配合"left"    
    
    
、“top
    
    
   ” 


     


     


   、"right"以及 “bottom     


     


     

” 属性使用   
     
     
 。

相对定位relative：如果对一个元素进行相对定位
    
    
   ，它将出现在它所在的位置上



   




   




   。然后     


     


     

，可以通过设置垂直或水平位置 




 




 




，让这个元素“相对于 




 




 




”它的起点进行移动 



 



 



。在使用相对定位时

   

   

  ，无论是否进行移动     

     

     
，元素仍然占据原来的空间              。因此  




  




  




，移动元素会导致它覆盖其它元素




    




    




    。

绝对定位absolute：绝对定位的元素的位置相对于最近的已定位父元素


  


  


 ，如果元素没有已定位的父元素     
     
     ，那么它的位置相对于













。absolute 定位使元素的位置与文档流无关   




   




   




，因此不占据空间               。absolute 定位的元素和其他元素重叠



     



     



    。

固定定位fixed：元素的位置相对于浏览器窗口是固定位置



 



 



，即使窗口是滚动的它也不会移动













。Fixed 定位使元素的位置与文档流无关               ，因此不占据空间    
    
    
。Fixed 定位的元素和其他元素重叠 


     


     


   。

粘性定位sticky：元素先按照普通文档流定位    




    




    



，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位

 




 




 

。而后














，元素定位表现为在跨越特定阈值前为相对定位              ，之后为固定定位   

   

   

。

默认定位static：默认值  

     

     

  。没有定位     



     



     


，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）


  




  




  
。

inherit：规定应该从父元素继承 position 属性的值  


  


  


。

10

 




 




 

、实现元素隐藏的方法

设置透明度为0：opacity: 0；

元素显示设为无：display: none（在网页中不占位置）；

隐藏元素：visibility: hidden（网页中依然占据位置）；

让元素缩小到0：transform: scale(0)；

设置元素的层级：z-index: 9999














，元素需要设置position: absolute   
     
     
 。

11   

   

   

、css reset的作用

重置浏览器的css默认属性
    
    
   ，因为各个品牌浏览器的默认样式不用     


     


     

，使用css reset重置 




 




 




，使在各个浏览器上样式统一



   




   




   。

12  

     

     

  、css sprites(css精灵)的作用

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中

   

   

  ，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去     

     

     
，这样一来  




  




  




，当访问该页面时


  


  


 ，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了     
     
     ，减轻服务器对图片的请求数量 



 



 



。原理就是利用CSS的background-image


  




  




  
、background- repeat  


  


  


、background-position的组合进行背景定位   




   




   




，background-position可以用数字精确的定位出背景图片的位置              。

13   
     
     
 、css有哪些选择器



 



 



，优先级如何

主要的选择器有：id



   




   




   、class 



 



 



、标签              、伪元素




    




    




    、伪类













、属性选择               、通配符



     



     



    、继承等




    




    




    。

同一元素引用了多个样式时               ，排在后面的样式属性的优先级高；

样式选择器的类型不同时    




    




    



，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；

标签之间存在层级包含关系时














，后代元素会继承祖先元素的样式













。如果后代元素定义了与祖先元素相同的样式              ，则祖先元素的相同的样式属性会被覆盖               。继承的样式的优先级比较低     



     



     


，至少比标签选择器的优先级低；

带有!important 标记的样式属性的优先级最高；

样式表的来源不同时














，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户

自定义样式 > 浏览器默认样式



     



     



    。

优先级：！important > 行内样式 > id > class > 标签/伪类/属性选择 > 伪元素 > 继承 >通配符

14













、transition和animation的区别

transition 是过渡效果
    
    
   ，只有两个状态：起始状态和结束状态     


     


     

，主要强调样式值的变化过程 




 




 




，不可设置中间状态；需要某个事件的触发（例如：鼠标经过    
    
    
、点击等）













。

animation 是动画

   

   

  ，也叫关键帧     

     

     
，可以设置多个关键帧；可以再任意一个中间帧设置状态；不需要依附事件的触发就可以自动执行    
    
    
。

15 


     


     


   、css去掉iPhone的默认按钮样式

input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; } textarea { -webkit-appearance: none; }

16

 




 




 

、Doctype的作用

DOCTYPE标签是一种标准通用标记语言的文档类型声明  




  




  




，它的目的是要告诉标准通用标记语言解析器


  


  


 ，它应该使用什么样的文档类型定义（DTD）来解析文档 


     


     


   。只有确定了一个正确的文档类型     
     
     ，超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效   




   




   




，甚至对JavaScript脚本都会有所影响

 




 




 

。

标签完整格式为<!DOCTYPE>   

   

   

。

17   

   

   

、严格模式和混杂模式的区别

标准模式是指浏览器按照W3C的标准对文档进行解析和渲染；怪异模式浏览器按照旧有的  

     

     

  、非标准的实现方式对文档进行解析和渲染  

     

     

  。浏览器解析时到底使用标准模式还是怪异模式



 



 



，与你网页中的文档类型定义（DTD）声明直接相关               ，文档类型定义（DTD）声明定义了标准文档的类型（标准模式解析）文档类型    




    




    



，会使浏览器使用相应的方式加载网页并显示














，忽略文档类型定义（DTD）声明,将使网页进入怪异模式


  




  




  
。

为什么会产生这两种模式呢?

现代的浏览一般都有两种渲染模式：标准模式（Standard Mode）和怪异模式（Quirks Mode）  


  


  


。在标准模式下              ，浏览器按照HTML和CSS标准对文档进行解析和渲染；而在怪异模式下浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染     



     



     


，对于旧有的网页














，浏览器就会启动怪异模式能够使得旧网页正常显示   
     
     
 。

触发严格模式:

<!-- HTML 4.01 严格型 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- XHTML 1.0 严格型 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

触发混杂模式

<!-- HTML 4.01 过渡型 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- HTML 4.01 框架集型 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!-- XHTML 1.0 过渡型 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- XHTML 1.0 框架集型 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

18


  




  




  
、双边距重叠问题(外边距折叠)

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 marigin 会重叠



   




   




   。

折叠的结果为：

两个相邻的外边距都是正数时
    
    
   ，折叠结果是它们两者之间较大的值 



 



 



。

两个相邻的外边距都是负数时     


     


     

，折叠结果是两者绝对值的较大值              。

两个外边距一正一负时 




 




 




，折叠结果是两者的相加的和




    




    




    。

19  


  


  


、清除元素模式转化为行内块后出现的缝隙

元素的模式转换为行内块后

   

   

  ，行内块元素之间会产生缝隙     

     

     
，往往是因为代码换行导致的













。

给父元素设置 font-size:0;给行内块元素重新设置 font-size 大小（推荐）；

给行内块元素设置左外边距或右外边距  




  




  




，并将值设置为负值；

使用 display:table;和 display:table-cell;属性代替 display:inline-block;

在父元素上设置 display:flex;属性（推荐）；

手动删除行内块之间的换行               。

20   
     
     
 、rgba()和opacity的透明效果区别

rgba()和 opacity 都能实现透明效果


  


  


 ，但最大的不同是 opacity 作用于元素     
     
     ，以及元素内的所有内容的透明度；rgba() 只作用于元素的颜色或其背景色



     



     



    。（设置 rgba 透明的元素的子元素不会继承透明效果！）

总结

感谢您的阅读！本篇文章就先总结到这里   




   




   




，近期会一直更新web前端的面试



 



 



，包括html+css



   




   




   、js 



 



 



、es6              、vue等专题内容               ，希望这些前端知识对您面试或者工作学习中有所帮助提升













。想要阅读更多文章    




    




    



，您可以移步到wxgzh【前端胡说】的菜单栏【优质文章】中观看阅读    
    
    
。

原文链接：2023前端面试题集（含答案）之HTML+CSS篇（一）