1. Inline elements and block-level elements

  • Block-level elements: div, P, H1-H6, OL, ul, DL, li, DD, table, form
  • Inline elements: A, BR, I, IMG, input, label, SELECT, SPAN, textarea
  • Inline block elements (inline elements, but width, height can be set) : img input

1. What element can set width and height

  • If I just set one, that’s the same thing as the other one being auto
  • Only block-level elements, and inline block elements can be set to width and height

2. The border elements

  1. Border – color: color | transparent (transparent)
  2. border-style: none|solid|dashed
  3. border-width

Width of border abbreviations: border: | | style color

Different directions: border-top, border-left….

3. The padding padding

  • Padding changes the width and height of the box and cannot be negative

Short for the inside margin property

Padding: value 1 / / four directions are 1 padding: value 1/2 / fluctuation = 1 = 2 padding: value 1 2 value about 3 / / = 1 = 2 = 3 padding under: Value 1 value 2 value 3 value 4 // Up =1 right =2 Down =3 left =4Copy the code

4.margin

Margin: value 1 value 2 // Up/down =1 left/right =2 margin: value 1 value 2 value 3 // up =1 left/right =2 down =3 margin: Value 1 value 2 value 3 value 4 // Up =1 right =2 Down =3 left =4Copy the code

By default, HTML block-level elements have margins body, h1 to h6, p…. Margin can be declared to override the default style

margin:auto

  • To achieve the effect of horizontal center display,
  • The browser calculates the margins,
  • Centered relative to the parent element

5. Box calculation

margin+border+padding+width/height

6.display

Inline: Inline elements have a whitespace solution

  • There are no line breaks between elements
  • Add a parent div element to the outermost elementfont-size:0

Block: The element becomes a block-level element. You can set width, height

The difference between

  • Inline: An element is displayed as an inline element without a newline character before or after it
  • Block: Elements are displayed as block-level elements preceded by newlines
  • Inline-block: An inline block element that is rendered inline but has block-related properties
  • None: This element will not be displayed

7. Inheritance

For style attributes, specify the values of relative attributes to inherit from the parent element by setting the value to inherit