Explore the conversion of inline elements into block-level elements_html/css

Explore the conversion of inline elements into block-level elements_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:39:10

Original

1946 people have browsed it

Inline elements and block-level elements are a very important concept for the front end. In CSS, only block-level elements have physical attributes, and elements have three forms:

1. Block-level elements: have physical attributes, width and height write values work, and they must occupy one line.
2. Inline elements: no physical attributes. But margin and padding values are useful. It does not occupy a line and can be followed by sibling elements.
3. Both block and inline are determined based on sibling elements.

Generally speaking, when converting inline elements and block-level elements, add the display attribute to them. Inline → block level, display: block; block level → inline, display: inline;

This is also a method that everyone is familiar with. And I saw today using float to convert inline elements to block level elements. Is it possible? Let's give it a try.

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="charset=utf-8"/> 5     <title></title> 6     <style type="text/css"> 7         p{  8             background-color:yellow; 9         }10         a{ 11             background-color: silver;12         }13     </style>14 </head>15 <body>16     <p>test_1</p>17     <p>test_2</p>18     <p>test_3</p>19     <a href="#">我是链接</a>20 </body>21 </html>

Copy after login

p is our commonly used block-level element, and a is our commonly used inline element. The yellow occupies one line of the document flow, and the silver occupies only that area of the content.

Let’s add physical attributes to them.

<style type="text/css">		p{ 			background-color:yellow;			width: 100px;			height: 100px;		}		a{ 			background-color: silver;			width: 100px;			height: 100px;		}</style>

Copy after login

　1-1

We can see that the block-level element

is affected, while the element is not affected.

Let’s add a floating attribute to the element.

<style type="text/css">		p{ 			background-color:yellow;			width: 100px;			height: 100px;		}		a{ 			background-color: silver;			float: left;			width: 100px;			height: 100px;		}</style>

Copy after login

　1-2

We can see that after adding the float attribute to the element, the width and height we originally set took effect. If we add an element after the element, the effect is as follows.

1-3

Conclusion: float implicitly converts inline elements into block elements, and has physical properties internally. Externally, it is still an attribute of the inline element and does not occupy a row.

Since float can be converted from inline to block level. So, is it possible to use position?

<style type="text/css">		p{ 			background-color:yellow;			width: 100px;			height: 100px;		}		a{ 			background-color: silver;			position: absolute;			width: 100px;			height: 100px;		}</style>

Copy after login

We found that the effect after using position is the same as "1-2". That is to say, position can also convert inline elements into block-level elements. As for using absolute. This is because absolute will cause the element to break out of the document structure, which is the same as float. Furthermore, if two elements are set here, the first will be covered by the second element. If there are more than one, the principle of "last come first" will be followed.

So, whether it is float or position, using them can convert inline elements into implicit block-level elements, but the disadvantage is that it will affect sibling elements.