【前端领域高频笔试面试】—— HTML+CSS相关

目录

1.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

2.如何垂直居中一个浮动元素？

3.px和em的区别

4.描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？

5.Sass、LESS是什么？大家为什么要使用他们？

6.display:none与visibility:hidden的区别是什么？

7.CSS中link和@import的区别

8. 简述盒子模型

9. 为什么要初始化样式？

10.BFC是什么?

11.五大浏览器以及它们的内核

12.每个HTML文件里开头都有一个语句Doctype，这是干什么的？

13.div+css的布局较table布局有什么优点？

14.img的alt与title有何异同？ strong与em的异同？

15.为什么利用多个域名来存储网站资源会更有效？

16.谈一下你对网页标准和标准制定机构重要性的理解

17.简述一下src与href的区别

18.网页制作会用到的图片格式有哪些？

19.什么是微格式？在前端构建中应该考虑微格式吗？

20.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

21.一个页面上有大量的图片(如大型电商网站)导致加载很慢，有哪些方法优化这些图片的加载，给用户更好的体验？

22.如何理解HTML结构的语义化？

23.以前端角度出发做好SEO需要考虑什么？

24.有哪项方式可以对一个DOM设置它的CSS样式？

25.CSS都有哪些选择器？

26.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

27.超链接访问过后hover样式就不出现的问题是什么？如何解决？

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

29.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

30.rgba()和opacity的透明效果有什么不同？

31.html语义化是什么？

32.Doctype的作用？严格模式与混杂模式的区别？

33.HTML与XHTML二者有什么区别？

34.html常见兼容性问题

35.对WEB标准以及W3C的理解与认识

36.行内元素有哪些?块级元素有哪些?CSS的盒模型包括什么?

37.css优先级算法如何计算？

38.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

39.display属性有哪些？可以做什么？

40哪些css属性可以继承？

1.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height；

水平方向：letter-spacing；

补充：letter-spacing，可以用于消除inline-block元素间的换行符空格间隙问题。

2.如何垂直居中一个浮动元素？

  

   

    

     

    
    

     

      /*方法一：已知元素的高宽*/
     
    
   

    

     

    
    

     

      #div1{
     
    
   

    

     

    
    

     
    background-color:#6699FF;
     
    
   

    

     

    
    

     
    width:200px;
     
    
   

    

     

    
    

     
    height:200px;
     
    
   

    

     

    
    

     
    position: absolute;  /*父元素需要相对定位*/
     
    
   

    

     

    
    

     
    top: 50%;
     
    
   

    

     

    
    

     
    left: 50%;
     
    
   

    

     

    
    

     
    margin-top:-100px ;  /*二分之一的height，width*/
     
    
   

    

     

    
    

     
    margin-left: -100px;
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      /*方法二:未知元素的高宽*/
     
    
   

    

     

    
    

     
  #div1{
     
    
   

    

     

    
    

     
    width: 200px;
     
    
   

    

     

    
    

     
    height: 200px; /*宽高可随意设置*/
     
    
   

    

     

    
    

     
    background-color: #6699FF;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    margin:auto;
     
    
   

    

     

    
    

     
    position: absolute;  /*父元素需要相对定位*/
     
    
   

    

     

    
    

     
    left: 0;
     
    
   

    

     

    
    

     
    top: 0;
     
    
   

    

     

    
    

     
    right: 0;
     
    
   

    

     

    
    

     
    bottom: 0;
     
    
   

    

     

    
    

     

        }
     
    
  
 

  
 
 

3.px和em的区别

        px和em都是长度单位，区别是在于px的值是固定的，指定是多少就是多少，计算比较容易；em值不是固定的，并且em会继承父级元素的字体大小。

        浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。所以12px=0.75em, 10px=0.625em。

4.描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？

        重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。原因是不同的浏览器对一些元素有不同的默认样式，如果不处理，在不同的浏览器下会存在必要的风险。
        除此之外可能会用Normalize来代替重置样式文件，它没有重置所有的样式风格，仅提供了一套合理的默认样式值，既能让众多浏览器达到一致和合理，但又不扰乱其他的东西。

5.Sass、LESS是什么？大家为什么要使用他们？

        CSS预处理器。是CSS上的一种抽象层，是一种特殊的语法/语言编译成CSS。例如Less是一种动态样式语言，将CSS赋予了动态语言的特性，如变量，继承，运算， 函数；LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

为什么要使用它们？

（1）结构清晰，便于扩展；

（2）可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动；

（3）可以轻松实现多重继承；

（4）完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

6.display:none与visibility:hidden的区别是什么？

        display：隐藏对应的元素并且挤占该元素原来的空间；

        visibility：隐藏对应的元素但是不挤占该元素原来的空间；

        使用display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”；而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

7.CSS中link和@import的区别

（1）Link属于html标签，而@import是CSS中提供的；

（2）在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载；

（3）@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题；

（4）Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）。

8. 简述盒子模型

        CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型模型；盒模型包括内容、内边距、外边距（一般不计入盒子实际宽度）、边框。

9. 为什么要初始化样式？

        由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异，但初始化CSS会对搜索引擎优化造成较小影响。

10.BFC是什么?

        BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向会发生margin重叠的问题。

        BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用。

11.五大浏览器以及它们的内核

12.每个HTML文件里开头都有一个语句Doctype，这是干什么的？

        <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点是告诉浏览器按照何种规范解析页面）

13.div+css的布局较table布局有什么优点？

（1）改版的时候更方便，只需要改css文件；
（2）页面加载速度更快、结构化清晰、页面显示简洁；
（3）表现与结构相分离；
（4）易于优化（seo）搜索引擎更友好，排名更容易靠前。

14.img的alt与title有何异同？ strong与em的异同？

        alt(alt text)：是不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字，替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)

        title(tool tip)：该属性为设置该属性的元素提供建议性的信息；

        strong：粗体强调标签，强调，表示内容的重要性；

        em：斜体强调标签，更强烈强调，表示内容的强调点。

15.为什么利用多个域名来存储网站资源会更有效？

（1）CDN缓存更方便；
（2）突破浏览器并发限制；
（3）节约cookie带宽；
（4）节约主域名的连接数，优化页面响应速度；
（5）防止不必要的安全问题。

16.谈一下你对网页标准和标准制定机构重要性的理解

        网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

17.简述一下src与href的区别

        src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

        src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。<script src =”js.js”></script>

        当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内，这也是为什么将js脚本放在底部而不是头部。

        href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href=”common.css” rel=”stylesheet”/>，那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

18.网页制作会用到的图片格式有哪些？

        png、png、jpeg、gif、svg

        Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。

19.什么是微格式？在前端构建中应该考虑微格式吗？

        微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

        它的优点是将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

20.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns缓存；

cdn缓存；

浏览器缓存；

服务器缓存。

21.一个页面上有大量的图片(如大型电商网站)导致加载很慢，有哪些方法优化这些图片的加载，给用户更好的体验？

        图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置到浏览器顶端的距离和到页面低端的距离，如果前者小于后者，优先加载。

        如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

        如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

        如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

        如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

22.如何理解HTML结构的语义化？

        去掉或样式丢失的时候还能让页面呈现清晰的结构：

        html本身是没有表现的，例如我们看到<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，但这并不是html的表现，而是html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

23.以前端角度出发做好SEO需要考虑什么？

        SearchEngineOptimization（SEO），汉译为搜索引擎优化。是指遵循搜索引擎的规则对网站内容进行优化，提升网站在搜索引擎内关键词搜索结果的自然排名，将自己品牌和产品的排名前移。

（1）了解搜索引擎如何抓取网页和如何索引网页

        需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

（2）Meta标签优化

        主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

（3）如何选取关键词并在网页中放置关键词

        搜索就得用关键词，关键词分析和选择是SEO最重要的工作之一，首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

（4）了解主要的搜索引擎

        虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

（5）主要的互联网目录

        Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

（6）按点击付费的搜索引擎

        搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

（7）搜索引擎登录

        网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

（8）链接交换和链接广泛度（Link Popularity）

        网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

（9）合理的标签使用

24.有哪项方式可以对一个DOM设置它的CSS样式？

外部样式表，引入一个外部css文件；

内部样式表，将css代码放在 <head> 标签内部；

内联样式，将css样式直接定义在 HTML 元素内部。

25.CSS都有哪些选择器？

派生选择器（用HTML标签申明）标签选择器；

id选择器（用DOM的ID申明）

类选择器（用一个样式类名申明）

属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

除了前3种基本选择器，还有一些扩展选择器，包括

后代选择器（利用空格间隔，比如div .a{  }）

子代选择器：（div > p选择div下的第一个子元素p标签）

群组选择器（利用逗号间隔，比如p,div,#a{  }）

一般而言，选择器越特殊，选择器指向的越准确，它的优先级就越高。

        用1表示派生选择器的优先级
        用10表示类选择器的优先级
        用100标示ID选择器的优先级

26.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

（1）基本方法

        设置display属性为none，或者设置visibility属性为hidden。

（2）技巧写法

        设置宽高为0，设置透明度为0，设置z-index位置在-1000em。

27.超链接访问过后hover样式就不出现的问题是什么？如何解决？

        被点击访问过的超链接样式就不再具有hover和active了，解决方法是改变CSS属性的排列顺序：L-V-H-A（link,visited,hover,active）。

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

        外边距重叠就是margin-collapse，

        在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

        折叠结果遵循下列计算规则：
        两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
        两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
        两个外边距一正一负时，折叠结果是两者的相加的和。

29.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)特性：

        总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；

内联元素(inline)特性：

        和相邻的内联元素在同一行；宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小，内容区域的大小是由内容撑开的。

浏览器还有哪些默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行）？

        <input> 、<img> 、<button> 、<texterea> 、<label>

30.rgba()和opacity的透明效果有什么不同？

        rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度；而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)！

31.html语义化是什么？

        当页面样式加载失败的时候能够让页面呈现出清晰的结构，有利于seo优化、利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别），便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。

32.Doctype的作用？严格模式与混杂模式的区别？

        <!DOCTYPE>用于告知浏览器该以何种模式来渲染文档；

        严格模式下页面排版及JS解析是以该浏览器支持的最高标准来执行；混杂模式不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容。

33.HTML与XHTML二者有什么区别？

（1）所有的标记都必须要有一个相应的结束标记；
（2）所有标签的元素和属性的名字都必须使用小写；
（3）所有的 XML 标记都必须合理嵌套；
（4）所有的属性必须用引号 "" 括起来；
（5）把所有 < 和 & 特殊符号用编码表示；
（6）给所有属性赋一个值；
（7）不要在注释内容中使用 "--"；
（8）图片必须有说明文字。

34.html常见兼容性问题

（1）双边距BUG float引起的；使用display
（2）像素问题使用float引起的；使用dislpay:inline -3px  
（3）超链接hover 点击后失效  使用正确的书写顺序 link visited hover active
（4）z-index问题；给父级添加position:relative
（5）Png透明；使用js代码修改
（6）Min-height 最小高度；！Important 解决
（7）select 在ie6下遮盖；使用iframe嵌套
（8）为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
（9）IE5-8不支持opacity，解决办法：

   

    

     

      

     
     

      

       .opacity {
      
     
    

     

      

     
     

      

         opacity: 0.4
      
     
    

     

      

     
     

      

         filter: alpha(opacity=60); /* for IE5-7 */
      
     
    

     

      

     
     

      

         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
      
     
    

     

      

     
     

      

       }
      
     
   
  

（10）IE6不支持PNG透明背景；在IE6下使用gif图片。

35.对WEB标准以及W3C的理解与认识

        标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外联 css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

36.行内元素有哪些?块级元素有哪些?CSS的盒模型包括什么?

块级元素：div、p、h1、h2、h3、h4、form、ul；

行内元素：a、b、br、i、span、input、select；

Css盒模型：内容、border、margin、padding。

37.css优先级算法如何计算？

        !important >  id > class > 标签

        !important 比内联优先级高；优先级就近原则，样式定义最近者为准；以最后载入的样式为准。

38.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

（1）block，像块类型元素一样显示

        none 缺省值，向行内元素类型一样显示，彻底的隐藏元素包括位置也不在占据；
        inline-block 像行内元素一样显示，但其内容象块类型元素一样显示；
        list-item 像块类型元素一样显示，并添加样式列表标记。

（2）position的值

        absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；
        fixed （老IE不支持），生成绝对定位的元素，相对于浏览器窗口进行定位；
        relative，生成相对定位的元素，相对于其正常位置进行定位； 
        static，默认值，没有定位，元素出现在正常的流中；
        inherit，规定从父元素继承 position 属性的值。

39.display属性有哪些？可以做什么？

display:block行内元素转换为块级元素；

display:inline块级元素转换为行内元素；

display:inline-block转为内联元素。

40哪些css属性可以继承？

        可继承： font-size、font-family、color、ul、li、dl、dd、dt；

        不可继承 ：border、padding、margin、width、height、盒模型的属性；宽度默认是占据一整行。

文章来源: majinjian.blog.csdn.net，作者：Developer 小马，版权归原作者所有，如需转载，请联系作者。

原文链接：majinjian.blog.csdn.net/article/details/120824337