Key to HTML and CSS: Box model)

Original article: http://jorux.com/archives/property-4-if-you-love-css/

As the last article in the attribute article, this article describes the key-Box model of HTML and CSS ). the key to understanding the Box model is the margin and padding attributes. Correct understanding of these two attributes is also the key to learning to use css layout.

Note: Why not translate margin and padding? Cause 1: there are no corresponding words in Chinese. Cause 2: even if such words exist, margin and padding must be used when writing css code, if we always use Chinese words to replace them, the concepts of margin and padding will be confusing in actual applications.

If there is a little Html basics, you should understand some basic elements (elements), such as p, h1 ~ H6, br, div, li, ul, img, etc. if these elements are subdivided, they can be classified as top-level elements, block-level elements, and inline elements respectively.

1. Block-level element: a Block-level element can exist independently. Generally, Block-level elements are separated by line breaks (such as a line after a paragraph ends). Commonly Used Block-level elements include: p, h1 ~ H6, div, ul, etc;
2. Inline element: it refers to the presence of other block-level elements that are immediately displayed between connected elements without line breaks. Commonly Used Inline elements include: img, span, li, br, etc;
3. Top-level element: contains html, body, and frameset elements, such as Block-level elements, which are high-level Block-level elements.

Block-level elements constitute the main and key elements of an html, and any block-level element can be explained using the Box model.

Box Model: any block-level element consists of content, padding, background (including background color and image), border (border), and margin. the three-dimensional diagram is as follows (Fig. 1 ):

The stereoscopy is derived from: http://www.hicksdesign.co.uk/(Under the Creative Commons License)

The plot is as follows (Fig. 2 ):

Based on the above two figures, I believe you will have an intuitive understanding of the Box model.

• Three pages in total:
• Previous Page
• 1
• 2
• 3
• Next Page