Css block-level label, intra-row label, intra-row block label conversion (2), css label

Css block-level label, intra-row label, intra-row block label conversion (2), css label

Css block-level label, intra-row label, and intra-row block label Conversion

Copyright Notice

• Author: Yu Dian name
• Author blog: https://home.cnblogs.com/u/qdhxhz/

In basic 1, I have detailed the common attributes of css and several different selectors. On this basis, we will further understand their features to better learn and master relevant development skills.

HTML Tag Classification

When talking about label classification, when we are a beginner, we will find that some attributes do not work on some labels, such as width, height, and horizontal center, in fact, this attribute can only be used on block-level labels. I personally think this is a very easy place for beginners to ignore, so I will write it down!

First, we can divide HTML tags into block-level tags, intra-row tags, and intra-row block tags according to the display differences. We will introduce them separately.

Block-level labels

Features: exclusive row, effective for attribute values that can be set for height, width, row height, and top and bottom margins. If width is not specified, block-level elements are the browser width by default, that is, the width is 100%;

Typical block-level labels include: <div>, h series, <li>, <dt>, <dd>, <p>, <form>, <ul>

Intra-row label

Features: Multiple labels can exist in one row. You cannot directly set the height, width, row height, and top and bottom margins of the intra-Row Labels. The width and height of the labels depend on the content!

Typical intra-Row labels include: <span>, <a>, <B>, <I>, <u>, <em>, <strong>, <label>, <br>

Intra-row block labels:

Features: the combination of intra-row and block-level features can not only take effect for width and height attribute values, but also display multiple labels in one row;

Typical intra-Row labels include: , <input>

So some people will think about it. Can't I control the width and height of span or font? Yes, so we will not talk about floating and positioning this time, so we will use the display attribute to convert them to each other:

 

1. Converting block-level labels to intra-Row Labels: display: inline;

2. Convert intra-Row labels to block-level labels: display: block;

3. Switch to the line block label: display: inline-block;

 

You only need to use the display attribute for the corresponding tag and obtain the corresponding value, you can convert the display mode to each other.

See the following example:

1: Convert intra-Row labels to block-level labels

1 <! DOCTYPE html> 2 
 
The running result is as follows. You can jump to Baidu in any area of red, so you can expand the link range.

2: Convert intra-Row labels to intra-row block labels
I have already discussed the differences between intra-row block-level labels and intra-row block-level labels. I have emphasized that both block-level labels and intra-row block-level labels can be set to length and width, but block-level flag.
It is an automatic line feed. You cannot place other items in this line, and the intra-row block-level labels can be placed in multiple intra-Row labels in the same line. I will explain the specific case.
 
1 
Running result:

 
3. Convert block-level labels into intra-Row Labels
1 <! DOCTYPE html> 2 
The effect is as follows:

For block-level labels, intra-Row labels, and intra-row block-level labels, I will write them here first. You are also welcome to give me more instructions. Thank you.