各大互联网公司2014前端笔试面试题–HTML,CSS篇

时间 2019-11-29

标签互联网公司前端笔试面试 html css 栏目快乐工作繁體版

原文原文链接

Html篇：

1.你作的页面在哪些流览器测试过？这些浏览器的内核分别是什么?php

IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:之前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

2.每一个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？css

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

3.Quirks模式是什么？它和Standards模式有什么区别前端

答案：css3

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。git

在IE6以前CSS还不够成熟，因此IE5等以前的浏览器对CSS的支持不好， IE6将对CSS提供更好的支持，然而这时的问题就来了，由于有不少页面是基于旧的布局方式写的，而若是IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？github

在写程序时咱们也会常常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤为是新功能不兼容旧功能时。遇到这种问题时的一个常见作法是增长参数和分支，即当某个参数为真时，咱们就使用新功能，而若是这个参数不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是相似这样作的，它将DTD当成了这个“参数”，由于之前的页面你们都不会去写DTD，因此IE6就假定若是写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而若是没有，则采用兼容以前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。web

区别：面试

整体会有布局、样式解析和脚本执行三个方面的区别。chrome

盒模型：在W3C标准中，若是设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，若是父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下却会失效。

（还有不少，答出什么不重要，关键是看他答出的这些是否是本身经验遇到的，仍是说都是看文章看的，甚至彻底不知道。）

4.div+css的布局较table布局有什么优势？

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

5.a：img的alt与title有何异同？b：strong与em的异同？

答案：

alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。

strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

6.你能描述一下渐进加强和优雅降级之间的不一样吗?

渐进加强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减小用户体验的供给，而渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要。降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过期”或有功能缺失的浏览器下的测试工做安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你能够作一些小的调整来适应某个特定的浏览器。但因为它们并不是咱们所关注的焦点，所以除了修复较大的错误以外，其它的差别将被直接忽略。

“渐进加强”观点

“渐进加强”观点则认为应关注于内容自己。

内容是咱们创建网站的诱因。有的网站展现它，有的则收集它，有的寻求，有的操做，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进加强”成为一种更为合理的设计范例。这也是它当即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的缘由所在。

那么问题了。如今产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了不少圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？

　　（自由发挥）

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

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的链接数，优化页面响应速度
防止没必要要的安全问题

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

（无标准答案）网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，下降开发难度，开发成本，SEO也会更好作，也不会由于滥用代码致使各类BUG、安全问题，最终提升网站易用性。

9.请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

web storage和cookie的区别

Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。
除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。可是Cookie也是不能够或缺的：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

10.简述一下src与href的区别。

答案：

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

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

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

href是Hypertext Reference的缩写，指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，若是咱们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源而且不会中止对当前文档的处理。这也是为何建议使用link方式来加载css，而不是使用@import方式。

11.知道的网页制做会用到的图片格式有哪些？

答案：

png-8，png-24，jpeg，gif，svg。

可是上面的那些都不是面试官想要的最后答案。面试官但愿听到是Webp,Apng。（是否有关注新技术，新鲜事物）

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

在质量相同的状况下，WebP格式图像的体积要比JPEG格式图像小40%。

Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，能够实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前获得 iOS safari 8的支持，有望代替GIF成为下一代动态图标准。

12.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

答案：

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

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

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

答案：dns缓存，cdn缓存，浏览器缓存，服务器缓存。

14.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域能够添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，若是前者小于后者，优先加载。
若是为幻灯片、相册等，可使用图片预加载技术，将当前展现图片的前一张和后一张优先下载。
若是图片为css图片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
若是图片过大，可使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提升用户体验。
若是图片展现区域小于图片的真实大小，则因在服务器端根据业务须要先行进行图片压缩，图片压缩后大小与展现一致。

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

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

html自己是没有表现的，咱们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起做用，因此去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优势，可是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，能够说浏览器的默认样式和语义化的HTML结构是不可分割的。

屏幕阅读器（若是访客有视障）会彻底根据你的标记来“读”你的网页.

例如,若是你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.

PDA、手机等设备可能没法像普通电脑的浏览器同样来渲染网页（一般是由于这些设备对CSS的支持较弱）

使用语义标记能够确保这些设备以一种有意义的方式来渲染网页.理想状况下,观看设备的任务是符合设备自己的条件来渲染网页.

语义标记为设备提供了所需的相关信息,就省去了你本身去考虑全部可能的显示状况（包括现有的或者未来新的设备）.例如,一部手机能够选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.不管哪一种方式一旦你对文本标记为标题,您就能够确信读取设备将根据其自身的条件来合适地显示页面.

搜索引擎的爬虫也依赖于标记来肯定上下文和各个关键字的权重

过去你可能尚未考虑搜索引擎的爬虫也是网站的“访客”,但如今它们他们其实是极其宝贵的用户.没有他们的话,搜索引擎将没法索引你的网站,而后通常用户将很难过来访问.

你的页面是否对爬虫容易理解很是重要,由于爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

所以,若是页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提高易用性外,语义标记有利于正确使用CSS和JavaScript,由于其自己提供了许多“钩钩”来应用页面的样式与行为.
SEO主要仍是靠你网站的内容和外部连接的。

便于团队开发和维护

W3C给咱们定了一个很好的标准，在团队中你们都遵循这个标准，能够减小不少差别化的东西，方便开发和维护，提升开发效率，甚至实现模块化开发。

16.谈谈之前端角度出发作好SEO须要考虑什么？

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

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

Meta标签优化

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

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

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

了解主要的搜索引擎

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

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

按点击付费的搜索引擎

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

搜索引擎登陆

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

连接交换和连接普遍度（Link Popularity）

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

合理的标签使用

Css篇：

1.有哪项方式能够对一个DOM设置它的CSS样式？　

外部样式表，引入一个外部css文件
内部样式表，将css代码放在 <head> 标签内部
内联样式，将css样式直接定义在 HTML 元素内部

2.CSS都有哪些选择器？

派生选择器（用HTML标签申明）
id选择器（用DOM的ID申明）
类选择器（用一个样式类名申明）
属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不经常使用，不知道就算了）

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

后代选择器（利用空格间隔，好比div .a{ }）
群组选择器（利用逗号间隔，好比p,div,#a{ }）

那么问题来了，CSS选择器的优先级是怎么样定义的？

基本原则：

通常而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

复杂的计算方法：

用1表示派生选择器的优先级
用10表示类选择器的优先级
用100标示ID选择器的优先级
- div.test1 .span var 优先级 1+10 +10 +1
- span#xxx .songs li 优先级1+100 + 10 + 1
- #xxx li 优先级 100 +1

那么问题来了，看下列代码，<p>标签内的文字是什么颜色的？。

 1 <style> 2 .classA{ color:blue;} 3 4 .classB{ color:red;} 5 </style> 6 7 <body> 8 9 <p class='classB classA'> 123 </p> 10 11 </body>

答案：red。与样式定义在文件中的前后顺序有关，便是后面的覆盖前面的，与在<p class=’classB classA’>中的前后关系无关。

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

最基本的：

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

技巧性：

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

4.超连接访问事后hover样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超连接样式不在具备hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

5.什么是Css Hack？ie6,7,8的hack分别是什么？

答案：针对不一样的浏览器写不一样的CSS code的过程，就是CSS hack。

示例以下：

 1  #test { 2 width:300px; 3 height:300px; 4 5 background-color:blue; /*firefox*/ 6 background-color:red\9; /*all ie*/ 7 background-color:yellow\0; /*ie8*/ 8 +background-color:pink; /*ie7*/ 9 _background-color:orange; /*ie6*/ } 10 :root #test { background-color:purple\9; } /*ie9*/ 11 @media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/ 12 @media screen and (-webkit-min-device-pixel-ratio:0){ #test {} } /*chrome and safari*/

6.请用Css写一个简单的幻灯片效果页面

答案：知道是要用css3。使用animation动画实现一个简单的幻灯片效果。

 1         /**HTML**/ 2 div.ani 3 4 /**css**/ 5 .ani{ 6 width:480px; 7 height:320px; 8 margin:50px auto; 9 overflow: hidden; 10 box-shadow:0 0 5px rgba(0,0,0,1); 11 background-size: cover; 12 background-position: center; 13 -webkit-animation-name: "loops"; 14 -webkit-animation-duration: 20s; 15 -webkit-animation-iteration-count: infinite; 16 } 17 @-webkit-keyframes "loops" { 18 0% { 19 background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat; 20 } 21 25% { 22 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat; 23 } 24 50% { 25 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat; 26 } 27 75% { 28 background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat; 29 } 30 100% { 31 background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat; 32 } 33 }

7.行内元素和块级元素的具体区别是什么？行内元素的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>。

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

答案：

外边距重叠就是margin-collapse。

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

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们二者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是二者绝对值的较大值。
两个外边距一正一负时，折叠结果是二者的相加的和。

9.rgba()和opacity的透明效果有什么不一样？

答案：

rgba()和opacity都能实现透明效果，但最大的不一样是opacity做用于元素，以及元素内的全部内容的透明度，

而rgba()只做用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

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

答案：

垂直方向：line-height

水平方向：letter-spacing

那么问题来了，关于letter-spacing的妙用知道有哪些么？

答案:能够用于消除inline-block元素间的换行符空格间隙问题。

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

 1 // 方法一：已知元素的高宽 2 3 #div1{ 4 background-color:#6699FF; 5 width:200px; 6 height:200px; 7 8 position: absolute; //父元素须要相对定位 9 top: 50%; 10 left: 50%; 11 margin-top:-100px ; //二分之一的height，width 12 margin-left: -100px; 13 } 14 15 //方法二:未知元素的高宽 16 17 #div1{ 18 width: 200px; 19 height: 200px; 20 background-color: #6699FF; 21 22 margin:auto; 23 position: absolute; //父元素须要相对定位 24 left: 0; 25 top: 0; 26 right: 0; 27 bottom: 0; 28 }

那么问题来了，如何垂直居中一个<img>?（用更简便的方法。）

1 #container //<img>的容器设置以下 2 { 3 display:table-cell; 4 text-align:center; 5 vertical-align:middle; 6 }

12.px和em的区别。

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

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

13.描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不一样之处？

重置样式很是多，凡是一个前端开发人员确定有一个经常使用的重置CSS文件并知道如何使用它们。他们是盲目的在作仍是知道为何这么作呢？缘由是不一样的浏览器对一些元素有不一样的默认样式，若是你不处理，在不一样的浏览器下会存在必要的风险，或者更有戏剧性的性发生。

你可能会用Normalize来代替你的重置样式文件。它没有重置全部的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其余的东西（如粗体的标题）。

在这一方面，没法作每个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

14.Sass、LESS是什么？你们为何要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既能够在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

为何要使用它们？

结构清晰，便于扩展。
能够方便地屏蔽浏览器私有语法差别。这个不用多说，封装对浏览器语法差别的重复处理，减小无心义的机械劳动。
能够轻松实现多重继承。
彻底兼容 CSS 代码，能够方便地应用到老项目中。LESS 只是在 CSS 语法上作了扩展，因此老的 CSS 代码也能够与 LESS 代码一同编译。

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

display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素而且挤占该元素原来的空间。

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

16.知道css有个content属性吗？有什么做用？有什么应用？

答案：

知道。css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。

最多见的应用是利用伪类清除浮动。

 1 //一种常见利用伪类清除浮动的代码 2 .clearfix:after { 3 content:"."; //这里利用到了content属性 4 display:block; 5 height:0; 6 visibility:hidden; 7 clear:both; } 8 9 .clearfix { 10 *zoom:1; 11 }

after伪元素经过 content 在元素的后面生成了内容为一个点的块级元素，再利用clear:both清除浮动。

那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何经过css content属性实现css计数器？

答案：css计数器是经过设置counter-reset 、counter-increment 两个属性、及 counter()/counters()一个方法配合after / before 伪类实现。