block level element
Common block-level elements
div – commonly used block level is easy, and is also the main label of CSS layout
form – interactive form
h1 ~ h6 – title
hr – horizontal divider
p – paragraph
table – table
ul – unordered list
Block-level element characteristics
1. Dominate one line, always start on a new line
2. The default width is 100% of its parent element, unless a width is set
3. Height, line height, outer margin, and inner margin can all be set
4. Yes Holds other inline elements or other block elements
inline element
common inline elements
a – anchor link
img – image
input – input box
label – table label
select – item selection
span – commonly used inline container, defining text blocks
strong – bold emphasis
textarea – multi-line text input box
u – underline
Inline element characteristics
1. It is on one line with other elements, and it will automatically wrap when it encounters the boundary of the parent element.
2. The width is as wide as the content and cannot be changed (only rely on its own font size or image size to support the structure) 3. Inline
elements only Can accommodate text or other inline elements
4. Width is invalid and height is invalid, which can be set by setting line-height. Setting margin is only valid for left and right, but invalid for top and bottom. Setting padding is only valid for left and right, but invalid for top and bottom (in the developer tool You will see the margin and padding of the box model, but if you add a block-level element below or above the inline element, you will find that the upper and lower padding-top/bottom and margin-top/bottom have no effect; but if you set the background for the inline element, You will find that the top and bottom padding is also colored, because the background includes the border)
5. When setting the positioning for the inline element, the margin and padding of the inline element will affect the positioning (of course, the top and left will affect the positioning at this time)
inline-block element
Features of inline-block elements
1. Arranged in a row with other elements
2. The height, width, row height, top and bottom margins of the element can be set
3. There is a default spacing between elements
4. With a box model
Note: an inline element and an inline block element are in a row The position of the inline element will be affected by the margin of the inline block element, because they must be on the same line (and the height and margin of the inline block element will also affect the next line)