Summary of 30 April 2020 (II)

Element type

1.1. The inline – block

• You can have elements that have characteristics of both block-level and inline elements

  • Display on the same line as other inline elements
  • You can set the width and height at will
  • The width and height are determined by the content by default

• It can be understood as:

  • Externally, it is an inline element
  • Internally, it is a block-level element

• Common use

  • Allow inline non-replacement elements (such as A, SPAN, and so on) to set width and height at any time
  • Make block-level elements (div, P, etc.) visible on the same line as other elements

1.2. The visibility

• Visibility, which controls the visibility of an element, has two common values:

  • Visible: Displays elements
  • Hidden: Hidden elements

• display: none; And the visibility: hidden; The difference between:

  • visibility: hidden; Even though the element is no longer visible, the element’s box is still there and will still occupy its original position
  • display: none; Not only are the elements invisible, but their boxes are removed, taking up no space

1.3. Overflow

• Overflow is used to control behavior when content overflows

  • Visible: Overflow content is still visible

  • Hidden: The overflow content is clipped directly

  • Scroll: The overflow content is clipped but can be viewed through the scroll mechanism

    • The scrollbar area will always be displayed. The scrollbar area occupies space belonging to width and height

  • Auto: Automatically determines whether to provide the scrolling mechanism based on whether the content overflows

  • There are also overflow-x and overflow-y attributes, which can be set to horizontal and vertical directions respectively

1.4. Spaces between elements

• Currently suggested solutions:

  • 1. Do not leave Spaces between element codes

  • 2. Comment fishing space

  • 3. Set the font size of the parent element to 0, and then reset your own font size in the element

    • This method does not work in Safari

  • 4. Add float to elements (suggestion)

1.5. Points to Note:

• Block-level elements, inline-block elements

  • In general, you can include any other element (such as block-level element, inline element, inline-block element)
  • In particular, the p element cannot contain other block-level elements

• Inline elements (such as A, SPAN, strong, etc.)

  • In general, only inline elements can be included

2. Box model

2.1. Box model

• Each element in HTML can be thought of as a box

  • Content (content)

    • The contents of the box

  • Padding (padding)

    • The space between the edge of the box and its contents

  • Border (border)

    • That’s the border, the edge of the box

  • From the outside (margin)

    • The spacing between boxes and other boxes

2.2. Content-related attributes

• Width: the width of the
• Min-width: indicates the minimum width, which is greater than or equal to min-width regardless of the content
• Max-width: indicates the maximum width. No matter how much the content is, the width is less than or equal to max-width
• Height: height
• Min-height: The minimum height, regardless of the content, the height is greater than or equal to min-height
• Max-height: The maximum height, regardless of the content, the height is less than or equal to max-height

2.3. Interior margin related attributes

• Padding-left: left inside margin
• Padding-right: right inner margin
• Padding-top: Upper inner margin
• Padding-bottom: Lower inner margin
• Padding-top: Shorthand properties for padding-top, padding-right, padding-bottom, and padding-left
• Padding value rule:
  • The value can be top, right, bottom, or left in clockwise direction
  • If left is missing, left uses the value of right
  • If bottom is missing, follow the value of top

2.4. The word – break:

• word-break: break-all; I can wrap the text

2.5. Margin related attributes

• Margin-left: the left margin
• Margin-right: margin-right
• Margin-top: margin-top
• Margin-bottom: margin-bottom
• Margin: short for margin-top, margin-right, margin-bottom, and margin-left
• Value rule of margin:
  • The value can be top, right, bottom, or left in clockwise direction
  • If left is missing, left uses the value of right
  • If bottom is missing, follow the value of top

2.6. Transmission of upper and lower margins

• Margin – top

  • If the top line of a block-level element overlaps the top line of the parent element, the value of the block-level element’s margin-top is passed to the parent element

• Margin-bottom pass (not often used)

  • If the bottom line of the block-level element overlaps the bottom line of the parent element, and the height of the parent element is auto, the margin-bottom value of the block-level element is passed to the parent element

• How do I prevent delivery problems?

  • Padding-top \padding-bottom for the parent element
  • Set the border to the parent element
  • Triggering block Format Context (BFC)
    • enchantment
    • Float ready to go
    • Set overflow for an element to Auto \ Hidden

• Advice:

  • Margin is generally used to set the spacing between sibling elements
  • Padding is generally used to set the spacing between parent and child elements

2.7. Folding of upper and lower margins

• The vertical direction of two adjacent margin(margin-top, margin-bottom) may be merged into a single margin. This phenomenon is called collapse.

• A horizontal margin(margin-left, margin-right) will never collapse

• Calculation rule of final value after folding:

  • The two values are compared and the larger value is taken

• How to prevent margin collapse?

  • Set margins for only one element (common)

2.8.border related properties

• Border width

  • Border-top-width, border-right-width, border-bottom-width, border-left-width
  • Border-width is a shorthand attribute for the above four attributes

• Border color

  • Border-top-color, border-right-color, border-bottom-color, border-left-color
  • Border-color is a shorthand attribute for the above four attributes

• Border style

  • Border-top-style, border-right-style, border-bottom-style, border-left-style
  • Border-style is a shorthand attribute for the above four attributes
  • Bootstrap and solid are generally used

• border: 10px solid yellow; Width, style, color

• Border shape:

  • The shape of the border might be:
    • Rectangle, trapezoid, triangle, etc

• Notes for non-replacement elements in the line:

  • The following attributes do not apply to inline non-replacement elements

    • Width, height, margin-top, margin-bottom

  • The following attributes have special effects on non-replacement elements in the line

    • Padding-top, padding-bottom, border up and down

2.9. The rounded

• CSS attribute: border-x-x-radius

• The attributes related to fillet radius are:

  • Border – the top – left – the radius, border – top – right – the radius
  • Border – bottom – left – the radius, border – bottom – right – the radius

• Border-x-x-radius defines the radius of a quarter ellipse

  • border-top-left-radius: 50px 50px;

  • The first value is the horizontal radius

  • The second value is vertical radius (if not set, follows the value of horizontal radius)

• Set percentage

  • border-top-left-radius: 50%;
  • Refer to the width of the border-box

• Border-radius is an abbreviated attribute

  • border-radius: 50px;

  • /* emphasis: border-radius refers to the current element’s border+padding+width */

    border-radius: 50%;