Inline and block-level elements are a very important concept for the front end. In CSS, only block-level elements have physical properties, while elements have three forms:
1. Block-level elements: There are physical properties, width,height write values work, and to occupy a row.
2. Inline elements: no physical attributes. But the margin,padding value is useful. Do not occupy a line, behind can have sibling elements.
3. That is, the block is also within the line, according to the brother element decision.
In general, converting inline and block-level elements is a property of display. Inline → block-level, Display:block, block-level → in-line, display:inline;
This is a way that everyone knows. And I saw today. Use float to convert inline elements to block-level elements. Is it possible? Let's try it.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "Charset=utf-8"/>5 <title></title>6 <styletype= "Text/css">7 P{ 8 Background-color:Yellow;9 }Ten a{ One Background-color:Silver; A } - </style> - </Head> the <Body> - <P>Test_1</P> - <P>Test_2</P> - <P>Test_3</P> + <ahref="#">I am a link</a> - </Body> + </HTML>
P is our common block-level element, and a is our common inline element. Yellow occupies a line of document flow, and silver occupies only the area of the content.
Let's add physical properties 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 elements <p> are affected, while the <a> elements are not affected.
Let's add a floating property to the <a> 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 the <a> element has been added with the float property, and the width and height that we originally set are in effect. If we add another <a> element after the <a> element, the effect is as follows.
1-3
Conclusion: Float is the implicit transformation of the inner element into a block element, the internal words have physical properties. External is also the property of the inline element, not occupy a row.
Since float can convert 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 of using position is the same as "1-2". This means that position can also convert inline elements to block-level elements. As to the use of absolute. This is because absolute makes elements out of the document structure, which is the same as float. Furthermore, if two <a> elements are set here, the first <a> will be covered by a second <a> element. There are many words that follow the principle of "later".
So, whether it's float or position, you can use them to convert inline elements into implicit block-level elements, but the downside is that they affect sibling elements.
Explore inline elements into block-level elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
