• Layout: Divide the page into blocks and arrange them left, middle, right, top, middle, and bottom.
  • Layouts are usually divided into:
  1. Fixed width layout, usually 960/1000/1024px width
  2. Non-fixed width layout, mainly based on the principle of document flow layout (generally used in mobile phones).
  3. Responsive layout: fixed width on PC, variable width on mobile, a hybrid layout.
  • Two ideas of layout:
  1. From big to small: Set the big picture first, then refine the small layout of each part.
  2. From small to large: Complete small layouts first and then combine them into large ones.
  • There are three styles of CSS layout

1. The float layouts

steps

  1. Add float: left and width to the child element
  2. Add.clearfix to the parent element

Some lessons:

  • More experienced people will leave some space or leave the last one at width
  • There is no need to be responsive because there is no Internet Explorer on the phone and this layout is specifically for Internet Explorer.
  • IE 6/7 exists double margin bug, there are two solutions: one is for IE 6/7 margin half; Second, add a display: inline-block.
  • When using the border debugging method, sometimes the border will interfere with the width. You can change it to outline (does not take up space).
  • A negative margin is used when float averages the layout.
  • Float requires the programmer to calculate its own width and is inflexible.

2. The flex layout

Tutorial: css-tricks.com/snippets/cs…

  • Flex containers and items

  • The Style of flex Container:
  1. Make an element a Flex container

  1. Change the flow direction of items (spindle)

  1. Change the fold line

  1. Spindle alignment

  1. Secondary axial alignment

  1. Multi-line content (rarely used)

  • Flex Item property
  1. Order: Controls the order in which items appear in a container.

  1. Flex-grow: This defines the ability of an item to grow as necessary. It accepts unitless values as proportions. It determines the amount of available space that item takes up inside the flex container.

  1. Flex-shrink: This defines the ability of an item to shrink when necessary.
  2. Flex-basis: Controls the base width.
  3. Align-self: This allows the default alignment (or alignment specified by align-items) to be overridden for individual items.

Practice using Flex by playing The Flex Frog game:flexboxfroggy.com/#zh-cn

  • The grid layout

Tutorial: css-tricks.com/snippets/cs…

Use Grid for two-dimensional layout.

You can practice using grid with a simple game: Grid Garden cssgridgarden.com/#zh-cn