Article Directory
1. Block-level elements
1. Always start from a new line, that is, each block-level element occupies a single line, and is arranged vertically downward by default;
2. The height, width, margin and padding are all controllable, and the settings are valid, with margin effects;
3. The width is not When setting, the default is 100%;
4. Block-level elements can contain block-level elements and inline elements.
2. Inline elements
1. It is in a row with other elements, that is, the inline elements and other inline elements will be arranged on a horizontal line;
2. The height and width are uncontrollable, and the settings are invalid and determined by the content.
Setting the margin left and right is effective and has margin effects;
setting margin up and down will expand the space but will not produce margin effects (that is, the box model margin-top/bottom has values, but there is no margin effect on the page).
Setting padding left and right is effective, setting padding up and down will expand the space but will not produce margin effect (same as above).
In short: 1. The padding attribute of an inline element is only useful for the left and right of the element, and it is useless for the top and bottom (visually it will have an effect, but in fact the setting is invalid. It will not have any effect on the surrounding elements. Influence.)
2. The margin attribute of inline elements is only useful for the left and right of the element, and is useless for the top and bottom
3. Inline block elements (combining the characteristics of the former two)
(1) Does not automatically wrap, and will be arranged on a horizontal line with other inline elements;
(2) The height, width, margin and padding are all controllable, the settings are valid, and there is a margin effect;
(3) The default arrangement is from left to right.
4. Conversion of three elements
You can use display to convert element attributes
display: block; convert to block element
inline; inline element
inline-block; inline block element (warning if used with float)
5. Commonly used inline elements
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>、<br>、<input>、<label>、<select>、<textarea>、<button>
6. Commonly used block-level elements
strength>、
6. Commonly used block-level elements
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>、<dd>、<form>、<table>、<header>、<footer>、<address>、<article>、<hr>