CSS box model and element classification (block-level elements, inline elements, inline block elements)

First, CSS box model

The following two images can illustrate the CSS box model, the difference between padding and margin, padding in the border, margin outside the border. Personal understanding is around the label node to design the style, it must remember the definition of the style of what it is to be effective, useful ...

ii. Classification of elements

Element Classification--block-level elements
What is a block-level element. In HTML <div>, <p>, a{

Display:block;

}

Block-level element features:
1, each block-level element starts from the new line, and the subsequent element also has another line (really overbearing, a block-level element exclusive line);
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.

Element classification--inline elements
In HTML,,<span>, <a>, <label>, <strong>, and <em> are typical inline elements (inline elements). Of course, block elements can also be set to inline elements through code display:inline. 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.

Element classification-inline block elements
Inline block elements (inline-block) are the characteristics of inline elements, block elements, code Display:inline-block is to set the elements inline block elements (css2.1 new),, <input The > 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.