Hiya ~ Me again
Before developing and managing style sheets, I want to insert a small knowledge. A few days ago, I checked the Web standard design group and asked Zhu youkang about the differences between block and inline. I remember that people often asked such questions in the past. domestic forums and foreign forums seem to be confused about what the two are. Think about the fact that many people will make some common mistakes here, so let's just open an articleArticleLet's talk about block and inline.
-Concepts should be discussed before presentation.
Here I want to emphasize,ConceptIt is very important in front-end development ~
Many people may think that you can just create a style and place it on the left and right. But in fact, there are some very difficult situations. You need to respond to these situations. The solution depends on many factors, one of which is inspiration and the other is a deep understanding of the concept.
Here, we need to clarify the concept of block and inline?
In fact, the block and inline concepts are mentioned in three completely different parts of the Golden shining bling specification. Maybe this is why so many people will feel confused = V =
-Block-level elements vs inline Elements
The first part of the concept of block and inline is in the HTML specification. To be exact, it should beBlock-level elements (Block-level element)AndInline elements (Inline element):
All elements that are allowed to be contained by the body element are either block-level or Inline. They can be counted as block-level or inline. But there is absolutely no element that can be contained by the body, that is, it is not a block-level, not an inline element.
Common block-level elements include Div, form, table, P, pre, H1 ~ H6, DL, ol, UL, etc.
Common inline elements include span, A, strong, em, label, input, select, textarea, IMG, and BR.
In addition, the script, object, MAP, button, Del, and INS elements can be both block-level elements and inline elements.
Generally, block-level elements can contain block-level elements and inline elements, but inline elements can only contain inline elements. Note that,Each specific element can contain specific elements. Therefore, this rule is not applicable to individual elements..
For example, P elements can only contain inline elements, but cannot contain block-level elements.
1:
2: <P> <Div>Text</Div> </P>
3:
4:
5: <P> <Span>Text</Span> </P>
Another difference is in display. Block-level elements are usually separated by reality, and both sides are replaced by a line. inline elements do not generate line breaks, and a series of inline elements are displayed in a line. However,The final result is that the page displays a style sheet, not the element itself.. It is estimated that this rule is mostly made to enable browsers that appear above the specifications to justify themselves.
For example, we know that the default display layout of table elements uses a unique set of display: Table rules, while the BR element is essentially a line feed. Even a DIV, you can use a style sheet to directly specify the display: inline, so this rule is useless.
What are the essential differences? In fact, the most essential difference is --In a strict DTD, the body element can only contain block-level elements, but not inline elements.. Maybe you want to ask, isn't the element contained in the body either block-level or Inline? Why is there no inline? Very simple-because in the transitional DTD, the body can also contain inline elements.
Let's take a look at the specific example:
doctype HTML Public "-// W3C // dtd xhtml 1.0 strict // en " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " > <Html Xmlns= "Http://www.w3.org/1999/xhtml">
<Head>
meta HTTP-equiv =" Content-Type " content =" text/html; charset = UTF-8 " />
<Title>Block-level vs inline demo</Title>
</Head>
<Body>
<! -- This is wrong -->
<IMG SRC= "/Someimage.png" Title= "An image" ALT= "An image" />
<! -- You must do this before you can -->
P > IMG SRC ="/someimage.png " title =" an image " alt =" an image " /> P >
</Body>
</Html>
<!Doctype Html Public "-// W3C // dtd xhtml 1.0 transitional // en" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html Xmlns= "Http://www.w3.org/1999/xhtml">
<Head>
meta HTTP-equiv =" Content-Type " content =" text/html; charset = UTF-8 " />
<Title>Block-level vs inline demo</Title>
</Head>
<Body>
<! -- If you change a DTD, it will all be OK. -->
<IMG SRC= "/Someimage.png" Title= "An image" ALT= "An image" />
P > IMG SRC ="/someimage.png " title =" an image " alt =" an image " /> P >
</Body>
</Html>
You should have some knowledge about the CSS box model. The content layout on the webpage is implemented by controlling box.
In the css2.1 specification, controlling box is divided into three types: block box and inline box, which are not widely supported so far. This is where block and inline are mentioned in the second part of the Specification. The content on the webpage, whether surrounded by tags or the display mode, is finally calculated as a controlling box and applied layout rules.
Fortunately, this process is transparent for front-end development. You don't have to consider it, but you just need to consider the differences between the two boxes.
This is basically the case for common use.
-Display: block vs display: inlineHere is the last place where block and inline are mentioned. Unlike the other two places, block and inline are not the unique values of the display attribute. In the css2.1 specification, the value of the display attribute can be any of the following: inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit.
In general, display: block allows elements to generate a block box, while display: inline generates an inline box. For the differences between the two, see the previous section.
-If you are interested
Think about whether the Li element is block level or inline ~
The results will be published tomorrow. So, let's go here.
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
