1. The HTML tags

1.1. Common Labels

  • Title tags: H1-H6
  • Paragraph tag: P
  • Newline tag: BR
  • No semantic tags: div SPAN
  • Target = _blank; href = # href = null;
  • Space tag:  
  • Less than the label: <
  • Greater than label: & GT
  • Form Label: Table (border=1 border=1, cellspacing=0), tr is the row of the table, th is the head of the table, TD is the content of the table, thead is the head of the table, tbody is the body of the table, rowSPAN is the cross row merged cell, Clospan for merging cells across columns
  • List tag: ul Li (list-stype: None means to remove dots)
  • Ordered list: OL Li
  • Custom list: DL DT DD
  • Table tag: form (action= URL,method = transfer mode)
  • Enter the form element: input (id=” “for identification)
  • Text label: label (used with input, for=” ID of input “)
  • Dropdown table: select (option as content)
  • Text field tag: Textarea

1.2. Check the CSS documents

www.w3school.com.cn/

2. CSS styles

2.1. Font properties

  • Font style: font-amily
  • Font size
  • Font size: font-weight (bold, can also be 700)
  • Font style: italic

2.2. Text attributes

  • Font color: color
  • Align: text-align: center
  • Text: text-decoration (remove effect: none, underline: underline: line-through)
  • Text indent: text-indent (text paragraph indent, 2em for 2 fonts)
  • Line spacing: line-height (if set to the same height, it can be centered vertically)

2.3. Pseudo-class selectors

  • Mouse move to link: A :hover
  • Mouse not selected: A :link
  • The mouse clicked the link: A: Visited
  • Mouse is pressing the link: A :active
  • Get the cursor input form: input:focus

2.4. Element display mode

  1. Block-level elements: 100% width by default and a single line, such as div
  2. Inline elements: More than one line can be displayed in one line. The height and width Settings are invalid. The padding Settings are invalid
  3. Inline block elements: you can set width, height, and inner margin, and display more than one line, such as IMG and INPUT
  • Other elements are converted to block-level elements: display:block
  • Other elements are converted to inline elements: display:inline (elements can be displayed in a line, rarely used)
  • Other elements are converted to inline blocks: display:inline-block

2.5. The CSS background

  • Background color: background-color

  • Background image: background-image: url(“)

  • Background tile: background-repeat (do not repeat: no-repeat)

  • Position of background image: background-positon (can use center top orientation or number)

  • Background with scroll set: background-attachement (Scroll, fixed)

  • Background: RGBA (0, 0, 0, 0.3)

  • 2, background: URL (“) no-repeate fixed center top

  • Background image size: background-size (cover: cover all, image may be cut, 50%: half, contain: image to the maximum size, or equal proportion, but there may be a blank area)

  • Background linear gradient: Background: Liner-gradient (left, red, blue) Start direction color 1, color 2

  • General usage: Small images with text as background

2.6. Box model

  • Border width: border-width
  • Border color: border-color
  • (solid line: solid, dashed line: bounding, dotted line: dotted)
  • Border orientation: border-bottom, border-top, border-left, border-right
  • Border rounded: border-radius (set 50% to half its width to achieve a rounded effect)
  • Bezel-azimuth rounded corner: borer-top-left-radius
  • Border: 1px solid #eee
  • Inner margin: padding (top, right, bottom, left, clockwise)
  • Margin: margin (top right bottom left principle, clockwise)
  • Box shadow: box-shadow (x, y, blur, spread, color, inset, x: horizontal shadow, y: vertical shadow, blur: spread, color: inset, inset, example: Box-shadow: 4px 4px 115px #eee)
  • Text-shadow (example: 5px 5px 6px raba(0, 0, 0, 0.3))

2.7. The CSS float

  1. Note: Float is the classic way to display multiple block-level elements in a row.
  2. Float: left float: left float: right float: right float: right
  3. Features: Floats move out of standard flow, float boxes no longer remain in their original positions, floats have inline block element attributes, size depending on content.
  4. Text surround: The float does not overwhelm the text, the text will surround the float element, such as the image text.

Clear floating mode:

Method 1: Clear :both.

Approach 2: Parent element Overflow: Hidden.

Method 3 (Recommended) :

clearfix:after {content:""; display:block; height:0; clear:both; visbility:hidden}Copy the code

2.8. The CSS positioning

  • 2, Relative: the position of movement is relative to the position of oneself, the original position is still retained, typical function is to give absolute position as father.
  • Position: Absolute (The element moves relative to the parent element that has a position. The classic is that the child has no parent phase.)
  • Position :fixed (reference to the browser window as a moving element, can keep the same position when the browser scrolls, will not scroll with the scroll)
  • Sticky positioning: postion:sticky (must add location such as top to take effect, take the browser as the visual window as the reference to the mobile element, with the page scrolling collocation, IE does not support)
  • Stacking order: Z-index (the higher the value, the higher the box is, default is 0)

2.9. Show and hide elements

  • Display: none, hide objects, hide elements no longer occupy the original position.
  • Display: block, in addition to block level elements, also display meaning.
  • 5. Visibility: hidden, keep the object in its original position.
  • Visibility: visible, the element is visible.
  • Overflow: hidden: Indicates that the overflow part is hidden.
  • Overflow: Scroll, the scroll bar will be displayed if it does not overflow
  • Overflow: auto, display scroll bar when needed again

2.10. Interface style

  • Mouse style: cursor (small hand style: pointer, forbidden style: not-allowed, text style: text)

  • Outline: None (Cancel)

  • The text field does not drag: resize: None

  • Vertical center: vertical-align

  • One-line ellipsis:

    white-space:nowrap,overflow:hidden,text-overflow:ellipsis
Copy the code

  • Multiline ellipsis:

    text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
Copy the code

3. The CSS properties

3.1. The CSS properties

  • Cascade: Proximity principle
  • Inheritance: A child inherits the property of its parent
  • Priority: inheritance or * < element < class < id < style

3.2. Order of CSS properties

  1. Layout location properties: display, Position, float, overflow
  2. Attributes: width, height, margin, padding, border, background
  3. Text attributes: color, font, text-decoration, text-align, vertical-align, white-space, berak-word
  4. Other attributes: Content, cursor, border-radius, box-shadow, text-shadow

3.3. The small icon

  • Sprite: Move the position of the background image, background-position to show the position, the bottom left is negative.
  • Font icon: the essence is the font, display is the icon, can change the color size, refer to Ali iconfont font library, simple style can be used.
  • Triangle: width, height: 0, border: 10 px solid transparent, border – top – color: pick, high box width of 0, set up a frame, direction of three transparent, one direction has a color, can show the triangle.

3.4. 2x Sprite

On the mobile side, in Firework, scale the Sprite to half of its original size and then measure the coordinates according to the size.

Note: background-size should be half the width of the Sprite.

4. Most new style

4.1. The new style

  • Input [value] {}, which must be input and have value

  • Input [type=text]{}, must be input, and type is text

  • Ul Li: first-child, first child

  • Ul Li: Last-child, the last word element

  • Ul Li: nth-child(2), second child element

  • Ul Li: Nth-child (n), n can be a number, formula. From zero to n

  • Ul Li: Nth-child (even), even

  • Ul Li: Nth-child (odd), odd

  • Ul Li: Nth-child (2n), even, can also be said to be a multiple of 2

  • Ul Li: Nth-child (2n+1), odd number, or multiple of 2 +1

  • Ul Li: nth-child(n + 2), start second

  • Ul Li: nth-child(-n + 2), the first two, including 2

  • Nth-of-type (n), same as above, and can be sorted for the same subclass.

  • ::before: inserts the content before the inside of the element, which is generally used for pseudo-elements. Content must be set. Display :block is required to set the width and height. Absolute positioning is generally used to adjust position.

  • ::after, inserts content after the inside of the element.

  • Box-sizing: content-box (padding + width + border)

  • Box-sizing: border-box (width,padding, border)

  • Filter: Blur (5px), filter, blur size, the larger the value, the more blurred

  • Width :calc(100%-80px)

4.2. Transition animation

  • It takes time when the motion curve starts (the next two are optional). Stick to one rule: whoever makes the transition adds to the curve. Example: Transition: width.5s, height.5s. Commonly used: taransition: all 0.5s. Hover {width:500px} hover{width:500px} hover{width:500px}
  • Translate: translate(x, y). Or you can just use translateX(x),translateY(y). This doesn’t affect anything else, it can move 50% relative to itself. Such as translateX (50%).
  • Rote :rotate. For example, transform:rotate(45deg) :rotate 45 degrees clockwise. The default center is 50%, 50%, or center center. Transform-orgin: x y transforms the center point.
  • Sacle: transform scale(x, y), for example: transform:scale(x, y). Does not affect other boxes, defaults to center point scaling. Div img: hover{transform: sacle(1.1)}; hover{transform: sacle(1.1)}; hover{transform: sacle(1.1)};
  • Div: hover{transform: translate(150px 150px) Rotate (180deg) scale(2)} The order will affect the conversion effect. When we have the displacement attribute, we need to put the displacement attribute first.

4.3. The animation

Define the animation sequence before using the animation. Example:

@keyframes move {
    0% {
        transform: translate(0px)
    } 
    100%{
        transform: translate(100px)
    }
}
div {
    animation-name: move;
    animation-duration: 2s;
}
Copy the code

0% means the animation starts, 100% is finished, and 50% is also ok. You can use form to to replace 0% and 100%, and the percentage in the animation is the division of the total time. Div means use the animation name move, time 2s, to achieve the effect of moving the X-axis 100px.

  • Animation-name: indicates the animation name
  • Animation-duration: animation duration
  • Animation-delay: indicates when to start
  • Animation-timing -function: motion curve (Ease: accelerates at low speed and ends at low speed. Linear: uniform)
  • Animation-itearation-count: infinite number of repetitions
  • Animation-direction: indicates whether the animation repeats in alternate direction.
  • Animation-fel-mode: backwards: back to the starting point, forwards: stay in place.
  • Animation-play-state: animation state (pause)
  • Animation: name duration timeing-function delay

4.4. 3 d conversion

  • Tarnslate3d, translate3dX(x), X-axis conversion. Translate3dY (y), Y-axis conversion. Translate3dX (z), z-axis conversion. The front is z, the top and bottom are x, and the left and right are y. You can use the left hand rule to figure out which direction is positive.
  • Perspective: You can’t see the Z-axis effect without perspective.
  • Transform-style :3D display (preserve-ed)

4.5. Maximum and minimum width

  • Max-width: indicates the maximum width

  • Min-width: indicates the minimum width

    body { width: 100%; max-width: 640px; min-width: 320px; margin: 0 auto; background: #fff; font-size: 14px; color: #666; The line – height: 1.5; }

Layout of 5.

5.1. The flex layout

Principle: Elastic layout, any container can specify the location of the Flex layout, by adding flex properties to the parent box to control the location and sorting of child boxes. With flex layout, the float,clear,vertical-align attributes of child elements are invalidated.

Parent element attributes:

  • Flex-direction: set spindle direction (row left to right, column up to down)
  • Even-content Sets the arrangement of child elements on the spindle (center, space-around, space-between)
  • Flex-warp: sets the child elements to be warped.
  • Align-items: Sets the arrangement of child elements on the side axis when sorting in a single row (center: vertical center)
  • Align-content: sets the arrangement of child elements on the side axis when sorting multiple lines (flex-start: sort in order, center: sort vertically in the middle, space-between: sort on both sides with space empty, space-around: sort in half)
  • Flex-flow: column wrap. Shorthand.

Child element attributes:

  • Use flex:1 to divide the remaining space between subprojects. The larger the number, the more space allocated. Multiple lines, such as four lines, can be written as 25% relative to the parent.
  • Align-self: Controls how the child elements align themselves on the side axis.
  • Order: Attribute defines the order of items. Default is 0, -1 can be placed first, smaller and more advanced.

5.2. REM layout

How it works: REM is relative to the font size of HTML elements. Such as HTML {the font – size: 12 px}

Media query: different styles can be changed according to different screen sizes, styles are layered, it is best to write from small to large.

  • @media mediatype and not noly
  • @media screen and(max-width: 800px) {body{style}} @media screen and(max-width: 800px) {body{style}}

Adaptation scheme:

  • Less + media query + REM: The size and width of the design draft is 750. The REM value of the page = element size 750/ equal division. For example, 750/15, then HTML {font-size: 50px}.
  • Flexibility.js + REM, divide into 10 equal parts, then set REM (no longer used)

Recommended links:

Adaptive layout scheme

Mobile terminal adaptation and PC terminal adaptation experience summary

6. The CSS is faulty

6.1. Horizontal center

Margin: 0 auto is used to center the block-level box horizontally. Text-align :center is used for in-line elements or in-line blocks.

6.2. Absolute centering method

Left: 50%, margin own box half. Or left: 50%, tarnsform: translateX (50%).

6.3. Outer borders of adjacent elements

Adjacent borders will merge the largest, it is recommended to set one. Border-collapse: Collapse allows adjacent borders to be merged together.

6.4. Nested block elements are set to margin issues

The solution is to set the inner margin of the parent element instead of the child element margin, or to set the border, or overflow:hidden.

6.5. Clear the inner and outer margins

*{margin: 0, padding: 0}

6.6. Display mask layer by mouse movement

class mask{display:none} class:hover mask{display:block}

6.7. Blank at the bottom of the picture

Verical -align: middle,top,bottom

6.8.Flex =1 and text newline conflict

Option 1: Flex =1 view, use overflow:hidden, or min-width=0

Option 2: Add flex-shrink to prevent conflicting views from being compressed ** 支那