CSS Box model

2016-10-22

"CSS Primer Classic", chapter 6th

1. Each HTML element corresponds to a display box, but not all elements are displayed on the screen.

The real way that 2.HTML elements display a box for CSS is called "visual formatting." Visual formatting tells the browser how to display HTML content on the screen.

3. Element type:

(1) block element: Start and end with a new line. <div>,<blockqute>,<br> and so on.

(2) inline element (inline): There is no exclusive line, but is contained within the text stream. <em>,<input>,<a>, and so on.

4.display Properties

You can change the type of an element by setting the Display property value

Display:none; do not display

Display:block; set as a block element

Display:inline; set as inline element

5. Anonymous Box

When a label contains mixed content, such as text and some HTML tags, it produces a box without HTML tags, called an anonymous box. The style setting for an anonymous box is the same as its containing box.

Eg.

6. In HTML, the,

7. Display Properties of the box

Margin: Margin

Border: Border

Fill: Padding

(1) Margin margin: that is, the spacing between two boxes. Margins are always transparent.

Note: Overlapping margins, which are two vertically oriented boxes, use the maximum value between two elements in the vertical spacing. Margins overlap only on block elements, and they overlap in the vertical direction, not horizontally.

(2) Border border:

Border property setting: Selector {border: size style color;}

Border-width	Specifies the width of the border.
Border-style	Specifies the style of the border.
Border-color	Specifies the color of the border.
Inherit	Specifies that the settings for the border property should be inherited from the parent element.

Width:

Thin	Defines a thin border.
Medium	Default. Defines a medium border.
Thick	Defines a thick border.
Length	Allows you to customize the width of the border.
Inherit	Specifies that the border width should be inherited from the parent element.

Style:

None	Defines no border.
Hidden	Same as "none". Except when applied to tables, hidden is used to resolve border conflicts for tables.
Dotted	Defines a point border. Renders as solid lines in most browsers.
Dashed	Defines a dashed line. Renders as solid lines in most browsers.
Solid	Defines a solid line.
Double	Define two lines. The width of the double line equals the value of border-width.
Groove	Defines a 3D groove border. The effect depends on the value of the Border-color.
Ridge	Defines a 3D ridge-shaped border. The effect depends on the value of the Border-color.
Inset	Defines a 3D inset border. The effect depends on the value of the Border-color.
Outset	Defines a 3D outset border. The effect depends on the value of the Border-color.
Inherit	Specifies that the border style should be inherited from the parent element.

Describe

The most unpredictable border style is double. It is defined as the width of the two lines plus the space between the two lines equals the Border-width value. However, the CSS specification does not say whether one of the lines should be as thick as another or two lines, or whether the space between the lines should be thicker than the line. All of this has a user-agent decision, and the creator has no effect on the decision. (W3school)

(3) Fill padding: The space around the content. The fill is always the same as the background color of the content itself.

Attention:

(1) The table cell <td> is not an inline element or a block element, and the display value of the table cell is Display:table-cell. Table-cell elements cannot have margins.

(2) Governor em: In CSS, a governor is defined as a measure equal to the position size, which is a square, height and width equal to the height of the font.

CSS Box model