CSS know how much (1)--I came to ask you to answer

1. Introduction

Members of the front-end or pseudo-front (such as the author himself) comrades, CSS is not very unfamiliar to you. For example, when I was in college a few years ago, I used CSS to make a Web site for the outside, and I had to use CSS. This is also more than six years, some features may be pro, some features may need to search the Internet, seemingly able to cope with the work of the thing-I was also (now do not do the development of work, just amateur also write code).

There is no absolutely simple thing in the world, but we think it is simple. Like our company's current development situation, the development of the big environment has just transferred to B/s, development leaders used to do C/s with. NET, in my opinion, they think JS, CSS is so back, not much advanced. But I was in awe, bought a "CSS Design Guide (third edition)", whether I will, or not, I have to read it all over. After I came back from the book, it took me three nights to finish reading it. I have a habit, is to do one thing must have another result, can not feel oneself in the mind to understand even, must write out, even make an example to calculate finish. So, just write a few blogs. Self-interest people.

The following I have encountered in the process of reading oneself think more important (grasp not firm) or not understand before, are listed first, out a few questions, you crossing can try to think. If you will, then you have a solid foundation, not to say, if you do not, hurry up and you quickly check the answer yourself, do not worry you will wait for me behind the blog introduction.

Gossip says a lot, now start!

2. Questions

　　01. Some browsers do not fully support CSS3, which tool can now be used to detect whether the browser is supported, and which items are supported?

Tip: MO****ZR

　　02. Commonly used HTML tags, their display properties are generally default to block and inline. What are the common label displays that are not block and inline, and what are the differences between these labels and block/inline?

Tip: Table,input, textarea

　　03. Have you ever used @import?

　　(Relatively simple)

　　04. The first row of a table shows a red background, the last line shows a blue background, the middle row uses a gray/white interval background, how to write?

Hint: structured pseudo class (relatively simple)

　　05. Pseudo-Elements:: Before,:: After has been used? Where are they used?

Tip: Clear float, add a "triangle" to a div important

　　css--cascading Style sheets, how do you understand "cascading"? Important

Hint: cascade, that is, layer by layer, the key is to know a total of several layers, each layer is what

　　07. How much do you know about "specificity" and what are the calculation rules for "I-C-E"? heavy to

Tip: Refer to Http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html

　　08. The degree of specificity is not very difficult to understand, the key is to analyze multiple CSS selectors and computational trouble. There is a simple solution, a four-sentence formula, called "Charlie version of the simple stacking point", do you know? heavy to

Tip: For example, "a selector with an ID is better than a selector containing a class ..."

　　09. Search "Browser default Style", find it, open to see, it is the browser default all the styles, whether you can read it. heavy to

Tip: For example, what is the difference between display:table and display:block?

　　10. In the first line of the first CSS file of the system you developed, write * {margin:0; padding:0} , why?

Tip: Browser compatibility (relatively simple)

　　11. Style p{margin-top:50px; margin-bottom:30px;} what is the vertical distance between p?

Tip: Vertical margin ... Horizontal margin ...-a relatively simple basic knowledge

　　12. "Box Model" we all know (do not know hurriedly to the bad fill!!) ), the width of the box model refers to the content, not including padding, border, margin. In fact, it is very bad for us to do CSS layout, what method can let width is the whole breadth? heavy to

Tip: box-sizing (note ie low version compatibility)

　　Some of the impact of float will make us often laugh and cry (especially beginners), actually understand the design of float, perhaps you will understand these things. What was the design of float?

Tip: Just a simple word ...

　　Float is "wrapped"-for example:<p>abc</p> and <p style= ' float:left ' >abc</p> The width of the two is not the same, do not believe that the P plus background color to try. Do you understand this kind of "wrapping"? Try to think, what other elements (or CSS properties) have this "wrapping"? heavy to

Hint: it is closely related to the 13th question

　　One of the appearances of float is "destructive", which causes the parent element to collapse highly, and should everyone know? So why is this? In addition, which CSS properties also lead to This "destructive" re-

Tip: Both float and absolute will cause elements to break out of the document flow

(for 13, 14, 15 questions, you can refer to the tutorial http://www.imooc.com/learn/121 and http://www.imooc.com/learn/192, speak very well, but the voice of the lecturer is very "magnetic", to endure)

　　There are three ways to clear CSS, whether you know it or not. How do you usually clear the float? What is the industry's most popular classic clear floating style? Important

Tip: Search for "Clearfix"

　　17. Relative positioning relative how to understand, it and absolute positioning absolute the most fundamental difference is what?

Tip: One within the document flow, one outside the document flow

　　18. Is the location context known? Important

　　19. How does the classic three-column layout of Web pages be implemented? If you don't consider IE6, 7, what's the best way to implement a multi-column layout? Important

Tip: Table-cell

　　20. Is the use of INLINE-BLOCK,IE6, 7 how compatible?

Hint: Relatively simple, Baidu can

3. End

Now that we have summed up so many questions, you can think about the answers to the questions. If you think there is more important knowledge to write, you can leave a message, I will consider to join in.

In addition, I'll write a brief series on CSS's key knowledge, as well as the Wangeditor rich text boxes I've done and the understanding of the bootstrap framework, to introduce these questions. Recent work is very busy, update may be very slow, please look forward to it!

-------------------------------------------------------------------------------------------------------------

Please pay attention to my Weibo.

Also welcome to follow my tutorials:

" from design to model"" deep understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 Source Interpretation Video" "Json2.js Source Interpretation video"

-------------------------------------------------------------------------------------------------------------

CSS know how much (1)--I came to ask you to answer