CSS block-level tags, inline tags, inline block label conversions

CSS block-level tags, inline tags, inline block label conversions

In basic 1, I have detailed the common properties of CSS, several different selectors, on the basis of which we can further understand their characteristics so as to better learn and master the relevant development skills.

Classification of HTML tags

When talking about label classification, we as beginners in the first use of the label will find some properties on some labels do not work, such as wide, high, horizontal center, in fact, the use of this property is only used on block-level labels to function. Personally, this is a very easy place for beginners to overlook, so I'll write it down!

First, we can divide the HTML tags into: block-level labels, inline tags, inline block labels, and so on, as shown here.

Block-level labels

Features: Exclusive line, the height, width, row height, and the top and bottom margin can be set to the value of the property values to take effect; if the width is not given, block-level elements default to the width of the browser, that is, 100% width;

Typical block-level labels are:<p>, H-Series,<li>,<dt>,<dd>,<p>,<form>,<ul>

In-line labels

Features: You can have more than one row of labels, not directly set the row label height, width, row height and top and bottom margin, completely by the content open wide!

Typical inline tags are: <span>,<a>,<b>,<i>,<u>,<em>,<strong>,<label>,<br >

Inline Block Tags:

Features: The combination of inline and block level of a bit, not only can be applied to the width of the high attribute value, but also can be more than one row of labels display;

Typical inline labels are:,<input>

Then some students will think, I can not control the span or the width of the font height it? Yes, so we're going to throw the float and the positioning off this time, say, by using the display property to convert them to each other:

1, block-level label conversion to inline tags: display:inline;

2, in-line label conversion to block-level label: Display:block;

3, converted into inline block tags: display:inline-block;

The display mode can be converted to each other simply by using this display property for the corresponding tag and by taking the corresponding value.

Here's an example of this:

1: Convert inline labels to block-level labels

<! DOCTYPE html>
The result of the operation is as follows; Any area of red can be achieved by jumping to Baidu, so he can expand the range of links.


2: Convert inline labels to inline block labels

The difference between a block-level label and a block-level label has been described above, and I'm emphasizing it again: block-level labels and inline block-level labels are both long and wide, but block-level tags are set when you're ready to

It is automatically wrapped, you can not put other things in this line, and inline block-level labels in the same row can be placed in multiple inline labels, I have a case to explain.


Operation Result:



3. Converting block-level labels to inline labels

<! DOCTYPE html>
The effect is as follows:


For block-level labels, inline labels, inline block-level labels I wrote here first, but also welcome you to look after the more guidance, thanks.