Home > Developer > Web Develop
In CSS, tag elements in HTML are broadly divided into three different types: block elements, inline elements (also called inline elements), and inline block elements.
The most common block elements are:
<div>, <p>,
The commonly used inline elements are:
<a>, <span>, <br>, <i>, <em>, <strong>, <label>, <q>, <var>, < Cite>, <code>
The commonly used inline block elements are:
, <input>
II. Element Classification--block-level elements1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <title>Inline block elements</title>6 <styletype= "Text/css">7 div,p{background:Pink;}8 </style>9 </Head>Ten <Body> One <Div>Div1</Div> A <Div>Div2</Div> - <P>Paragraph 1 paragraph 1 paragraph 1 paragraph 1 paragraph 1</P> - </Body> the </HTML>Element Classification--block-level elements
What is a block-level element? In HTML <div>, <p>,
display:blockthe setting is to display the element as a block-level element. The following code is the conversion of inline element A into a block element, so that the a element has a block element feature.
A{display:block;}Block-level element features:
1. Each block-level element starts with a new line, and the subsequent element also begins a row. (True overbearing, one block-level element exclusive row)
2, the height of the element, width, row height, and the top and bottom margin can be set.
3, the element width is not set, is its own parent container of 100% (and the width of the parent element consistent), unless a width is set.
Try it: Feel the features of block-level elements
Enter a variety of block-level tags in the Code editor and try their features.
III. element Classification--inline elements1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" />5 <title>Inline element Labels</title>6 <styletype= "Text/css">7 A,span,em{8 background:Pink;/*set A, span, EM label background color to Pink*/9 }Ten </style> One </Head> A <Body> - <ahref= "Http://www.baidu.com">Baidu</a> - <ahref= "Http://www.imooc.com">Mu class net</a> the <span>33333</span> - <span>44444</span><em>555555</em> - </Body> - </HTML>element Classification--inline elements
In HTML,,<span>, <a>, <label>, <strong>, and <em> are typical inline elements (inline elements).
Of course, block elements can also display:inline be coded to set elements as inline elements. The code below is to convert the block element div into an inline element, so that the DIV element has an inline element feature.
div{ Display:inline;} ......<div> I want to become an inline element </div>Inline element Features:
1, and other elements are on one line;
2, the height of the element, the width and the top and bottom margin is not set;
3. The width of the element is the width of the text or Picture it contains, and it cannot be changed.
There is a spacing problem between inline elements.
Try it out: feel the characteristics of the inline element
Enter a variety of inline element tags in the Code editor and try their features.
1, when there are "carriage returns" between elements in the row, " Tab "," Space "will appear in the gap.
<DIV>
Span style= "COLOR: #ff0000" > <a>1</a>
<a>2</a>
<span>33333</span>
<span>44444</span>
<em>555555</em>
Span style= "COLOR: #ff0000" ></DIV>
workaround:
1, write in one line, do not have a space, such as a symbol.
div{ font-size:0;}
A,SPAN,EM{FONT-SIZE:16PX;}
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" />5 <title>Inline block elements</title>6 <styletype= "Text/css">7 a{8 9 width:20px;/*width does not work by default*/Ten Height:20px;/*height does not work by default*/ One background:Pink;/*set the background color to pink*/ A text-align:Center; /*Set Text Center display*/ - } - </style> the </Head> - <Body> - <a>1</a> - <a>2</a> + <a>3</a> - <a>4</a> + </Body> A </HTML>element Classification-inline block elements
Inline block elements (inline-block) are the characteristics of both inline elements and block elements.
display:inline-blockthe code is to set the element to inline block elements. (css2.1 New),, <input> tag is this inline block tag.
Inline-block Elemental Features:
1, and other elements are on one line;
2, the height of the element, width, row height, and the top and bottom margin can be set.
Let's try it. Page numbering design of imitation pages
In the code editor you can see that we set the width and height of the A element, but none of them play a role,
The reason is that a is an inline element by default, and inline elements are not set and high.
In the 8th line of the editor, enter:
Display:inline-block;
To convert a block element or inline element to an element within a row block: It is for the next lesson to pave the line,
As long as you know that the inline element cannot be set to a high width, it can be set after the conversion, and the block element cannot be displayed on one line after the conversion.
A label becomes inline block element, the center setting means that the number is centered within each block, not the entire a label centered on the page
Inline: inline Element {
1, Cannot set width and height;
2, multiple rows of elements in a row, until a row, will not be replaced by a new line;
3, you can only set the horizontal direction of the margin, such as: Margin-left,margin-right,padding-left,padding-right.
}
Block: Chunk-level element {
1, block-level element exclusive row;
2, the width and height can be set, the default is a whole line, unless the width is set separately;
3, you can set the margin and padding properties.
}
inline-block{
In short, the element can be displayed in one line, and the width and height margins can be set.
}
Block-level elements default to a whole line regardless of its width there is no whole line wide useless space no other elements to use
Property: Display:block;
Defaults to a whole line the default width an entire row can be set to a wide line with only its own
inline (inline) elements define a piece of content (text) that is not occupied within the line. Other inline elements can be used together
Property: Display:inline;
Unable to set a wide line can have multiple sizes determined by the content
inline blocky elements (inline block-level elements)
Property: Display:inline-block;
You can set the width height
A row can have multiple
Five, what is the box modelVideo Courses
Learn HTML (11) CSS box model from scratch--on
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
