Home >Web Front-end >HTML Tutorial >Explore the conversion of inline elements into block-level elements_html/css_WEB-ITnose
Explore the conversion of inline elements into block-level elements_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:39:102036browse
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> 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> 1-1
We can see that the block-level element e388a4556c0f65e1904146cc1a846bee is affected, while the 3499910bf9dac5ae3c52d5ede7383485 element is not affected.
Let’s add a floating attribute to the 3499910bf9dac5ae3c52d5ede7383485 element.
<style type="text/css"> p{ background-color:yellow; width: 100px; height: 100px; } a{ background-color: silver; float: left; width: 100px; height: 100px; }</style> 1-2
We can see that after adding the float attribute to the 3499910bf9dac5ae3c52d5ede7383485 element, the width and height we originally set took effect. If we add an 3499910bf9dac5ae3c52d5ede7383485 element after the 3499910bf9dac5ae3c52d5ede7383485 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> 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 3499910bf9dac5ae3c52d5ede7383485 elements are set here, the first 3499910bf9dac5ae3c52d5ede7383485 will be covered by the second 3499910bf9dac5ae3c52d5ede7383485 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.