Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the CSS problems?" in the operation of actual cases, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First question: when the value of margin is in percentage form, why does the browser calculate the value based on the width of the parent container?

In a previous blog post that examined your front-end foundation, Sit the test, I talked about how to calculate the margin value. If there is a parent container with a width of 400px and a height of 600px, should the calculated value of its child elements set to margin:20% 20% be "margin:120px 80px" or "margin:80px 80px"? According to the theory in that blog, the second is the correct answer. But in today's article, the answer I give is * A W3C-compliant browser is calculated based on the width of the parent container, but only if the writing mode is horizontal. Because the width is "traceable" in horizontal typesetting, the browser width can be used as a reference, but the height is not fixed, so the margin percentage value is calculated with reference to the width of the parent container. When the writing mode is changed to vertical, the calculation reference becomes the height of the parent container. Poke me to check the DEMO (please check under the 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: why can margin:auto only be centered horizontally but not vertically?

When the left and right values of the margin attribute of a block-level element in a regular flow are set to the keyword auto, and it has a fixed width, it will divide the remaining horizontal space equally and center the display. However, if you set the upper and lower values to auto, the browser will get a calculated value of 0, which will not have any effect. So the question is, why doesn't the vertical auto work?

Similar to the previous question, this is related to layout. In web page typesetting, the block-level elements of the regular flow are always covered with browser windows horizontally, and the block-level elements in the vertical direction are arranged from top to bottom in order. When there is too much content on the page, the page will appear a vertical scroll bar, so in principle, it can be expanded vertically, and a fixed reference value cannot be found in the calculation, so the vertical auto cannot take effect.

Similarly, margin:auto is affected by the writing mode. When the writing mode is vertical, the margin:auto can be centered vertically and horizontally. You don't believe me? Please write a demo by yourself. In fact, the attributes affected by the writing mode include margin folding, the calculation of padding percentage values, and so on.

The third question: can I position the elements of an position:fixed relative to a container instead of a browser viewport?

When it comes to position:fixed, many people will say that this is a positioning property, which is different from absolute in that it is targeted at browser viewports. My blog navigation bar uses the "position:fixed" attribute to keep it at the top of the window all the time. However, don't forget that there is nothing absolute. CSS implements the positioning of an position:fixed element relative to a container. Please check this DEMO under FireFox.

When an element applies the transform attribute of CSS3, the fixed of its descendant elements will be invalidated. Http://www.w3.org/TR/css3-transforms/#issue-ca2c412c . So you can use this Bug to simulate an effect relative to a containing block fixed.

More about the impact of transform can be seen in Zhang Xinxu's blog: the impact of CSS3 transform on the N-multiple rendering of ordinary elements.

The fourth question: can I use CSS to hide and display the panel?

Now it's time to implement the function of toggling the display or hiding of a panel through CSS. When it comes to CSS, we naturally think of controlling the style of a single element, and when it comes to multiple elements interacting with each other, we often use JavaScript to operate Dom. In fact, this requirement can be realized not only in CSS, but even in more than one way. Please poke DEMO: there are three CSS ways to hide and display the panel.

* uses label and checkbox, so that the control party and the controlled party do not need to have a specific HTML structure relationship, but need additional HTML tags to support it. The second approach takes advantage of hover and child element selectors, while the third approach makes use of focus and sibling element selectors, both of which are limited by specific HTML structures. All three methods only use CSS to realize the hidden display of the panel.

Fifth question: can I use CSS to make an icon? Like a triangle? A small house?

A tag, placed in HTML, can only represent one semantics. However, a tag with CSS can create the possibility of *. Please see the triangle realized by DEMO:CSS and the pattern of small house.

Using border to cover each other with diagonal lines, a variety of geometric shapes can be simulated. In CSS3, each element has two pseudo elements:: before and:: after. For the same tag, the units that can be controlled by CSS are changed from one to three, coupled with absolute positioning assistance, a variety of shapes are created.

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

Question 6: I want to write hack for IE6,7. How should I write it?

You might answer this: use various symbols such as ">", "_", "*" and so on to write hack. Yes, that's right, but you need to remember which browsers recognize each symbol, and if you write it too messy, it will make the code very difficult to read. Learning CSS must have a skeptical spirit. Is there a hack method that can avoid writing these messy symbols, and the code is easy to maintain and easy to read? Let's take a look at how to search the home page: there is a sentence at the top of the page:

In the CSS of the page, you will see a rule like this:

.ie7 # hd_usernav:before, .ie8 # hd_usernav:before {display: none} .ie6 .skin _ no # hd_nav li, .ie7 .skin _ no # hd_nav li, .ie8 .skin _ no # hd_nav li {border-right-color: # c5c5c5} .ie6 .skin _ no # hd_nav a, .ie7 .skin _ no # hd_nav a, .ie8 .skin _ no # hd_nav a {color: # c5c5c5}.

The advantage of this is that it overcomes the shortcomings of using the special symbol hack, which is that you need to write more code to make the page larger.

Whether a front-end er knows about these issues or not does not affect whether he can complete a project and build a website. But if he has no curiosity, does not want to investigate the internal causes, and only holds the attitude of "I don't want to know so much, I will use it anyway", then he is at best a "programmer" rather than an "engineer".

Is to get to the bottom of it!

Question 7: can the width and height of the elements in the line be set?

Instead of forming new blocks for their own content, elements that distribute content across multiple lines are called inline-level elements. Such elements can be displayed in the same line as other inline-level elements without a separate line, such as span,strong. In the interview, when asked whether the line-level elements can set width and height, according to our experience, the answer is often no. But this often hits the interviewer's way, because there are some special in-line elements, such as img,input,select, etc., that can be set wide and high. A content is not controlled by the CSS visual format model, the CSS rendering model does not take into account the rendering of this content, and the element itself generally has an inherent size (width, height, aspect ratio) elements, which is called replacement elements. For example, img is a replacement element, when it is not set width and height, it will be displayed according to its own width and height. So the correct answer to this question should be that replacement elements can, but not non-replacement elements.

Question 8: CSS rules take effect according to priority. Will low-priority rules be ignored or overwritten by browsers?

In my previous blog post, I mentioned the rules for the use of CSS priority in browsers: multiple priority styles are rendered, but high priority overrides low priority, and elements are rendered as high priority styles. Now consider the question that two background-image rules are applied to a div. According to the previous theory, both rules will be rendered, so will the browser request the background image of the overwritten rule?

The truth is that browsers are smart enough to request only the background images of the current application. To put it simply, browsers will only issue http requests for image resources in CSS rules that are in effect. If you dig deeper, you have to talk about how browsers work. My current level is not enough, the following red font for personal understanding, please read selectively.

In modern browsers, a page needs to go through several steps from request to rendering, such as parsing, building DOM tree, building rendering tree (frame tree), layout (rearrangement), and so on. The presentation of a page is not achieved overnight, but in a step-by-step and orderly manner. The well-known surface stacking order and specificity of patterns are generated in the process of constructing a rendering tree in order to solve the problem when there is more than one rule. Taking the background pattern mentioned above as an example, after the browser calculates the priority, only the post-defined background pattern rules are built on the rendering tree. Then the browser will rearrange and draw, and the browser will only request the picture file used by the background image rule when drawing. This is why only one HTTP request is made.

Understanding how the browser works can not only clearly recognize the CSS parsing and rendering process, but also understand the timing of rearrangement and redrawing, 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 level is not good enough to dabble here at present. I will post another article to talk about it in detail when I have finished my studies. Here is a classic article that you can take a look at: how browsers work: the secrets behind the new web browsers. If you can't access it, check this domestic address: w3ctech: how the browser works.

Question 9: what is the principle that you can use margin to make rounded buttons?

How to make a rounded button when you can't use border-radius? Now there is a tip for making 1px fillets: nest span in button and set the margin of span to "margin:1px-1px". Poke me to check the DEMO.

There are not a few people who know this little tip, so what is the principle that causes this phenomenon? To learn CSS, you need to get to the bottom of it. A picture can explain this problem clearly.

In the picture, the red box is the span tag and the blue box is the a tag. When setting the left and right margin of span to-1px, it will highlight the 1px on the left and right, resulting in a visual effect of 1px fillet. By the same token, the principle of multi-layer elements cascading to create visual errors is usually used when implementing the buttons with fillets and background gradients in some ancient browsers.

Question 10: there are N ways to remove floatings. what do they have in common?

The so-called clear float is generally to understand that the floating of child elements leads to the height collapse of the parent container. There are many ways to solve this problem, the most common are after pseudo elements, parent element setting "overflow:hidden", and so on, see DEMO: seven ways to clear floats.

In fact, according to the principle, these methods can be summarized into two kinds: clear: Both method and construction BFC method.

Method

classification

Add a new label at the end of the float and set the style to clear:both

Clear:both

Add a tag at the end of the float

Clear:both

Use:: after pseudo element

Clear:both

Parent element sets display:table

Construct BFC

Parent element sets overflow:auto

Construct BFC

Parent element sets overflow:hidden

Construct BFC

Let the parent element float as well

Construct BFC

Using "clear:both" to clear floats is needless to say, so what is the construction BFC method?

Block formatting contexts (BFC), block-level formatting context is a concept put forward in CSS2.1. In layout, BFC forms its own system and is responsible for its own internal elements. It will not overlap with floating elements, and the upper and lower margin of adjacent BFC will not overlap. So we will construct a BFC to prevent margin overlap, clear floats, or implement a two-column layout.

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

It is important to note that there is no concept of BFC under IE6,7, but there is a concept similar in nature to BFC: layout. Many of the bug encountered in IE6,7 can be solved by letting the element has layout, such as floating margin double distance, peekaboo, 3 pixel spacing, and so on.

Some elements such as table,input itself are has layout, so how do you make a normal element has layout? This includes, but is not limited to, the following methods: 1. Position 6.zoom 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; float is not visible (IE7 only).

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

So under IE6-7, in addition to using clear:both to clear floats (:: after pseudo elements cannot be used), another way to clear floats is to have the parent element has layout.

This is the end of the content of "what are the CSS problems"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.