CSS know how much (4)--read the default browser style

The previous section, "CSS Know how much (3)--style source and cascading rules" describes the style of the five sources, let's go through a picture to review.

　　

For the above three layers, we are probably familiar with it. In the following two layers, the user-defined style is usually changed to a font size and font style, there is nothing to say. And most of all, the browser's default style.

The default styles of different browsers are somewhat different, especially between older browsers, and now advanced browsers are getting closer to uniform standards, which is a good thing for the front-end program ape. Although there are some differences, but the vast majority of the same, I first paste out the code, the specific interpretation of our slow way (just say the focus, relatively easy or not used to say).

Browser Default Style1. A change in concept

Before I read the code, let me show you the most important thing about the browser's default style. is to first re-understand the concept of HTML and CSS.

I used to think that the browser itself knew a variety of HTML tags, and will be set according to the rules of the label, for example, p is block display, UL margin-left,h1 bold display ... Previously thought that the default display of these tags and CSS-independent, is the browser's own dry, CSS Settings page style is loaded and then rendered.

Now it is wrong to know this idea. In fact, after the browser loaded HTML only for one thing--dom tree, the browser to the HTML into the DOM tree structure, completed the structure of the HTML. As for the subsequent rendering of the view, p is block, BR line, that is the integration of the CSS after the thing. and the browser integration of CSS is another route, and parsing HTML is separate. The "CSS" here contains the default browser style.

Can be combined to understand (the second section of the figure):

　　In a word, the browser changes the loaded HTML into a DOM tree, but there is no display style at this time. So the styles shown are all CSS-defined, and the browser renders the view style only through CSS .

--How good the design: accusations single, open closed!

2. Block element

　　

Why by default P, H1, UL, Div are block display, is defined here. So, do not say that Div is born block--this sentence should be replaced by: The default browser style is defined by the DIV is block--so that the DIV is block! is defined by the default style, not the browser's kernel.

The block element is not set, and the default is an inline display.

3. Display:list-item

　　

When we use display, the commonly used values are: Inline/block/inline-block, less than List-item. So what exactly does the list-item here do? We might as well try it yourself:

See no, there is ul-li in the effect of it, if add a margin-left is not like Ul-li?

So why does the Ul-li show that way by default? --list-item is the "culprit".

4. diplay:table

　　

First give a quick study questions:<table> and <div> What is the biggest difference in container size (just the size of the container, regardless of the content difference)? Please say the answer within two seconds.

The answer is that the width of the--div is the same as the parent container, and the table width depends on the content-that is, the table is "wrapped".

To give an example:

, the first div defaults to block, and the width fills the entire page. The second Div sets the display:table, and the width depends on the content. This is "wrapping". when it comes to "wrapping", I have to think of float and absolute. How specific here can not elaborate, the following article will be described in detail, interested can be looked at first.

Think about it, what areas of your project do you want to be "wrapped" instead of writing dead widths or using JS to calculate the width? If you don't think of it, let me take a picture to remind you. Such as:

5. Display:table-cell

　　

Above, we see a dazzling display, and all are related to table. Literally we can see that this is the browser in order to render a complete table, and the need for many display methods (PS: Seemingly a simple table, rendering rules so much, which reminds us to think about the rigor and logic of the problem).

Most of the here is what we have never used, the understanding can not be used, there is no need to delve into. But this Table-cell we can use, and it is used to do a very important thing- multi-column layout .

Multi-column Layout how important it is in CSS I don't have to say it, people in the traditional mode use float to solve this problem, but the things that float writes are complex, the width adjustment is not flexible, browser compatibility is problematic. So there is a new solution--table-cell, note, IE6, 7 not!

A simple example:

When I first learned HTML, I didn't use Div + CSS as a multi-column layout, I used table to do a long column layout. Now, you can use the Table-cell, like table as long as the layout, the effect of the results and table made out of the same effect.

6. Body Style

　　

In body, two styles are defined, such as.

First, by default, the text in the page does not directly top the browser's border, because the default style is set to the body margin. Here are a few things to keep in mind, the margin values for the body set by different browsers may not be the same, so everyone knows to use *{margin:0} in CSS to solve this compatibility problem.

As mentioned before, * selector level is lower than the body tag Selector, but *{margin:0} Still valid reason is that the browser secretly do the priority of the hands and feet. If, under normal circumstances, the * selector does not work when it encounters a tag selector, it is "post-loaded" in time. For example:

Second, the browser default style is also set to the body line-height,line-height this value of 1.12 is more friendly to English, the Chinese state is a bit crowded. Line-height is inherited, set in the body, all the text below the body will inherit into effect.

Also note that the line-height:1.12 here is a relative value, which is 1.12 times times the height of the text. See here, when we write line-height, we must also pay attention to the use of relative values, do not use absolute value. As follows:

Is the three forms of writing line-height, which form do you think is the best? What's the difference?

1. Case 1: Always according to the text of 1.4 times times calculation, regardless of the height of the text, can adapt to any change;
2. Case 2: Always according to 1.4em calculation, with the value of EM change, regardless of the text height (at this time the text height may have passed the absolute px value of the table size, rather than with EM change);
3. Case 3: That's 25px, absolutely.

I believe we see here that there is a lot of line-height that I can spy on through a single channel. If you understand these three situations, from the point of view of software design and system expansion, of course we will choose the first kind.

7. Em and px

We set the text height or the distance related to the text, such as the margin of P, line-heigt (on the Wengang finish, no longer repeat), will use the EM or px? --Anyway, when I was unfamiliar with CSS, I used px. Because PX is fixed size, at a glance. And, of course, it's not conducive to expansion.

Therefore, we recommend that you use EM. and the browser's default style also suggests that we write this way:

　　

For example, it sets the H1 font size to 2EM, the vertical margin is 0.67em,h2 font size 1.5em, portrait size 0.75EM......P vertical margin is 1.12em, font size 1em (not in the entire file)

What is EM? --em is a browser-recognized unit of length, but it is not absolute, fixed, but relative. We all know that PX is an absolute length unit and it never changes. The browser by default orders 1em = = = 16px. Now you know why P is 16px by default. And you know that H1 is twice times the P-height, H2 is 1.5 times times the P-height ... (You know more and more ...) ）

Of course, we can modify the value of 1em through CSS.

　　

Since both font-size and margin are defined by EM, the margin value is modified when EM is modified, regardless of the font size. This is where EM works!

From now on, the font size of the CSS, all with em!

8. Bold and italic

　　

, which elements are formatted in bold/italic throughout the HTML. The focus is still a matter of thinking transformation: H1 is not a natural bold, but a font-weight:bolder style.

Here's a digression. What's the difference between:<b> and <strong>? What's the difference between <i> and <em>? --Do not know the words to check it, see a lot of questions test this.

9. Inline-block

　　

I believe that the first friends who learn to use Inline-block have a puzzle: what is Inline-block? At this time if you are very diligent, you go to the Internet to check the information, and then do a variety of experiments. --The spirit is commendable, behavior is not advisable.

There are shortcuts to learning. Look at the shortcut that the browser's default style tells you: button, input is inline-block! So on demand you will suddenly understand, at least can give you a good image of the concept. look at the button and input, and you'll know what Inline-block looks like :

Can be centered by the parent container, can set height width and margin, does not occupy a positive line like table or div ...-this is inline-block--remember this is the browser default style that tells you.

question of <br> style??

　　

Here I raise a question for myself. For example, in the browser default style, this is set for Br.

1. Here's br:before{content: "A"}, "a" does not show ah?
2. Who caused the <br> line break, a CSS or a browser?

Want to know the answer to the friend, the liberal enlighten me and everyone to share, thank you.

11. Summary

Is it fun for everyone to see? Anyway I write is quite enjoyable, although typing, writing code, drawing is very tired, but a sense of accomplishment--and your encouragement is better!

　　

First of all, I think the browser default style is very important, all the detailed interpretation of the focus, I hope to give you some inspiration. What is not read is some relatively easy to understand, or infrequently used (such as printing style settings), you can go directly to see the source code.

Secondly, this also contains a question of my, very ashamed not to see. Even if the womb can not solve, to others to share, let you know a question, for you, should also be a harvest.

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

Welcome to my Tutorial:"From design to Mode" " deep understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 Source Interpretation Video" "Json2.js Source Interpretation video"

Also welcome to my open source project-Wangeditor, a simple and easy-to-use web Rich Text editor

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

CSS know how much (4)--read the default browser style