HTML Practice--ife Task 02 (Box model)

1. Element classification

In CSS, tag elements in HTML are broadly divided into three different types: block elements , inline elements (also called inline elements) , and inline block elements .

(1) The commonly used block elements are:

<div>, <p>,

Block-level element features:

• Each block-level element begins with a new row, and the subsequent element also starts another line. (True overbearing, one block-level element exclusive row)
• The height, width, row height, and top and bottom margins of an element can be set.
• The width of the element, if not set, is 100% of the parent container (and the width of the parent element), unless a width is set.

  A{display:block;} Inline elements can be changed to block-level elements

(2) The commonly used inline elements are:

<a>, <span>, <br>, <i>, <em>, <strong>, <label>, <q>, <var>, < Cite>, <code>

Inline element Features:

• And the other elements are on one line;
• The height, width and top and bottom margins of the element are not set;
• The width of the element is the width of the text or Picture it contains, and it cannot be changed.

  A{display:inline;} You can turn block-level elements into inline elements

(3) commonly used Inline block Elements are:

, <input>

Inline block (inline-block) elements feature:

• And the other elements are on one line;
• The height, width, row height, and top and bottom margins of an element can be set.

2. Box Model Overview

The inner part of the element box is the actual content, and the content is directly surrounded by the padding. The inner margin renders the background of the element. The edge of the padding is a border. Outside the bounding rectangle is the margin, and the margin is transparent by default, so it does not obscure any subsequent elements.

3. CSS Padding

The inner margin of an element is between the border and the content area. The simplest property that controls the area is the Padding property.

The CSS padding property defines an empty area between the element's border and the element's content.

4. CSS Border

The bounding rectangle (border) of an element is one or more lines around the content and padding of the element.

The CSS border property allows you to specify the style, width, and color of the element's border.

5. CSS Margins

An empty area around the border of an element is the margin. Setting the margin creates an extra "blank" outside the element.

The simplest way to set the margin is to use the margin property, which accepts any length units, percentages, or even negative values.

Note

When two vertical margins meet, they form an outer margin.

The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.

HTML Practice--ife Task 02 (Box model)