Deep understanding of CSS element types

1 write in front

Recently, the style of the page on the cnblogs, the default right "essay category" in the label is each row to display one, and I want to the right "essay category" in the label set to a row to display more than one label, as to how many will be displayed with the size of the label, and each label when the mouse on the background color changes. Effects such as.

Let's analyze how to make the left label display the right way.

2 block elements

Before parsing block elements, we first create HTML pages for later analysis. The HTML code is as follows.

Of course, this HTML we give him some simple style, remove the list symbol, and a label underline. There is pagestyle.css no code in the file at this time, and the effect of this code is as follows.


We can see that each list of LI elements is shown in a single line, and their height and internal content is equal, now we add an outer box to the LI element and set the padding appropriately, write the following code in PAGESTYLE.CSS.



li{    border:1px solid green;    margin-top:2px;    padding:5px 0 5px 0;}


The effect is as follows.

By setting a border on the LI element, you know that the LI element is a row by default, its width is the same as the width of the parent container, and the height is the height of their actual content +padding. The Li element belongs to the C block element. The following summarizes the characteristics of CSS block elements.


 

 
  
 
   
The block element occupies a row by default, the width is consistent with the parent container, and the height is the height of the content +padding.
 
   
Block elements can control the margins of the block element and other elements and the white space (padding) of their own borders and contents by setting the values of margin and padding.
 
   
The block element can set the width and height.
 
   
The block element sets the height, padding,margin the document flow of the parent container, which, of course, is not set at a fixed height by the parent container.
 
  

 
It says that the block element always occupies one line, and the width is consistent with the parent container. When we manually set the width of the LI element to a very small width, will the following LI element run up to it? The answer is definitely not run up, because the block element is always so overbearing, even if their width is very small, but also to exclusive line, do not believe that the following code and effect.



li{    border:1px solid green;    margin-top:2px;    padding:5px 0 5px 0;    width:150px;/* manually set the width */}


We set the LI element width to 150, and the effect is as follows.


We can see that the width of the LI element has changed, but it is still exclusive.

The common block elements are p,h1-h6,p,ul,ol,li and so on. The parent element in a general layout is a block element.

3 in-line elements

In the 2nd section above, the Li element is a block element and is exclusive to one row, and the blog Park label uses the LI element. So we need to change the blog Park's label to one line to show more, what should we do? Here's the start of the line element.

The inline element, as the name implies, is the element that is displayed within a line. In CSS, there is a display property that allows you to change the default display of HTML elements by changing the block element into an inline element and the inline element into a block element. The display property has four values, which are blocks: block elements, inline: in-line elements, Inline-block: inline block elements, none: elements are not displayed.

Let's add a display property to the LI element's CSS style to see the effect. The code is as follows.



li{    border:1px solid green;    margin-left:5px;/* left margin */    margin-top:7px;/* Set Height */    display:inline;}


The effect is as follows.


By setting the display property of the LI element and changing it to the inline element, the Li element can be displayed on one line, one next to the other, and from the effect, we set the margin-left:5px left margin to be effective, and the setting margin-top:7px is no effect. This is the characteristic of the inline element.


 

 
  
 
   
It is not effective to set the height of the inline elements, such as setting margin-top,margin-bottom,padding-top,padding-bottom,height these properties are not valid.
 
   
Setting the width of the inline element is also invalid, and the width of the element within the row is determined by the left and right padding and content width.
 
  

 
The property settings that are related to the height of the inline element are not valid, causing the LI element to close together between the two lines, apparently not satisfying our requirements in aesthetics. But CSS provides another property that is row height line-height , which can set the height between rows and rows. , below I set the row height for the LI element's parent container UL element. The code is as follows.



ul{    line-height:1.5em;} li{    border:1px solid green;    margin-left:5px;    margin-top:7px;    Display:inline;}


The effect is as follows.


By setting the line height of the UL element, the interval between the upper and lower elements of the inline element is realized. Although the effect from my ideal is not too far away, but still some not close to the understanding. The contents of the upper and lower borders and elements are too close (the padding is not), and when the mouse moves to the top, the effect may not be very good. But let's try it in our ideal. The code is as follows.



ul{    line-height:1.5em;} li{    /*border:1px Solid green;*//* do not display the border */    margin-left:13px;    display:inline;/* element in line */    padding:11px 20px;} li:hover{    Background-color:blue;    Color:white;}


The effect is as follows.


It is not valid to set the height-related properties of the elements in the row, but the Padding-top and Padding-bottom set above seem to have an effect, ha. But essentially setting the upper and lower padding of the padding does not increase the row height, nor does it support the document flow of the parent container, and we can see the background color display, as well as the contents of the top and bottom li elements.


 

 
  
 
   
The inline element sets the upper and lower margins of the padding, and does not support the document flow of the parent container, but it will have an effect in the previous article in the CSS box model that all elements in the HTML are a box, and the background color shows the range of padding+content.
 
  

 
The effect of the above we beautify the CSS effect (modify row height and up and down margin), almost can achieve the effect we want, but from the right side of the above, sometimes a line of elements in a row does not show up, there will be a small part in the following line is displayed, if the last occurrence of the situation on the right, That's more embarrassing.

Common inline elements are: A, IMG, input, select, and so on.

4 Inline block elements

The inline block is not a combination of both, literally understood, is the block element that can be displayed in the line, in the 2nd section, even if the block element is set to a width, will also be exclusive line, and will be along with other elements, the inline block element at this point is different from the block element.


 

 
  
 
   
Inline block elements have the effect of setting the height, width, padding, and margin.
 
   
The inline block element does not have a single row, and if the block element within the row is set to the width, padding, margin, and then the width of the parent container can tolerate the next second element, then the second element will be displayed with the first element, otherwise, another row.
 
   
Two peers display the inline block element, the distance between the elements above and below it, with the largest spacing in the main.
 
  

 
About the 3rd feature we can write code to experiment with. Set the first LI element below the UL element to the class property. The code is as follows:



<li class= "First" > <a href= "#" >.net (7) </a> </li>


The code for the CSS is as follows.



li{    /*border:1px Solid green;*//* do not display the border */    margin-left:13px;    display:inline-block;/* element */}li:hover{Background-color:blue in line    ;    Color:white;} ul. first{    margin-bottom:50px;/* Set the bottom margin of the first LI element 50px*/}


The effect is as follows.


We can see that the first line has two Li elements, the first LI element we set the bottom margin to 50px, and the second is not set by default to 0, resulting in the end of this line and the next line of the margin is the first LI element of the bottom margin 50px, and we expect the effect of the same.

After a summary of the elements in the inline block, it is found that the inline block elements can meet our needs well. The following is the LI element is set to the inline block display, to beautify it, the code is as follows.



li{    display:inline-block;/* Inner block element */    margin-bottom:5px;/* bottom margin 5px*/    padding:5px 7px;/* Upper and lower padding 5p, left and right padding 7px* /    border-radius:5px;/* fillet */}li:hover{    background-color:blue;    Color:white;}


The effect is as follows.


In fact, the CSS default element type only two, block elements and inline elements, and inline block elements need us to use display to set.

5 Summary

 After a day of time to organize their own blog style, the blog style into a very concise style, the page is black and white style, when the mouse interaction, the corresponding elements will become light blue color, personally like this style. Also through this collation, re-review the CSS inside a few more important concepts, than the CSS box model, selector, element type and so on.