Box model:
Box classification: Different elements may produce different types of boxes. What kind of box an element produces depends on its CSS display property
- display:none---- does not generate a box, that is, does not occupy page space
- display: inline----line box
- display:block----block box (full line)
- display:inline-block----inline block box
Composition of the box:
- margin: the outer margin, the distance from other boxes
- border: border
- padding: padding, the distance between the border and the content
- content: content, the width and height of the content
Block box related CSS properties:
content
- width (width): non-inheritable, default value auto, temporarily considered to fill the entire available area, other units: px--pixel, absolute length, fixed length; em--relative length (multiple of parent length); %-- Percentage (percentage value of parent length) word segmentation: when the content exceeds the width, the content will be automatically truncated and wrapped
- height (height): non-inheritable, the default value is auto, other values are: px, em, %; the maximum and minimum width and height are to ensure the layout of the current page and improve the user experience, the PC and mobile terminals should be set separately (min -height, max-height, min-width, max-width) rem units are relative to HTML (root element)
padding
Padding, indicating the distance between the border and the content, is divided into four directions: top (top), right (right), bottom (bottom), and left (left). padding-top: top padding, non-inheritable, default value 0px, other values: em, % (take the multiple and percentage value of the parent's width)
border
The border, which divides the inner and outer boundaries, consists of four parts: top (top), right (right), bottom (bottom), and left (left)
Relevant CSS (style) properties:
- border-style: border style
- border-color: border color, the default value is to follow the text
-
border-width: The thickness of the border, not inherited, the default value is medium (medium thickness), the value: px, em
Transparent color value: transparent, solid line: solid, dotted line: dashed, dotted line: dotted, double solid line: double
border-top: top border, shorthand order (thickness style color)
Negative selector: write :not(:last-child)--that is, apply all but the last one
margin
Margin, indicating the distance between the border and the adjacent box, divided into top (top), right (right), bottom (bottom), left (left), the default value: 0px