[Base] to regain the block-level element and the row element

Recently he sets himself a small target, a week review the basics of a point, and an output Notes. To see if I can stick to it. ^ _ ^

Block-level elements

Independent block elements occupy space, it has the following characteristics:

• Exclusive one or more rows
• Width, height, inner and outer margins may be provided, and efficient
• The default is 100% of the width of the parent container
• As a parent container and other elements within the block-level row elements (text-based block elements is not recommended as another block elements containers, such as p, h1~h6)

Common block level elements are:div, h1~h6, hgroup, p, table, form, ul, ol, hr, header, main, footer, aside, article, section, video, audio, canvas, pre, option

Row element

Inline elements do not occupy discrete spaces, the width and height distraction on their own content, and the other rows of elements belonging to the same parent container are sequentially arranged in the same row, according white-spaceto decide whether to change the value of the attribute row. They have the following characteristics:

• Not on its own line, but time is too long according to white-spacethe control line breaks.

• Width, height setting is invalid. Inside and outside margins can only be set right and left direction (set padding-top, padding-bottom, margin-top, margin-bottomis invalid). But one thing to note, padding-topand padding-bottomtheir own expressive effect, but does not affect the layout of the surrounding elements, plug-speak:

  

• Width is determined by the content itself.

• Inline elements is not recommended as a container block-level elements ( atags exceptions)

Common inline elements include:span, i, code, strong, a, br, sub, sup, label

For an element of uncertainty, you can set widththe next test, if widthnot effective, indicating that it is inline elements.

Block-level elements inline

Inline block elements will not be a separate line, but the width may be set high, like the inner and outer margins.

Common inline block-level elements are:input， button, img, select, textarea

CSS display conversion

display: block;

Let elements of the performance of block-level elements

display: inline;

Let elements of performance inline elements

display: inline-block;

Let the performance of inline elements block-level elements

---

Starting link

Sweep the applet code below or search Tusi博客instantly read the latest articles!