CSS box model, css box

CSS box model, css box

December

Chapter 4 css beginners

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

2. The real method for displaying HTML elements as CSS display boxes is called "visual formatting ". The visual formatting method tells the browser how to display HTML content on the screen.

3. Element type:

(1) block elements: start and end with a new line. <Div>, <blockqute>, <br>, and so on.

(2) inline element (inline): not exclusive to a row, but contained in a text stream. <Em>, <input>, <a>, and .

4. display attributes

You can change the element type by setting the display property value.

Display: none; not displayed

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 HTML tags, a box without HTML tags is generated, which is called an anonymous box. The style settings of the anonymous box are the same as those of the contained box.

Eg.

6. In HTML, the

7. Display Properties of the box

Margin: margin

Border: border

Fill: padding

(1) margin: the spacing between two boxes. Margins are always transparent.

Note: The overlap margin, that is, the boxes in two vertical directions. They use the maximum value between the two elements in the vertical direction. The margin only overlaps block elements, and overlaps the vertical direction, not the horizontal direction.

(2) border:

Border attribute settings: selection character {border: size style color ;}

Border-width	Specify the Border width.
Border-style	Specifies the border style.
Border-color	Specifies the border color.
Inherit	It specifies that the border attribute settings should be inherited from the parent element.

 

Width:

Thin	Define the border.
Medium	Default value. Define a moderate border.
Thick	Define a thick border.
Length	You can customize the Border width.
Inherit	Specifies that the Border width should be inherited from the parent element.

 

Style:

None	Defines borderless borders.
Hidden	Same as "none. Except for tables, hidden is used to resolve border conflicts.
Dotted	Defines a dotted border. It is displayed as a solid line in most browsers.
Dashed	Define the dotted line. It is displayed as a solid line in most browsers.
Solid	Define a solid line.
Double	Defines a double line. The width of the double line is equal to the value of border-width.
Groove	Defines the 3D groove border. The effect depends on the value of border-color.
Ridge	Defines a 3D ridge border. The effect depends on the value of border-color.
Inset	Defines the 3D inset border. The effect depends on the value of border-color.
Outset	Defines the 3D outset border. The effect depends on the value of border-color.
Inherit	It is required 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 the two lines plus the space between the two lines is equal to the border-width value. However, the CSS specification does not mean whether one line is thicker than the other or whether the two lines should be the same or whether the space between lines should be thicker than the line. All these are determined by the user agent, and the Creator has no influence on this decision. (W3School)

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

Note:

(1) table Unit <td> that is, it is neither an inline element nor a block element, and the display value of the table unit is display: table-cell. The table-cell element cannot have margins.

(2) Governor em: in CSS, a row length is defined as a measurement equal to the position size. It is a square with the height and width equal to the font height.