1. Document flow and box model

Document Flow (Normal flow)

  • A web page is a multi-layer structure, one layer on top of the other
  • CSS allows you to style each layer individually
  • As a user, you can only see the top layer
  • The bottom layer of these layers is called document flow, and document flow is the basis of the web page and the elements that we create are arranged in document flow by default
  • For us elements have two main states: in/out of document flow (out of document flow)

A block element

  • Block elements have a single row (vertical from top to bottom) on the page
  • The default width is the entire width of the parent element.
  • Default height is supported by content (child elements)

Inline elements

  • Inline elements do not occupy a single line of the page, only their own size
  • Inline elements are arranged horizontally from left to right on the page. If there are not enough inline elements in one line, the elements are moved to the second line and continue to be arranged from left to right.
  • The default width and height of inline elements are both stretched out by the content

The box model

When a document is laid out, the browser’s rendering engine represents all elements as rectangular boxes, according to one of the standards, the CSS Basic Box Model. CSS determines the size, location, and properties of these boxes (such as color, background, border size…). .

Each box is composed of four parts (or regions), whose utility is defined by their respective edges: Content Edge, Padding Edge, Border Edge, and Margin Edge. As shown in the figure, four areas are formed: 3 Content area, 2 Padding inside, 1 Border, and 4 Margin.

1,2,3 determine the size of the box on the page, and 4 determine the position of the box.

Content, all the children of the element and the text content are arranged in the content area and the size of the content area is set by the width and height properties. Width sets the width of the content area. Height sets the height of the content area

Border, the border belongs to the edge of the box, the inside of the border belongs to the inside of the box, outside the border is the outside of the box, the size of the border will affect the size of the whole box

To set borders, you need to set at least three styles:

  • Border-width of the border
  • The border color is border-color
  • Border-style for the border

Border-width can be used to specify the width value of the border in four directions clockwise

  • Four values: up, right, down, left
  • Three values: up, left, right, and down
  • Two values: up, down, left and right
  • One value: up, down, left and right
Border-color can also be omitted, > > < span style = "font-size: 16px! Important; color: RGB (51, 51, 51); font-size: 16px! Important The border short property allows you to set all the related styles of the border at the same time, in no order: border: 10px red solid;Copy the code

Note: Margin affects how much space the box actually takes up

2. Horizontal layout of elements

The horizontal layout of an element is determined by seven attributes;

  • margin-left
  • border-left
  • padding-left
  • width
  • padding-right
  • border-right
  • margin-right

The horizontal layout of an element in its parent must satisfy the following equation

Add the 7 attribute values = the width of the parent element’s content area

If the set attribute values are not met, the restriction is excessive and one of the attribute values is automatically adjusted.

Adjustment:

  • If none of the seven values is auto, the browser automatically adjusts the margin-right value so that the equation is satisfied
  • Three of the seven values are set to auto width margin-left maring-right
  • If something is auto, it automatically adjusts to auto to make the equation work
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800 0 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 600 200 + 0 + 0 + auto + 0 + 0  + 200 = 800 auto = 400 auto + 0 + 0 + 200 + 0 + 0 + 200 = 800 auto = 400 auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto =  300Copy the code
  • If you set a width and a margin to auto, the width is adjusted to the maximum and the margin set to auto is automatically 0
  • If all three values are set to auto, the margin is 0 and the width is maximum.
  • If you set both margins to auto with a fixed width, the margins are set to the same value. So we often use this feature to center an element horizontally in its parent.
width:xxxpx; margin:0 auto; Horizontal centerCopy the code

3. Vertical layout

Child elements are arranged in the content area of the parent element. If the size of the child element exceeds the parent element, the child element will overflow from the parent element. Use the overflow attribute to set how the parent element will handle the overflow child element.

Optional: visible, default The child element will overflow from the parent element, display hidden outside the parent element the overflow content will be clipped not to display Scroll generates two scrollbars to view the complete content auto Generates scrollbars as neededCopy the code

4. Overlap (fold) of vertical margins

Adjacent vertical margins overlap

- Sibling elements - Adjacent vertical margins between sibling elements take the greater value between them * (both are positive) - special cases: If the adjacent from the outside one is a negative, is to take both from outside and if the adjacent are negative, then take the absolute value of the larger - both from outside of overlap between siblings, is advantageous for development, so we don't need to do a deal with - father and son, father and son elements between adjacent from the outside, child elements will be passed to the parent element (from outside)Copy the code

Folding of parent and child margins affects the layout of the page and must be addressed

5. Box model of inline elements

  • Inline elements do not support setting width and height
  • Padding can be set for inline elements, but vertical padding does not affect the layout of the page
  • A border can be set for inline elements, and a vertical border does not affect the layout of the page
  • Margins can be set for inline elements, and vertical margins do not affect the layout

Use display to set the type of the element to be displayed.

  • Inline sets the element to an inline element
  • Block sets the element to a block element
  • Inline-block sets the element to an inline block element. Inline blocks that can set width and height without monopolizing a row
  • Table sets the element to a table
  • The None element is not displayed on the page

Use visibility to set the display state of the element. Optional values:

  • Visible default, the element is displayed normally on the page
  • Hidden Elements are hidden from view in the page, but still occupy the position of the page

6. Default styles

Default style:

  • Typically, browsers set some default styles for elements
  • The presence of a default style affects the layout of the page, and it is often necessary to remove the browser’s default style when writing web pages (PC pages)
<! -- <link rel="stylesheet" href="./css/reset.css"> -->
<link rel="stylesheet" href="./css/normalize.css">
Copy the code

Reset style sheet: designed to reset the style of the browser. Reset.css removes browser default styles directly (common); Normalize.css consolidates the default styles.

By default, the size of the box visible box is determined by the content area, the inside margin, and the border

Box-sizing sets the size of the box (width and height).

Optional value:

  • Content-box defaults, width and height to set the size of the content area

  • Border-box width and height are used to set the size of the entire box visible box

    Width and height refer to the total size of the content area and inner margins and borders

7. Silhouette and rounded corners

Box-shadow is used to set the shadow effect of elements. Shadow does not affect page layout First value Horizontal offset Set the shadow's horizontal position positive move to the right negative move to the left second value Vertical offset Set the shadow's horizontal position positive move down negative move up third value The blur radius of the shadow fourth value the shadow's color box-shadow: 10px 20px 30px rgba(0, 0, 0, .3) ;Copy the code

/* border-radius: set the radius of the circle set by the rounded corners */ border-radius: 50%Copy the code