Check whether your browser supports the feature caniuse.com

The sketch tool

– Ink knife – Adobe XD

Website recommends

-Google Keywords +MDN -CSS Tricks – Blog by Zhang Xinxu

Practice material

1.PSD Freepik search PSD web 365PSD UI suite 2. Dribbble.com top designer community can be mimicked with the naked eye

Border debugging method

2. Add “border” to the element. 3. A selector error or syntax error occurs. 4. See if the border is as expected, otherwise try line by line 5. Bug solved to remove border ## style syntax

Selector {property name: property value; /* comments */}Copy the code

@ syntax

@charset "UTF-8";
@import url(2.css);
@media (min-width:100px)and(max-width:200px){style syntax}Copy the code

Note -@charset must be in the first line – the first two @ must be preceded by; Coterminous -charset specifies the encoding of characters, but utF-8 specifies the encoding of characters

Document flow inline block Inline-block

Flow direction

– Inline elements are from left to right, and line breaks only when they reach the right. – Block elements are from top to bottom, each starting on another line. – Inline-block is also from left to right

The width of the

-inline width is the sum of internal inline elements and cannot be specified by width. -block Automatically calculates the width by default

highly

– Inline height is determined indirectly by line-height, regardless of height. – Block Height is determined by the internal document flow element. Height-inline-block can be set

Overflow spill

When the content is larger than the container the content width or height is larger than the container, Overflow: 1. Use overflow to set whether to display scroll bar – Auto flexible setting -scroll to display forever (rarely needed) – HIDDEN To hide overflow directly – Visible to display overflow directly 2 overflow-y

Box-sizing: content-box border-box

Margin merge elimination

Only merge up and down

Father-son margin merge

  • Padding/border
  • Parent adds overflow: Hidden
  • display:flex

Brother margin merge

  • The brothers’ merger was expected
  • Display: inline – block elimination

CSS layout

#float layout step

  • Child element plus float:left and width
  • * Add class=”clearfix” to parent element
.clearfix:after{
    content:' ';
    display:block;
    clear:both;
}
Copy the code

experience

  • Those with experience will leave some space or leave width off the last one to make it adaptive
  • There’s no need to be responsive, because there’s no Internet Explorer on the phone, and this layout is for Internet Explorer
  • Ie6/7 has double margin left bug, there are two solutions
  1. Ie6/7 + a _margin-left: half
  2. Add a display:inline-block

### vertical-align:top/middle ## vertical-align:top/middle

Margin :0 auto/magrin-left:auto + magrin-right:auto

– Added a -magrin-right to the parent box when the spacing becomes larger on a flat layout

Flex layout one-dimensional layout

Container External Attributes

  1. display:flex
  2. Flex-direction: indicates the main axis direction
  • Row (default landscape left to right)
  • Row-reverse (right to left)
  • Column (from top to bottom)
  • Column-reverse (from bottom to top)
  1. Flex-wrap: Change the fold
  • Nowrap (no line folding by default)
  • Wrap (folding line)
  • Wrap-reverse
  1. Illustration-content :(spindle alignment)

  1. Align-items: aligns the sub-axis

  1. Align-content: multi-line content (rarely used)

# item internal attribute

  1. order:xxx

  1. The flex – turns: long fat

Navigation tips with 0 on both sides or no 1 in the middle

  1. The flex – the shrink: thinner

If the space is insufficient, reduce the contribution. The default value is 1

  1. Flex-basis: Controls the base width

The default is auto, same as width

  1. Align-self controls the align-items of a single grid

These are basically the only ones used for key tasks

  1. display:flex
  2. Flex-direction :row/column Main axis row/column
  3. The flex – wrap: wrap fold line
  4. Precision-content :center/space-between spindles are center aligned/center evenly separated
  5. Align-items :center aligns the secondary axis

experience

  1. Never block width and height, percentages or min Max prefixes
  2. With the min – width/Max – width/min – height/Max – height
  3. Flex does almost everything you need
  4. Flex and margin-xxx: Auto have unexpected effects such as substituting justify-content:space-between

Grid Layout Two-dimensional layout

display:grid | inline-grid

  1. Grid-template-columns Grid-template-rows rows and columns
  • Divide by PX Auto

  • Divide with Flex according to FR-free space

  1. Set the items range to negative

  1. gird-template-areas

4. The gap gap