For a beginner, are the html layout elements really clear?

Problem Description

For beginners, when we are working on projects, there will always be a kind of confusion. For some labels, we always don’t know where to use which label, or we don’t know the inline element (inline element) and block element (blocky). Element) and inline block element (inline block element) what is the difference. Next, let's summarize it in detail.

1. Elements in the line

The common ones are span, a, b, strong, i, em, br, sub, sup, u, label, and font. The
property itself is display: inline
and other inline elements are displayed in one line from left to right, and you cannot directly control the width, Height and other related css attributes, but you can directly set the left and right values ​​of the inner and outer margins

The width and height are determined by the size of the content (text, pictures, etc.)

Can only hold text or other inline elements, not nested block-level elements

Two, block-level elements

Common block-level elements are
div, h1-h6, hr, menu, ol, ul, li, dl, table, p, and the
attribute of from itself is display: block

Occupy a row, each block-level element will restart from a new row, from top to bottom layout can directly control the width, height and other related css attributes, such as (padding series, margin series)

Without setting the width, the width of the block-level element is the width of the content of its parent element

Without setting the height, the height of the block-level element is the height of its content

Three, in-line block elements

The common ones are img, input, and textarea whose
attributes are display: inline-block

Inline block elements combine the characteristics of the first two but have their own trade-offs.

Do not wrap

Able to recognize width and height, line-height, padding, marign

The default arrangement is from left to right

This blog is a compilation of your own study notes. It is only for learning and communication, and should not be used for commercial purposes. If there is any infringement, please contact the blogger to delete it. The blogger QQ: 1105810790