How much do you know about css (1)--I will ask you to answer_html/css_WEB-ITnose

1. Introduction

Dear front-end or pseudo-front-end comrades (such as the author himself), CSS is not very unfamiliar to you. For example, when I was in college a few years ago, I used CSS when making websites for external parties, and I had to use CSS. Calculating this way, it takes more than six years. Some functions may be familiar, and some functions may need to be checked online. It seems that I can handle things at work?? I was the same before (now I don’t do development at work, but I still write code in my spare time) ).

Nothing in the world is absolutely simple, it’s just that we think it is simple. Just like the current development situation of our company, the development environment has just been transferred to B/S. The development leaders used to use .net for C/S. In my opinion, they think that js and css are just that. , not very profound. But I still had an attitude of awe and bought a copy of "CSS Design Guide (Third Edition)". Regardless of whether I knew it or not, I read it all. After the book came back from the mail, I spent three nights reading it. I have a habit that when I do something, there must be a result. I can't just think that I understand it in my head. I must write it down or even give an example. So, I just wrote a few blogs. Benefit yourself and benefit others.

Below I will list down the things that I encountered during the reading process that I think are more important (we don’t have a strong grasp of them) or that I didn’t understand before. I will give you a few questions so that readers can try to think about them. If you know it all, then your foundation is very solid and there is nothing to say; if you don’t know something, just check the answer yourself if you are anxious. If you are not anxious, just wait for my blog introduction later.

We’ve talked a lot, let’s start now!

2. Question

　01. Some browsers do not fully support css3. Which tool can be used to detect whether the browser supports it and what items it supports?

Tip: Mo****zr

　02. Commonly used html tags, their display attributes generally default to block and inline. What are the common tags whose display is not block or inline? What is the difference between the display of these tags and block/inline?

Tips: table, input, textarea

03. Have you ever used @import?

　(relatively simple)

　04. The first row of a table displays a red background, the last row displays a blue background, and the middle row uses How to write gray/white spaced background?

Tip: Structured pseudo-class (relatively simple)

05. Have you ever used pseudo-elements ::before and ::after? Where are they used?

Tips: Clear floats and add a "triangle" to a div Important

06. css?? Cascading style sheet, how to understand the "cascading"? Important

Tip: Stacking means stacking one layer after another. The key is to know how many layers there are and what each layer is.

　07. Regarding "Special" How much do you know about "specificity"? Do you know the calculation rules of "I-C-E"? Important

Tip: refer to http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html

08. It is not very troublesome to understand the specificity. The key is to analyze multiple css selectors and calculate the trouble. There is a simple solution, a four-sentence formula called "Charlie's version of simple cascading essentials". Do you understand? Repeat to

Tip: For example, "A selector containing an ID should be preferred over a selector containing a class..."

　09. Search for "browser default styles", find it, open it and see if you can understand all the default styles of the browser. Important

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 develop, you must write * {margin:0; padding:0}. Why is this?

Tip: Browser compatibility (relatively simple)

11. Style p{margin-top:50px; margin-bottom:30px;} will What will be the vertical distance between p's?

Tip: Vertical margins...horizontal margins...?? Relatively simple basic knowledge

　 12. Everyone knows the "box model" (don't know Quickly fix it! ), the width of the box model actually refers to the width of the content, excluding padding, border, and margin. In fact, this is very detrimental to our CSS layout. Is there any way to make the width the full width? Important

Tip: box-sizing (pay attention to the compatibility of lower IE versions)

13. Some of the effects of float will make us often It's hard to laugh or cry (especially for beginners). In fact, if you understand the original design intention of float, maybe you will understand these things. What is the original design intention of float?

Tip: Just a simple sentence...

　14. Float has "wrapping properties"?? For example:

abc

and

abc

The width of both is It's different. If you don't believe it, you can try adding a background color to p. Do you understand this "encapsulation"? Try to think about it, what other elements (or CSS attributes) also have this kind of "wrapping"? Repeat to

Tip: It is closely related to question 13

15. Another representation of float is " "Destructive", it will cause the parent element to collapse highly, everyone should know this, right? So why is this? In addition, which css attribute also causes this "destructive" Heavy

Tip: Both float and absolute will cause elements to leave the document Flow

(For questions 13, 14, and 15, you can refer to the tutorials http://www.imooc.com/learn/121 and http://www.imooc.com/learn/192, which are very detailed Okay, it’s just that the lecturer’s voice is very “magnetic”, so be patient)

　 16. There are three ways to clear floating in css, do you know? How do you usually clear floats? What are the classic clear float styles most commonly used in the industry? Important

Tip: Search for "clearfix"

　17. How do you understand relative positioning, and what is the most fundamental difference between it and absolute positioning?

Tip: One is inside the document flow and the other is outside the document flow

18. Do you know the "positioning context"? Important

　19. How to implement the classic three-column layout of a web page? If IE6 and 7 are not considered, what is the best way to implement multi-column layout? Important

Tip: table-cell

20. Have you ever used inline-block? How is IE6 and 7 compatible?

Tip: It is relatively simple, just use Baidu

3. End

We have summarized so many questions, you can think of the answers based on the questions. If you think there is more important knowledge to write, you can leave me a message and I will consider joining.

In addition, next I will write a short series of articles about key css knowledge, and introduce these issues in this article based on the wangEditor rich text box I have made and my understanding of the bootstrap framework. I've been very busy with work recently, so updates may be slow, so stay tuned!

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

Welcome to follow my Weibo.

Also welcome to follow my tutorials:

"From Design to Pattern""In-depth understanding of javascript prototype and closure series""Microsoft petshop4 .0 Source Code Interpretation Video" "json2.js Source Code Interpretation Video"

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