Front-end interview questions (HTML/CSS) from major Internet companies

　Html version:

　1. In which browsers have the pages you created been tested? What are the cores of these browsers?

• IE: trident kernel
• Firefox: gecko kernel
• Safari: webkit kernel
• Opera: It used to be the presto kernel, but Opera has now switched to Google Chrome’s Blink kernel
• Chrome: Blink (based on webkit, jointly developed by Google and Opera Software)

　

　2. There is a very important thing at the beginning of every HTML file, Doctype. Do you know what this is for?

　Answer: The declaration is located at the very front in the document, before the tag. This tag tells the browser which HTML or XHTML specification the document uses. (Key point: tell the browser according to which specification to parse the page)

　3.What is Quirks mode? What is the difference between it and Standards mode

Answer:

Starting from IE6, Standards mode has been introduced. In standards mode, the browser attempts to process documents that conform to standards as correctly as in the specified browser.

　 CSS was not mature enough before IE6, so browsers before IE5 and other browsers had poor support for CSS. IE6 will provide better support for CSS. However, the problem arises at this time because many pages are based on the old Written in layout mode, and if IE6 supports CSS, these pages will display abnormally. How to ensure that the existing pages are not destroyed and provide a new rendering mechanism?

　 When writing programs, we often encounter such problems, how to ensure that the original interface remains unchanged and provide more powerful functions, especially when the new functions are not compatible with the old functions. A common approach when encountering this kind of problem is to add parameters and branches, that is, when a certain parameter is true, we use the new function, and if the parameter is not true, we use the old function, so that it does not destroy The original program provides new functions. IE6 does something similar. It treats DTD as this "parameter" because no one would write DTD on previous pages, so IE6 assumes that if DTD is written, it means that this page will use better support for CSS. layout, and if not, the previous layout will be compatible. This is Quirks mode (quirks mode, weird mode, weird mode).

Difference:

There will be overall differences in three aspects: layout, style analysis and script execution.

　Box model: In the W3C standard, if you set the width and height of an element, it refers to the width and height of the element's content. In Quirks mode, IE's width and height also include padding and border.

Set the height and width of inline elements: In Standards mode, setting wdith and height for inline elements such as will not take effect, but in quirks mode, it will take effect.

Set the height of percentage: In standards mode, the height of an element is determined by the content it contains. If the parent element does not set the height of percentage, it is invalid for the child element to set a height of percentage. Use margin:0 auto to set it. Horizontally centered: Using margin:0 auto can center the element horizontally in standards mode, but it will fail in quirks mode.

　　(There are many more. It doesn’t matter what he answers. The key is to see whether the answers he answered came from his own experience, or whether he just read them from articles, or even didn’t know them at all.)

　4. What are the advantages of div+css layout over table layout?

• It is more convenient when revising the version. You only need to change the css file.
• Page loading speed is faster, the structure is clear, and the page display is simple.
• Separation of performance and structure.
• Easy to optimize (seo) search engines are more friendly and it is easier to rank higher.

　5.a: What are the similarities and differences between img’s alt and title? b: What are the similarities and differences between strong and em?

Answer:

　a:

• alt (alt text): For user agents (UA) that cannot display images, forms, or applets, the alt attribute is used to specify replacement text. The language of the replacement text is specified by the lang attribute. (In IE browser, alt will be displayed as tool tip when there is no title)
• title(tool tip): This attribute provides suggested information for the element on which this attribute is set.

　b:

• strong: Bold emphasis tags, emphasis, indicating the importance of the content
• em: Italic emphasis tags are more strongly emphasized and indicate the emphasis of the content

　

　6. Can you describe the difference between progressive enhancement and graceful degradation?

• Progressive enhancement: Build pages for low-version browsers to ensure the most basic functions, and then improve effects, interactions, and add additional functions for advanced browsers to achieve a better user experience.
• Graceful degradation: Build complete functionality from the beginning, and then make it compatible with lower version browsers.

　 Difference: Graceful degradation starts from a complex status quo and tries to reduce the supply of user experience, while progressive enhancement starts from a very basic, functioning version and continues to expand to adapt to the needs of the future environment. Degradation (functional decay) means looking backward; progressive enhancement means looking forward while keeping its foundation in a safe zone.

　The “graceful downgrade” perspective

　The "graceful degradation" view holds that websites should be designed for the most advanced and complete browsers. Arrange the testing of browsers that are considered "outdated" or have missing functions at the last stage of the development cycle, and limit the test objects to the previous version of mainstream browsers (such as IE, Mozilla, etc.).

Under this design paradigm, older browsers are considered to only provide a “poor, but passable” browsing experience. You can make some small adjustments to suit a specific browser. But since they are not the focus of our attention, other differences will be ignored except for fixing larger bugs.

　Perspective of “Progressive Enhancement”

　The "progressive enhancement" perspective believes that focus should be on the content itself.

　Content is the reason why we build a website. Some websites display it, some collect it, some seek it, some operate it, and some websites even include all of the above, but the same thing is that they all involve content. This makes "progressive enhancement" a more reasonable design paradigm. This is why it was immediately adopted by Yahoo! and used to build its "Graded Browser Support (Graded Browser Support)" strategy.

　Then the question comes. Now the product manager sees that the web page effects of IE6, 7, and 8 are much less rounded corners and shadows (CSS3) than modern browsers of higher versions, and they require compatibility (use image backgrounds and abandon CSS3). How will you convince him?

　(Free play)

　

　7. Why is it more effective to use multiple domain names to store website resources?

• CDN caching is more convenient
• Break browser concurrency limit
• Save cookie bandwidth
• Save the number of connections to the main domain name and optimize page response speed
• Prevent unnecessary security issues

　8. Please talk about your understanding of the importance of web standards and standards-setting organizations.

　(No standard answer) Web standards and standard-setting organizations are all designed to make the development of the web more 'healthy'. Developers follow unified standards, reduce development difficulty and development costs, and SEO will be better, and it will not be because of Abuse of code leads to various bugs, security issues, and ultimately improves website usability.

　9.Please describe the difference between cookies, sessionStorage and localStorage? 　

　SessionStorage is used to locally store data in a session. This data can only be accessed by pages in the same session and the data is destroyed when the session ends. Therefore sessionStorage is not a persistent local storage, only session-level storage. LocalStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.

　The difference between web storage and cookies

• The concept of Web Storage is similar to that of cookies, but the difference is that it is designed for larger capacity storage. The size of the cookie is limited, and the cookie will be sent every time you request a new page, which wastes bandwidth. In addition, the cookie needs to specify a scope and cannot be called across domains.
• In addition, Web Storage has setItem, getItem, removeItem, clear and other methods. Unlike cookies, front-end developers need to encapsulate setCookie and getCookie themselves. But Cookies are also indispensable: Cookies are used to interact with the server and exist as part of the HTTP specification, while Web Storage is only created to "store" data locally.

　10. Briefly describe the difference between src and href.

Answer:

　 src is used to replace the current element, and href is used to establish a connection between the current document and the referenced resource.

　Src is the abbreviation of source, pointing to the location of an external resource. The pointed content will be embedded in the document at the location of the current tag; when requesting the src resource, the resource pointed to will be downloaded and applied to the document, such as js script, img Elements such as pictures and frames.

　

When the browser parses this element, it will pause the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same is true for elements such as pictures and frames, which is similar to embedding the pointed resource into the current tag. This is also why the js script is placed at the bottom instead of the head.

　Href is the abbreviation of Hypertext Reference, which points to the location of the network resource and establishes a link to the current element (anchor) or current document (link). If we add

to the document

　

　 Then the browser will recognize the document as a css file, download the resources in parallel and will not stop processing the current document. This is why it is recommended to use the link method to load css instead of using the @import method.

　11. What image formats do you know will be used in web page production?

Answer:

　png-8, png-24, jpeg, gif, svg.

　But none of the above are the final answers the interviewer wants. The interviewer wants to hear Webp,Apng. (Are you paying attention to new technologies and new things)

　 Popular science Webp: WebP format, an image format developed by Google to speed up image loading. The image compression volume is only about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. Well-known websites such as Facebook Ebay have begun testing and using the WebP format.

　With the same quality, the volume of WebP format images is 40% smaller than that of JPEG format images.

　Apng: The full name is "Animated Portable Network Graphics", which is a bitmap animation extension of PNG and can achieve dynamic picture effects in png format. It was born in 2004, but has not been supported by major browser manufacturers. Until it was recently supported by iOS Safari 8, it is expected to replace GIF and become the next generation dynamic graphics standard.

　12. Do you know what microformats are? Talk about understanding. Should microformats be considered in front-end builds?

Answer:

　Microformats (Microformats) is a collection of machine-readable semantic XHTML vocabulary and an open standard for structured data. It is a special format developed for special applications.

Advantages: Add smart data to web pages so that website content can display additional tips in the search engine results interface. (Application example: Douban, if you are interested, google it yourself)

　

　13. After the css/js code is online, developers often optimize performance. Starting from the time the user refreshes the web page, where will a js request usually be cached?

Answer: dns cache, cdn cache, browser cache, server cache.

　14. There are a large number of pictures on one page (large e-commerce website), and the loading is very slow. What methods do you have to optimize the loading of these pictures to give users a better experience.

• Lazy loading of images. You can add a scroll bar event to the unvisible area on the page to determine the distance between the image position and the top of the browser and the distance between the page and the page. If the former is smaller than the latter, it will be loaded first.
• If it is a slideshow, photo album, etc., you can use picture preloading technology to download the previous and next pictures of the currently displayed picture first.
• If the image is a CSS image, you can use CSSsprite, SVGsprite, Iconfont, Base64 and other technologies.
• If the image is too large, you can use a specially encoded image. When loading, a particularly compressed thumbnail will be loaded first to improve the user experience.
• If the image display area is smaller than the actual size of the image, the image will be compressed first on the server side according to business needs, and the compressed image size will be consistent with the display.

　

　15. How do you understand the semantics of HTML structure? 　　

• When the style is removed or lost, the page can present a clear structure:

HTML itself has no performance. We see that for example,

is bold, with a font size of 2em, and bold; is bold. Don’t think that this is the performance of HTML. These are actually the default css of HTML. Styles are at work, so when the styles are removed or lost, the page can present a clear structure. This is not an advantage of the semantic HTML structure. However, browsers have default styles. The purpose of the default styles is also to better express the semantics of HTML. , it can be said that the browser's default style and the semantic HTML structure are inseparable.

• Screen readers (if the visitor is visually impaired) will "read" your page based entirely on your markup.

For example, if you use semantic markup, screen readers will "spell out" your word, rather than trying to pronounce it in full.

• PDA, mobile phones and other devices may not be able to render web pages like ordinary computer browsers (usually because these devices have weak support for CSS)

Using semantic markup ensures that these devices render web pages in a meaningful way. Ideally, the viewing device is tasked with rendering web pages consistent with the conditions of the device itself.

　 Semantic markup provides the relevant information needed by the device, saving you the need to consider all possible display situations (including existing or new devices in the future). For example, a mobile phone can choose to have a paragraph tagged with a title The text is displayed in bold font. A handheld computer may display it in a larger font. Either way once you mark the text as a title, you can be sure that the reading device will display the page appropriately on its own terms. .

• Search engine crawlers also rely on markup to determine the context and weight of individual keywords

In the past, you may not have considered that search engine crawlers are also "visitors" to the website, but now they are actually extremely valuable users. Without them, search engines will not be able to index your website, and then it will be difficult for ordinary users to come. Visit.

• It is very important whether your page is easy to understand for crawlers, because crawlers will largely ignore the markup used for performance and only focus on semantic markup.

　Therefore, if the title of the page file is tagged instead, then this page may be positioned lower in the search results. In addition to improving ease of use, semantic markup is conducive to the correct use of CSS and JavaScript because it itself provides There are many "hooks" to apply the style and behavior of the page.
SEO mainly relies on the content of your website and external links.

• Easy for team development and maintenance

　 W3C has set a good standard for us. Everyone in the team follows this standard, which can reduce many differentiated things, facilitate development and maintenance, improve development efficiency, and even achieve modular development.

　16. Let’s talk about what needs to be considered to do a good job in SEO from the front-end perspective?

• Understand how search engines crawl and index web pages

　You need to know the basic working principles of some search engines, the differences between search engines, how search robots (SE robots or web crawlers) work, how search engines sort search results, etc.

• Meta tag optimization

　Mainly including theme (Title), website description (Description), and keywords (Keywords). There are also other hidden texts such as Author (author), Category (directory), Language (encoding language), etc.

• How to select keywords and place them on web pages

　You have to use keywords when searching. Keyword analysis and selection is one of the most important tasks of SEO. First, determine the main keywords for the website (usually around 5), and then optimize these keywords, including keyword density (Density), relevance (Relavancy), prominence (Prominency), etc.

• Understand the major search engines

　Although there are many search engines, there are only a few that play a decisive role in website traffic. For example, the English ones mainly include Google, Yahoo, Bing, etc.; the Chinese ones include Baidu, Sogou, Youdao, etc. Different search engines have different rules for crawling, indexing, and sorting pages. You also need to understand the relationship between search portals and search engines. For example, AOL uses Google's search technology for web search, and MSN uses Bing's technology.

• Main Internet Directory

　Open Directory itself is not a search engine, but a large website directory. The main difference between it and a search engine is the way in which website content is collected. The directory is manually edited and mainly includes the homepage of the website; the search engine automatically collects it and crawls a large number of content pages in addition to the homepage.

• Pay-per-click search engine

Search engines also need to survive. As Internet commerce becomes more and more mature, paid search engines have become popular. The most typical ones are Overture and Baidu, and of course Google's advertising project Google Adwords. More and more people use search engine click ads to locate commercial websites. There is also a lot of knowledge about optimization and ranking. You have to learn to get the most clicks with the least advertising investment.

• Search engine login

After the website is finished, don’t lie there waiting for customers to fall from the sky. The easiest way to let others find you is to submit your website to a search engine. If you have a commercial website, the major search engines and directories will require you to pay to be included (e.g. Yahoo charges $299), but the good news is that (at least so far) the largest search engine, Google, is currently free, and it dominates Controls over 60% of the search market.

• Link exchange and link popularity (Link Popularity)

　 Web content is linked to each other in the form of hypertext, and the same is true between websites. In addition to search engines, people surf through links between different websites every day. The more links other websites have to your website, the more traffic you will get. More importantly, the more external links your website has, the more important it will be considered by search engines, thus giving you a higher ranking.

• Reasonable use of tags

　

　Css:

　1. Is there any way to set the CSS style of a DOM?

• External style sheet, introduce an external css file
• Internal style sheet, put the css code inside the tag
• Inline style, define the css style directly inside the HTML element

　

　2.What are the selectors in CSS?

• Derived selector (declared with HTML tag)
• id selector (declared with DOM ID)
• Class selector (declared with a style class name)
• Attribute selector (declared using DOM attributes, belonging to CSS2, not supported by IE6, not commonly used, forget it if you don’t know)

In addition to the first 3 basic selectors, there are also some extended selectors, including

• Descendant selector (use space separation, such as div .a{ })
• Group selector (use comma separation, such as p,div,#a{ })

　Then the question is, How is the priority of CSS selector defined?

Basic principles:

　Generally speaking, the more special a selector is, the higher its priority. That is, the more accurately the selector points, the higher its priority.

Complex calculation method:

• Use 1 to indicate the priority of the derived selector
• Use 10 to represent the priority of the class selector
• Use 100 to mark the priority of the ID selector
  • div.test1 .span var priority 1+10 +10 +1
  • span#xxx .songs li Priority 1+100 + 10 + 1
  • #xxx li Priority 100 +1

　Then the question is, look at the following code, what color is the text in the

tag? .

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

　　答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在

中的先后关系无关。 

　　

　　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 {background-color:gray;} }       /*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元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

　　答案： 、 、 、 、<label>。</label>

 

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

　　答案：

　　外边距重叠就是margin-collapse。

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

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

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

　　

　　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     }

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

1 #container     //<img  alt="Front-end interview questions (HTML/CSS) from major Internet companies" >的容器设置如下
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 伪类实现。 

　　具体实现方案：请戳张鑫旭大大的博文CSS计数器(序列数字字符自动递增)详解