html5 tags are divided into 3 categories: 1. Block-level elements, which are characterized by the ability to set width and height, automatic line wrapping, and the top, bottom, left, and right margins and padding are valid for them; 2. Inline elements, which are characterized by: The width and height cannot be set, and the line will not wrap automatically; 3. Inline block elements are characterized by the ability to set the width and height, and the line will not wrap automatically.
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
Marks in HTML5 are divided into block-level elements, inline elements, and inline block elements.
Inline elements:
The width and height cannot be set.
The margin is invalid up and down, only the left and right are effective; padding is effective and will expand the space.
box-sizing:border-box;Invalid because this property is for the box model.
Will not wrap automatically
Block-level elements:
Able to set the width and height
The top, bottom, left and right margins and padding are all valid for it
Can automatically wrap lines
Multiple block element tags are written together, and the default arrangement is from top to bottom
You can use margin:0 autoCentered alignment
Inline block elements:
will not wrap automatically
can set the width High
The default arrangement is from left to right
You can use text-align:center to make the content relative to To align the parent box horizontally and centrally, such as the img tag, you can use text-align:center to align it in the center relative to the parent box
margin:0 auto Invalid
is arranged horizontally, but all elements will have a gap of 1 space by default, because there is a carriage return and line feed between elements in HTML, and the browser will parse it into a Space.
But the type of label can be converted
display:inline: Convert to Inline elements
display:linline-block are converted to inline block elements
display:block Convert to block-level elements
Master element categories. Now classify the tags we have learned as follows:
##1. Block-level elements
Title< ;/pre>Large quotationSmall quotationDivide blocks< div>
