Block elements
1. Commonly used block element labels include: DIV, P, ul, Li, H1 ~ H6, DL, DT, DD, etc
2. Support all styles
3. You can set the width. If the width property is not set, the width is 100% of the parent width by default
4. The box occupies a row, even if the width is set
Box does not set the width:
CSS will automatically set the width to 100% of the parent level, and an exclusive line, add the width to the normal display of the set width
2. Inline elements (inline elements)
Note: Common inline elements: A, span, em, B, strong, I
1. No width, height, margin, padding, as shown in Figure. Box2 has set margin, but it does not work. Padding above and below is set to 0 because it doesn’t work. Forcing it will cause rendering bugs. Padding left and right are in effect
2. The width and height are determined by the content of the element. If it is a picture, it is the picture size, and if it is 30, it is 30
3. The boxes are in a row
4. Box spacing is automatically generated when code wraps
Solutions:
Set font size to 0 for the parent element and reset font size for the child element:
Parent:
Child:
Child:
Effect:
The effect of
5. The child element is an inline element, and the parent element can be set to text-align
Parent element. Box3:
Child element:.box3a
Child element:.box3a
Add the text – align: center; The inline element within the back block element is centered against it
3. Inline block elements (block elements + inline elements)
1. Support all styles
2. You can set your own width and height, or if the element doesn’t have one, it’s up to the content
3. The boxes are side by side
4. Code wrap, box spacing
5. The parent element can use text-align to set the manner of its children
Use display to convert an inline element to an inline block element, allowing it to set width, margin, and padding
Element to add:
More display attributes:
It can switch between block elements, inline elements and inline fast elements
