Block-level element Row Element and display attribute, element display attribute

Block-level element Row Element and display attribute, element display attribute

1. What is tag semantics? -> Make appropriate use of tags

-> What are common HTML tags? (Block label and intra-row label)

-> What is the difference between block tags and intra-row tags? (There are eight common differences)

1) inline element: It is on one line with other elements. The height, width, top, and bottom margins of the element cannot be set. The height of an element is the width of the text or image it contains and cannot be changed.

-> Intra-Row Labels: <a> <span> <br> <I> <em> <strong> <label> <q> <var> <cite> <code>

2) block-level elements: each block-level element starts from a new row, and other elements start from another row. You can set the element height, width, row height, and top and bottom margins. If the element width is not set, it is 100% of its parent container (and the width of the parent element is always) unless a width is set.

-> Common block-level elements include: <div> <p>

3) inline block element: and other elements are on one line: the height and width of the element, the row height, and the top and bottom margins can be set. Commonly used inline block-level elements include: <input>

2. What common attribute values does display have? What do they mean? What do you need to pay attention?

The display property values include: none | inline-block | list-item | run-in | table | inlne-table | table-row-group | table-header-group | table-footer- group | table-row | table-column-group | table-column | table-cell | table-caption | inhert

1) none: the element is not displayed, and the actual space of the element is not retained. Another visiblity: hidden; is reserved for element space.

2) inline: Default attribute of display. Displays the element as an inline element without line breaks before and after the element. We know that the inline element cannot be set with a width or height, so once the display attribute of the element is set to inline, setting the width or height of the attribute is useless. In this case, the height affected is generally the font-size and padding of the internal elements.

3) block: displays the element as a block-level element with a line break before and after it. After being set to block, you can set the width and height of the element. The element occupies only one row.

4) inline-block: the block-level element in the row. This element integrates the features of inline and block. When does it inline the element, you can set the width and height.

-> What specifications do you follow when writing code in a project? (36 suggestions for Yahoo optimization)

5) Other display attributes are not very common.

List-item: This element is displayed as a list.

Run-in: This element is displayed as a block-level element or Inline element based on the context.

Table: This element is displayed as a block-Level table (similar to <table>), with a line break before and after the table.

Inline-table: This element is displayed as an inline table (similar to <table>) without line breaks before and after the table.

Table-row-group: This element is displayed as a group of one or more rows (similar to <tbody> ).

Table-header-group: This element is displayed as a group of one or more rows (similar to <thead> ).

Table-footer-group: This element is displayed as a group of one or more rows (similar to <tfoot> ).

Table-row: This element is displayed as a table row (similar to <tr> ).

Table-column-group: This element is displayed as a group of one or more columns (similar to <colgroup> ).

Table-column: This element is displayed as a cell column (similar to <col>)

Table-cell: This element is displayed as a table cell (similar to <td> and <th>)

Table-caption: This element is displayed as a table title (similar to <caption>)

Inherit: specifies that the value of the display attribute should be inherited from the parent element.

 

 

3. There is a box in the page. I will first let it disappear into our field of view. How can you do this?

-> Zero transparency (opacity/filter-> other functions of filter)

-> Display: none

-> Visibility: hidden (what is the difference between display: none and visibility: hidden ?)

-> The width and height are zero.

-> After position is set, make top/left a sufficient negative value (which attribute values are commonly used in position? What are the details)

-> Set z-index to hide other elements.

-> The background color is consistent with the overall background color of our page (which attribute values are commonly used in background ?)

-> Enough negative margin values

...