CSS block-level tags, inline tags, inline block tags conversion (2)

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: An exclusive row that takes effect on the property values that can be set for height, width, row height, and top and bottom margins; If you don't give width, the block-level element defaults to the width of the browser, which 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 tags 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



1 <! DOCTYPE html> 2 


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.  

More CSS block-level tags, inline tags, inline block tags (2) related articles please follow topic.alibabacloud.com!

