CSS box model

2016-10-22

"CSS Beginner's Classic" Chapter 6

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

2. The real way that HTML elements are displayed as CSS display boxes is called "visual formatting method". Visual formatting tells the browser how HTML content should be displayed on the screen.

3. Element type:

(1) Block element (block): Start and end with a new line.

, ,
, etc.

(2) Inline element (inline): It does not occupy an exclusive line, but is included in the text flow. , , , , etc.

4.display attribute

You can change the type of element by setting the display attribute value

display:none;Do not display

display:block; set to block element

display:inline; set to inline element

5.Anonymous box

When a tag contains mixed content, such as text and some HTML tags, a box without HTML tags will be generated, called an anonymous box. An anonymous box is styled the same as its containing box.

eg.

Hello World!

As can be seen from the picture: the text Hello is an anonymous box.

6. In HTML, the tag is defined as display:none;. So we cannot see the content of the tag in the page.

7. Display properties of the box

Margin: margin

Border: border

Padding: padding

(1) Margin: the distance between two boxes. Margins are always transparent.

Note: Overlapping margins, that is, two vertical boxes, use the maximum value between the two elements for their vertical spacing. Margins only overlap on block elements, and they overlap vertically, not horizontally.

(2) border:

border attribute settings: 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 setting of the border attribute should be inherited from the parent element.

Width:

thin	Define thin borders.
medium	Default. Define a medium border.
thick	Define thick borders.
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	Define borderless.
hidden	Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts.
dotted	Define dotted borders. Renders as a solid line in most browsers.
dashed	Define dashed line. Renders as a solid line in most browsers.
solid	Define solid line.
double	Define double lines. The width of the double line is equal to the value of border-width.
groove	Define 3D groove border. The effect depends on the value of border-color.
ridge	Define 3D ridge border. The effect depends on the value of border-color.
inset	Define 3D inset border. The effect depends on the value of border-color.
outset	Define 3D outset border. The effect depends on the value of border-color.
inherit	Specifies that the border style should be inherited from the parent element.

Description

The most unpredictable border style is double. It is defined as the width of two lines plus the space between the two lines equal to the border-width value. However, the CSS specification does not say whether one of the lines is thicker than the other or whether both lines should be equally thick, nor whether the space between the lines should be thicker than the line. All of this is decided by the user agent, and the creatives have no influence on this decision. (W3School)

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

Attention:

(1) Table cell

is neither an inline element nor a block element. The display value of table cell is display:table-cell. table-cell elements cannot have margins.

(2) Line length em: In CSS, a line length is defined as a measurement equal to the position size, which is a square with a height and width equal to the height of the font.