Block-level elements, the elements row-level understanding and application

Block-level elements

1. The block elements on a separate line, only after a separate line element, two adjacent row of block elements can not be shared.

2. The height of block-level elements of its elements, the width, height and top bottom margin line can all be set.

3. The width of the element, if not set, the default width of the parent element.

4. The block elements corresponding attribute display: block

Common block level elements are:

  <address>   <article>  <p>

<Aside> // content outside the defined content can interpret the contents of a title or subtitle. Not automatically indent

<Audio> // audio tag <blockquote> longer defined reference content, there are first-line indent.

<Canvas> // Drawing tag.

<Caption> Defines a table caption,

<Dd> Item Description table <div> define the flow of the document summary, the label box model. <Dl> tag definition list. Project title <dt> The definition list

Border detail <details> element defines <fieldset> elements define a single <figcaption> defined figure elements here, packet <figure> defined media content, and titles.

<Footer> defined section or page footer <form> Form <h1> - <h6> defines html header <header> <hr> defined horizon

Title <legend> element defined fieldset <li> Customize columns <menu> // define a list or menu is not supported in all major browsers menu elements.

Measure the <meter> defines a predefined range <nav> defined Navigation <noframes> define alternate content for a user is not supported by the frame

<Noscript> define alternate content for users do not support client-side scripting of

<Ol> ordered list is defined, <output> define some types of output

<Pre> preformat tag <section> tag paragraphs <table> Table <tbody> form the primary content <td> table column <tfoot> Footnote tag <th> tag table header 

<Thead> table header tag content <time> Date tag <tr> table row tag <ul> unordered list tag

Row-level elements 

1. The line may be shared with other elements, a separate line is not necessary.

2. The height of the row-level elements, width, top, bottom margin can not be set.

The width of the picture is the text it contains 3. The width of the element can not be changed.

4. row corresponding to the element attribute display: inline

Row-level common elements:

<a> <abbr> tag Acronym <acronym> defines only the acronym <b> bold <bdo> Text direction

<Big> Queen <br> simple text wrapped <button> button <cite> reference

<Code> tag Code <command> command button <dfn> tag // Project Description to minimize the use <del> deleted text definitions 

<Em> emphasized text defined <i> italics <img> define an image <input> defined input <kbd> Keyboard define <label> input denoted

<Mark> is defined with the marked text <pregress> defining any type of task progress <q> is defined short Applications <samp> computer code sample

<Select> drop-down lists <small> small text <span> section of the document <strong> emphasize the text label <sub> define the subscript text <sup> Standard text

<Textarea> textbox 

Conversion elements and row-level block-level elements

display: inline block element may be converted to line-level elements, display: block-level element rows can be converted to block-level elements.

display: inline-block may be set as a block element - row-level elements.

Reproduced in: https: //www.jianshu.com/p/530a1aa5e31d

Guess you like

Origin blog.csdn.net/weixin_34293141/article/details/91286880