Ten CSS Questions - Curiosity + Inquiry = CSSer (Turn)

Abstract: When I have time recently, I want to write out several blogs that have been brewing. Today, the front-end primary school students brought 10 questions to share with you some experiences of learning CSS. I think that if you want to learn CSS well, you must maintain a curiosity and get to the bottom of it. The momentum, instead of copy-pasting, just get by. My ability is limited. This article took four or five days from conception and completion. If you are a front-end novice like me, you may wish to carefully consider your experience in order to comprehend something; if you are an industry leader, please stop and feel free. Take two glances, point out the inappropriate content of the words, and we will discuss together.

　　When I have time recently, I want to write all the blogs that have been brewing. Today, the front-end primary school students brought 10 questions to share with you some experiences of learning CSS. I think that if you want to learn CSS well, you must maintain a curiosity and an energy to get to the bottom of it. , instead of copy-pasting, just get by. My ability is limited. This article took four or five days from conception and completion. If you are a front-end novice like me, you may wish to carefully consider your experience in order to comprehend something; if you are an industry leader, please stop and feel free. Take two glances, point out the inappropriate content of the words, and we will discuss together.

Always be curious.

　　The first question: When the margin value is in the form of a percentage, why does the browser calculate the value based on the width of the parent container?

　　In my previous blog to test your front-end foundation - Sit the test, I talked about the calculation method when the margin value is <percentage>. If there is a parent container with a width of 400px and a height of 600px, the calculated value of the child element after setting margin: 20% 20% should be "margin: 120px 80px" or "margin: 80px 80px"? Following the theory in that blog, the second is the correct answer. But in this article today, the answer I give is that the first is definitely wrong, and the second is not necessarily right. A W3C compliant browser will do this based on the width of the parent container, but only when the writing mode is landscape. Because in the horizontal layout, the width is "traceable", and the browser width can be used as a reference, but the height is not fixed, so the margin percentage value will refer to the width of the parent container when calculating. When the writing mode is changed to portrait, its calculated reference becomes the height of the parent container. Poke me to view DEMO (please view it under webkit kernel or IE).

/*Modify the writing mode*/
.demo{
    -webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
　　 writing-mode: tb-rl; /* for ie */
}
　　Second question: margin : Why does auto only achieve horizontal centering, but not vertical centering?

　　When the left and right value of the margin attribute of a block-level element in a regular flow is set to the keyword auto, and it has a fixed width, it will equally divide the remaining horizontal space and display it centered. However, if you set the upper and lower values to auto, the browser will get a computed value of 0, which has no effect. So the question is, why does the auto in the vertical direction not take effect?

　　Similar to the previous question, this is layout related. During web page layout, the block-level elements of the conventional flow always cover the browser window horizontally, and the block-level elements in the vertical direction are arranged from top to bottom in order. Vertical can be expanded infinitely, and a fixed reference value cannot be found during calculation, so vertical auto cannot take effect.

　　Likewise, margin:auto is affected by the writing mode. When the writing mode is portrait, margin:auto can be centered vertically, but still can be centered horizontally. Do not believe? Please write a demo and try it yourself. In fact, in addition to these attributes affected by the writing mode, there are margin folding, calculation of the padding percentage value, etc.

　　Third question: Can a position:fixed element be positioned relative to a container rather than the browser viewport?

　　When it comes to position:fixed, many people will say that this is a positioning attribute, and the difference from absolute is that it is positioned for the browser viewport. My blog navigation bar uses the "position:fixed" property to keep it always at the top of the window. But don't forget "there is no absolute in the world", CSS implements a position:fixed element positioning relative to a container, please check this DEMO under FireFox.

　　When an element applies the CSS3 transform property, the fixed of its descendants will be invalid. http://www.w3.org/TR/css3-transforms/#issue-ca2c412c. Therefore, this bug can be used to simulate an effect that is fixed relative to a containing block.

　　More effects of transform can be seen in Zhang Xinxu's blog: CSS3 transform's N multiple rendering effects on common elements.

　　Fourth question: Can you use CSS to hide and display panels?

　　Now to achieve such a function, switch the display or hide of a panel through CSS. When it comes to CSS, we naturally think of controlling the style of a single element. Once multiple element interactions are involved, we often use JavaScript to manipulate Dom. In fact, this requirement can be achieved not only with CSS, but also in more than one way. Please poke DEMO: Three CSS ways to hide and display panels.

　　The first uses label and checkbox, so that the controller and the controlled party do not need to have a specific HTML structure relationship, but need additional HTML tags to support. The second way makes use of hover and child element selectors, and the third way makes use of focus and sibling element selectors, both of which are restricted to specific HTML structures. All three methods implement the hidden display of the panel using only CSS.

　　Fifth question: Can an icon be made with CSS? Like a triangle? A tiny house?

　　A tag, placed in HTML, can only represent one semantic. However, a tag plus CSS, you can create infinite possibilities. Please see DEMO: CSS implements triangle, small house pattern.

　　A variety of geometric shapes can be simulated by using the oblique lines that the borders cover each other. In CSS3, each element has two pseudo-elements ::before and ::after. For the same tag, the units that can be manipulated by CSS are changed from one to three. With the help of absolute positioning, various Such shapes were created.

Can you imagine css3-icons

　　? These icons are all drawn with CSS. To learn more about CSS3 icons, you can visit this website: http://www.uiplayground.in/css3-icons/ The

　　sixth question: I want to write a hack for IE6, 7, how to write it?

　　You might answer this: Use ">", "_", "*", and various symbols to write hacks. Yes, that's right, but you need to remember which browsers each symbol recognizes, and if you write too much, the code will be very difficult to read. Learning CSS must have a skeptical spirit. Is there a hack method to avoid writing these messy symbols, and the code is easy to maintain and read? We can see how the Haosou homepage does it: there is a sentence at the top of the page:

copy code
<!DOCTYPE html>




<html class="w3c">
<head>
Copy Code
　　In the CSS of the page, you will see this rule:

Copy
Code.ie7 #hd_usernav:before , .ie8 #hd_usernav:

    border-right-color: #c5c5c5
}
.ie6 .skin_no #hd_nav a, .ie7 .skin_no #hd_nav a, .ie8 .skin_no #hd_nav a {
    color: #c5c5c5
}
… 　　copy
code
The disadvantages of the special symbol hack are that you need to write more code and make the page larger.

　　Whether a front-end er knows about the above problems or not does not affect whether he can complete a project and build a website. But if he is not curious, does not want to investigate the internal reasons, and only holds the attitude of "I don't want to know so much, I can use it anyway", then he is at best a "programmer", not an "engineer" .

Just to get to the bottom of it!

　　Seventh question: Can the width and height of inline-level elements be set?

　　Elements that do not form new blocks for their own content, but rather have their content spread over multiple lines, are called inline-level elements. Such elements can be displayed on the same line as other inline-level elements without starting a new line, such as span, strong. In the interview, when asked whether the width and height of inline-level elements can be set, according to our experience, the answer is often not. But this is often the way of the interviewer, because there are some special inline elements, such as img, input, select, etc., that can be set to width and height. A content is not controlled by the CSS visual formatting model, the CSS rendering model does not consider the rendering of this content, and the element itself generally has an inherent size (width, height, aspect ratio) Elements are called replacement elements. For example, img is a replacement element. When the width and height are not set for it, it will be displayed according to its own width and height. So the correct answer to this question should be that permuted elements can, but non-permuted elements cannot.

　　Question 8: CSS rules take effect according to their priority. Will the rules with lower priority be ignored or overwritten by the browser?

　　In my previous blog, I mentioned the rules for using CSS priority in browsers: styles with multiple priorities will be rendered, but high priority will override low priority, and elements will be rendered as high priority style. Now consider this question. Two background-image rules are applied to a div. According to the previous theory, both rules will be rendered. Will the browser request the background image of the overridden rule?

　　The reality is that browsers are smart enough to only request the background image of the current application. In simple terms, the browser will only issue http requests for the image resources in the valid CSS rules. If we get to the bottom of it, we have to talk about how browsers work. My current level is not enough, the following red fonts are for personal understanding, please read selectively.

　　In modern browsers, from request to rendering, a page roughly needs to go through several steps such as parsing - building a DOM tree - building a rendering tree (frame tree) - layout (reflow) - drawing. The presentation of a page is not done overnight, but in an orderly manner step by step. The well-known stylesheet cascading order and specificity calculations take place during the construction of the rendering tree to solve problems when there is more than one rule. Taking the background pattern mentioned above as an example, after the browser has calculated the priority, only the background pattern rules defined later are built into the rendering tree. Next, the browser will rearrange and draw, and the browser will only request the image file used by the background image rule when drawing. That's why only one HTTP request is made.

　　Understanding the working principle of the browser can not only recognize the CSS parsing and rendering process, but also understand the timing of reflow and repainting, which has a very profound guiding significance for us to write efficient CSS rules and JavaScript Dom operations. This topic is too big, and my current level is not enough to cover it. I will post another article to talk about it in detail when I have learned something. Here is a classic article for those interested: How Browsers Work: Behind the Scenes of Modern Web Browsers. If not accessible, check out this domestic address: w3ctech: How Browsers Work.

　　The ninth question: What is the principle of using margin to make rounded buttons?

　　How to make a button with rounded corners when border-radius cannot be used? Now there is a little trick to make 1px rounded corners: nest a span in the button, and set the margin of the span to: "margin: 1px -1px". Poke me to see DEMO.

　　There are not a few people who know this little tip, so what is the principle that causes this phenomenon? Learning CSS requires getting to the bottom of it. A picture can explain this problem.

　　The red box in the figure is the span tag, and the blue box is the a tag. When the left and right margins of the span are set to -1px, it will protrude 1px on the left and right, resulting in a visual effect of 1px rounded corners. For the same reason, when implementing buttons with rounded corners and background color gradients in some old browsers, the principle of stacking multiple layers of elements to create visual errors is usually used.

　　The tenth question: There are N ways to clear the float. Do they have anything in common?

　　The so-called clearing float is generally to solve the collapse of the height of the parent container caused by the floating of the child element. At present, there are many ways to solve this problem, the most common ones are after pseudo-element, parent element setting "overflow: hidden", etc. Please see DEMO: Seven ways to clear floating.

　　In fact, according to the principle, these methods can be divided into two types: the clear:both method and the construction BFC method.

Method classification Add a new label at the end of the
float , set the style to clear:both clear:both
Add a <br /> label at the end of the float clear:both
Use the ::after pseudo-element clear:both
parent element to set display:table Construct BFC
parent element to set overflow: auto construct BFC
Set overflow:hidden on the parent element, construct the BFC ,
and let the parent element also float. Construct the BFC
　　. Use "clear:both" to clear the floating. Needless to say, what is the method of constructing the BFC?

　　Block formatting contexts (BFC), block-level formatting context is a concept proposed in CSS2.1. In layout, BFC is self-contained and is responsible for its own internal elements. It will not overlap with floating elements, and adjacent BFCs are up and down. The margins also don't overlap. So we will prevent the margin from overlapping by constructing a BFC, clear the float or implement a two-column layout.

　　So how to construct a BFC? 1.float is set to non-none value; 2.overflow is set to non-visible; 3.display is set to table-cell, table-caption, inline-block; 4.position is set to absolute or fixed. These methods just echo the methods mentioned above for constructing the BFC to clear floats.

　　It should be noted that there is no concept of BFC under IE6 and 7, but there is a concept similar in nature to BFC: layout. Many bugs encountered in IE6 and 7 can be solved by letting elements have layout, such as floating margin double spacing, peekaboo, 3 pixel spacing and so on.

　　Some elements such as table and input themselves have layout, so how to make a common element has layout? Including but not limited to the following methods: 1. position: absolute; 2. float is not none; 3. display: inline-block; 4. height: any value except auto; 5. width: any value except auto; 6.zoom: any value except normal; 7.overflow is not visible (only for IE7).

　　This is also the main reason why we often see the words "height:1%", "zoom:1", "display:inline-block", "overflow:hidden" in IEhack, in fact, it is to make the element has layout Well!

　　So under IE6-7, in addition to clear:both (the ::after pseudo-element cannot be used) to clear the float, another method is to let the parent element have layout.

　　More discussion on clearing floats can be seen in a cool blog post: The floats we've cleared together over the years.

Summary

　　Learning any language, or one thing, can't just get by, with the idea of what predecessors sow and others reap. Even though standing on the shoulders of giants can avoid many detours, individuals still need to maintain curiosity and the spirit of inquiring and questioning. Thinking more about the "why" and less about the "should do it" is especially important when learning CSS.

　　CSS is simple, it's there just for typography. CSS is complex, and a simple typography often has N solutions.

http://www.cnblogs.com/dongtianee/p/4563084.htmlThis

article is the original content of Yunqi Community, and may not be reproduced without permission. If you need to reprint, please send an email to [email protected]; if you If you find any content suspected of plagiarism in this community, please send an email to: [email protected] to report and provide relevant evidence. Once verified, this community will delete the suspected infringing content immediately.

Ten CSS Questions - Curiosity + Inquiry = CSSer (Turn)

Guess you like