Analysis of HTML element types and their conversion, analysis of html elements

Analysis of HTML element types and their conversion, analysis of html elements
As we all know, html is composed of tag elements. Before learning about element type conversion, let's take a look at the element types in html. 1. There are two types of html elements: block-level elements and inline elements. inline elements are also called intra-row elements. Common block-level elements include div, o, dl, ul, li, h1 to h6, p, etc, common inline elements include span, label, a, img, input, B, and I. What are the differences between them? The following is a detailed demonstration. 1. A block-level element occupies only one row. The Inline element will be the same row as other inline elements. Let's look at the following code:

<P> block-level element p tag </p> <span> inline element one </span> <span> inline element two </span>

Label p and span as the background color respectively, and then the running effect is as follows:

The default width of a block-level element is the width of the parent-level element. After a small dot width is given to the P element, will it still occupy the whole line? The answer is yes. The effect is as follows:

2. The default width of block-level elements is the width of parent-level elements. The width of inline elements is that the content is naturally opened, while the height is that the content is naturally opened.

What if we set the width and height for block-level elements and inline elements separately? Add the following style to the label:

p{width:200px;height:200px;background-color:#ccc;}span{width:200px;height:200px;background-color:pink;}

The running result is as follows:

It can be seen that the width and height set for the p label of the block-level element are valid, but the width and height set for the inline element are invalid because the inline element does not support specifying the width and height, its width and height are naturally supported by the content and are affected by the padding value. We add a 50px padding value to the first span tag. The effect is as follows:

 

It can be seen that the width and height of the inline element span have changed, and an interesting problem occurs here. Careful friends will surely find that the span label after the width change overlaps with the P label, why? Because the distance between an inline Element and Its upper and lower adjacent elements is not affected by the padding value, but the distance between the inline element and the left and right adjacent elements is affected by the padding value.

Here, let's take a look at the effect of the margin value. First, we will give the margin of the p tag a 50px value. The effect is as follows:

You can see that the value of the outer border of the block-level element has an effect on the upper, lower, and left sides. Next, we remove the margin value of the p tag and write the margin: 50px to the first span to get the following results:

It can be seen that for an inline element, its margin value is the same as that for the padding value, which only affects the distance between the left and right adjacent elements, but does not affect the distance between the upper and lower adjacent elements.

3. Another difference between block-level elements and inline elements is that block-level elements can enclose block-level elements and inline elements, while inline elements can only enclose inline elements rather than block-level elements. For example, you can place div, ul, img, and span in a div to display them normally. In a span, you can place B and I, instead of div and p, this is not the case. If you are interested, try it yourself.

4. Conclusion: The block-level element is like a big man. On the page, no matter whether you are fat or thin, you must have an exclusive row. As long as it tells you to stay away from it, you have to be farther away. It determines the distance (margin value ). There are no problems with the family of big people and small people (Block-level and inline elements can be wrapped ).

The Inline element is like a small person, sitting in a row with other small people on the page, and automatically sitting in the second row when a row is full. The left and right sides of the arm move (set the left and right values of margin), so that the left and right people can stay away from themselves, but there is no way for them to move up and down. At home, it's okay to raise a few small people. Big people cannot afford it (they can't pack block-level items, they can only pack inline items ).

Note that there are two special cases where the p tag in a block-level element cannot enclose block-level elements, and the tag in an inline element can enclose any element. In addition, both inline element input and img support the features of some block-level elements, such as setting the width and the upper and lower margin values.

Ii. Next let's talk about the conversion between block-level elements and inline elements.

In the web page layout, we often need block-level elements with Inline elements, such as the 58-city navigation bar:

It is implemented by ul. li in ul is a block-level element and exclusive row by default. However, here we need it to be displayed horizontally. At this time, the element type conversion is used.

To convert a block-level element to an inline element, set display: inline in the style, and then set the width, but we cannot set it here, because the inline value will completely convert block-level elements into inline elements instead of block-level elements, here we still need to place block-level labels in li, therefore, we use another method to set display: inline-block. This will convert li into a block element in the row so that it can be arranged horizontally and wrap block-level elements.

Next, let's take a closer look at the display attribute. It can be used for element type conversion. A total of three values can be set: inline, inline-block, and block. Inline is to convert an element into an inline element, inline-block to an in-row block element, and block to a block element. Among them, inline-block is the most used. Let's take a look at an example of converting an inline element into a fast element in the row. First:

We generally use ul to implement such a vertical navigation bar. The Code is as follows:

<ul><li id="li-01"> <a href="#"></a> </li><li id="li-02"> <a href="#"></a> </li><li id="li-03"> <a href="#"></a> </li><li id="li-04"> <a href="#"></a> </li><li id="li-05"> <a href="#"></a> </li></ul>

You can set the background image and width for li to display the image on the image. li contains a tag, which contains no content and serves as an inline element, at this time, the tag has no size, so we cannot click it at all on the page. The expected result is that the link of a tag can be triggered when you click li with the mouse, therefore, we will handle tag a as follows:

a{display:inline-block;width:40px;height:40px;}

By converting the label into a block element in the row and setting the same width and height as li, the effect can be achieved. Here, the effect of directly converting tag a to block elements is the same.

Finally, the block value of display not only converts elements into block elements, but also displays elements. If you write the following code During style initialization: * {display: block;}: Set the display value of all tags to block using wildcards, you will find that the titile label and style label you wrote in the head label will be displayed on the page. This attribute value is usually used together with display: none (not displayed. For example, we often see some navigation bars. When you move the mouse up, a second-level navigation bar appears. When you move the mouse away, the second-level navigation bar disappears and is not displayed, these two attribute values are controlled through the display.

The property of display is very powerful, which is equivalent to turning elements back to their mother. The above is just the tip of its iceberg. Many new usage has been introduced in css3, such as display: flex sets the element as an elastic box, which will not be described here.