Home > Article > Web Front-end > 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.
(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.
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
(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.