When we use CSS to layout pages, we divide HTML tags into two types: block elements and inline elements (div and P, which we usually use, are block elements, link label A is an inline element ). It is an important concept in CSS layout pages and must be thoroughly understood! Now, let's take a look at the definitions of block and inline elements.
Note: This course seems quite long and has very little content. It is easier for everyone to understand it through examples. Don't be scared by the text and code in front of you ~
Reference:Block Elements
Generally, it is a container of other elements, which can accommodate inline elements and other block elements. Block elements exclude other elements from the same row, and the width (width) height takes effect. Common block elements are Div and P.
Inline Element
An inline element can only contain text or other inline elements. It allows other inline elements to be in the same row, but the width (width) height does not work. The common inline element is "".
We made a comparison table to help you better understand it.
For the above concepts, we will use the instance method to give you a clear understanding. Please pay attention to it ~
Requirement: The ID is the red (#900) area of div1. The width and height are both 300 pixels and contain a green area with ID div2. The length is 100 pixels of div2.
The CSS code is as follows:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
The HTML code is as follows:
Copy content to clipboard Code:<div id="div1">
<div id="div2"></div>
</div>
To facilitate beginners to learn better, I will release the complete code.
Copy content to clipboard Code:<! 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 = gb2312"/>
<Title> CSS Learning Network --- "can accommodate inline and other block elements" </title>
<Style type = "text/CSS">
<! --
# Div1 {width: 300px; Height: 300px; Background: #900 ;}
# Div2 {width: 100px; Height: 100px; Background: #090 ;}
-->
</Style>
</Head>
<Body>
<Div id = "div1">
<Div id = "div2"> </div>
</Div>
</Body>
</Html>
How is it? Is it the following effect?
If you do, let's continue to look at it. Let's add a condition to the preceding requirement and put a link a in div1, the content is "can accommodate inline and other block elements" and the color is white.
The CSS code is as follows:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
a{color:#fff;}
The HTML code is as follows:
Copy content to clipboard Code:<Div id = "div1">
<Div id = "div2"> </div>
<A href = "#"> can accommodate inline and other block elements </a>
</Div>
Is it the following effect?
Here, we can see that the block element div1 has two elements: Block Element div2 and inline Element, this is what the block element concept says: "It is generally a container of other elements that can accommodate inline elements and other block elements." Why is it general? Because block elements are not just used as containers, sometimes there are other purposes. For example, block elements can be used to separate the upper and lower elements, and block elements can be used to achieve highly adaptive of parent elements, the content in this section will be explained in detail later, because it does not belong to the knowledge in this section.
Good ~! We continue to add the condition. After div2 in div1, we add a blue (#009) area block with the length and width of div3 being 100 pixels. The Code is as follows:
The CSS code is as follows:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff;}
The HTML code is as follows:
Copy content to clipboard Code:<Div id = "div1">
<Div id = "div2"> </div>
<Div id = "div3"> </div>
<A href = "#"> can accommodate inline and other block elements </a>
</Div>
Is this effect?
Is it different from what I imagined beforehand? I thought blue would be on the right side of green, but it is on the lower side. If you add a few div4, div5 will continue to be in the same place, vertical arrangement. This is what the block element concept says: "block elements exclude other elements and they are in the same row." To put it bluntly, block elements are more aggressive. No one wants to sit in the same row with them, it doesn't matter whether you are a block element or an unrelated inline element that has a kinship with him. They all go to the following line and look at the example, whether the Green Square and the blue square are in the same line or not, and do not want to share a line with other elements, but there is no absolute thing. The block element does not allow other elements to be in the same line as other elements, it doesn't matter if you are more arrogant. I have a solution. What is the specific solution? We will explain it in detail later. If your knowledge does not belong to the content of this section, I will not talk about it much, pay attention to the tutorials later ~
At this point, I think you are clear about the concept of block elements. The following example will explain the concept of inline elements, and of course add conditions, what are the conditions for adding? add a link with the content "Love CSS" after a, and set the background of all links to pale orange (# f93)
The CSS code is as follows:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff; background:#F93;}
The HTML code is as follows:
Copy content to clipboard Code:<Div id = "div1">
<Div id = "div2"> </div>
<Div id = "div3"> </div>
<A href = "#"> can accommodate inline and other block elements </a>
<A href = "#"> love CSS </a>
</Div>
Is the effect as follows?
Are two connected to a in the same row (do not forget that A is an inline element ~), This explains the concept of "inline elements allow other inline elements to be in the same row". Why not say "inline elements allow other elements to be in the same row ", because other elements include two types of elements: the inline element and the block element, if it is in one line with the inline element, it must be in one line. If it is in the same block element, even if it agrees, the block element behind him does not agree. The block element will start with another line located in its next line.
We continue to add conditions. Now we add the width and height to inline element a in CSS, for example, width: 100px; Height: 50px; to see if there is any change.
CSS code
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff; background:#F93;width:100px;height:50px;}
If there is no effect, is there no change? This shows that the width (width) height of the inline element in the concept does not work, its size only varies with internal text or other inline elements. The specific proof is to give you a job and prove it by yourself.
Is there any way to make the defined width and height work on the inline element? The answer is: Of course. Because things are not absolutely true in CSS, because CSS has two elements: inline elements and block elements, but width and height only work for block elements, inline elements do not work, if we convert an inline element into a block element, it will have the features of the block element. Of course, the width and height will also work. If you can think of this idea, prove that your brain is very active now. At this time, we only need to add an attribute display: block to the corresponding inline element, as shown below:
a{color:#fff; background:#F93;width:100px;height:50px; display:block;}
How about it? It works just like the following ~
Why are two 'A' not in the same row? That's because both of these inline elements are converted to block elements. Since they are successfully converted to block elements, it should have one of the most prominent features of block elements. Other elements cannot be in the same row as other elements. Therefore, these two a elements are arranged vertically ~
Is there any way to keep them in the same line? Of course, I will tell you later about the course ^_^
Now, we have a thorough understanding of the concept of inline elements through the instance. All inline elements and block elements will be listed later for future reference.
Reference:Block Element)
Address-address
BLOCKQUOTE-block reference
Center-align the chunk
Dir-directory list
Div-Easy to use block-level, which is also the main tag of CSS layout
DL-definition list
Fieldset-Form Control Group
Form-interactive form
H1-title
H2-subtitle
H3-Level 3 title
Level H4-4 title
H5-Level 5 Title
H6-6 level title
HR-horizontal Separator
Isindex-input prompt
Menu-Menu list
Optional content of noframes-frames. (content in this block is displayed in browsers that do not support frame.
NoScript-optional script content (this content is displayed in browsers that do not support scripts)
Ol-sort form
P-paragraph
Pre-format text
Table-table
Ul-non-sorted list
Inline Element)
A-anchor
Abbr-abbreviation
Acronym-First word
B-bold (not recommended)
BDO-bidi override
Big-font size
Br-line feed
Cite-Reference
Code-computer code (required when source code is referenced)
Dfn-define Fields
Em-emphasis
Font-font setting (not recommended)
I-italic
IMG-Image
Input-input box
KBD-define keyboard text
Label-Table label
Q-short reference
S-hyphen (not recommended)
Samp-definition example computer code
Select-Project Selection
Small-small font text
Span-commonly used inline containers that define text blocks
Strike-dashes
Strong-highlighted in bold
Sub-subscript
Sup-superscript
Textarea-multi-line text input box
TT-telex text
U-underline
VaR-define variables
Author: kwoojan from: CSS Learning Forum
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
