HTML inline elements and block-level elements __html

inline and block-level elements

inline elements are generally containers of content, while block-level elements are generally containers for other containers . In general, inline elements can only contain content or other inline elements. Width and length are based on content, can not be set, can coexist with other elements in one row, and block-level elements can contain inline elements and other block-level elements, and occupy the entire space of the parent element, you can set the width and Height properties. Browsers typically have a new row before and after block-level elements.

Therefore, inline elements are suitable for displaying specific content, while block-level elements are suitable for layout . The commonly used inline and block-level elements are as follows:

level	element
Inline elements	A,b,strong,span,img,label,button,input,select,textarea
Block-level elements	Header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

"In general," because the level of the element is not immutable, the browser is the default level of the element according to the specification, but it can change its level through the "display" attribute. commonly used display values

The most common display possible values are as follows:

value	Description
Inline	Show with inline element behavior
Block	Show the behavior of block-level elements
Inline-block	Both inline and block-level element attributes are both not filled with the parent element, and the width and Height properties can be set
Table	Show in tabular form
Table-cell	Show in table cell form
Table-row	Show as a table row
Table-column	Show in tabular form
Flex	CSS3 new, although in the CR phase, but many modern browsers have already supported this feature of the prefix, ie from the beginning of the 11 partial support. Similar to block-level elements, but can be used to make adaptive layouts
Inline-flex	Similar inline elements, but can be used to make adaptive layouts
Grid	CSS3 new, currently in the "experimental phase (experimental)", just got the IE11 and edge of the partial support

difference between inline and block-level element box models

Inline element size is determined by the content of the contents, the box model padding, border and block-level elements are not different, are standard box model, but margin only the horizontal direction of the value, the vertical direction does not work.

block-level elements when the width and height values are not explicitly specified, block-level element dimensions are determined by the content, and when the value of width and height is specified, the size of the content beyond the block-level element overflows, and what behavior the block-level element renders to its overflow value is mentioned below. Block-level elements are padding, border and standard box models, but if the width + padding + border + specified margin is less than its parent, the browser fills the entire row with a complement of margin. block-level elements and overflow

Block-level elements when the width and height values are not explicitly specified, block-level element dimensions are determined by the content, and when the value of width and height is specified, the content exceeds the specified size and the dimensions of the element are not changed as the content changes. By using overflow, you can specify behavior when content is exceeded, and of course, overflow only works on block-level elements, specifying how block-level elements should handle the display of content when the content exceeds the block-level container . The overflow possible values are the following table:

value	Description
Visible	Default value, if content exceeds container size, no processing is done
Hidden	The excess content is truncated and hidden
Scroll	Scroll bars are always displayed, regardless of whether the content is exceeded. You can control scroll bars that show only one direction, and you should set Overflow-x and Overflow-y
Auto	When content is not exceeded, scroll bars are not displayed, scroll bars are displayed when content is exceeded, and if only one direction is exceeded, only scroll bars in that direction are displayed

For example, the HTML structure is three DIV elements, just like CSS styles, only overflow values are different:

<div class= ' block ' >blockblockblock</div>
 <div class= ' Block-hidden ' >blockblockblock</div >
 <div class= ' Block-auto ' >blockblockblock</div>

1 2 3

. block{
    height:40px;
    width:100px;
    font-size:30px;
    padding:10px;
    BORDER:6PX solid RGB (in);
    margin:20px;
    Background-color:rgb (255, 0, 0);
}
. block-hidden{
    height:40px;
    width:100px;
    font-size:30px;
    padding:10px;
    BORDER:6PX solid RGB (in);
    margin:20px;
    Background-color:rgb (255, 0, 0);
    Overflow:hidden
}
. block-auto{
    height:40px;
    width:100px;
    font-size:30px;
    padding:10px;
    BORDER:6PX solid RGB (in);
    margin:20px;
    Background-color:rgb (255, 0, 0);
    Overflow:auto;
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28-29

Finally, facing three kinds of settings, the effect is this.

Summary

The article sums up the difference between inline and block-level elements, each element can be displayed to set the row or block level display, inline and blocks are two display models, the browser to each element to use a model to render the element, the above we mentioned in the inline element and block-level elements grouped, It's not that they're meant to be, but browsers specify default values according to the specification, so even if we don't specify these attributes, those elements will still render the rendering in the category they belong to. Display can change the corresponding rendering model of the element, that is, the box model. When the contents of a block-level element exceed the container, the overflow property is used to specify the behavior of the block-level element.

As long as the page rendering rendering, can not be separated from the CSS box model relationship, so mastering the box model is to understand the front-end specifications and browser behavior of the premise. Display properties of various values are actually different rendering rendering models, including new Flex and grid, and later articles we share see the flex layout is God horse, it solves what pain point, why compare fire.

Turn from: http://blog.csdn.net/qingyafan/article/details/52203663