Browser kernel

Browser: Chrome (Blink) Firefox (Gecko) IE (Trident) Oprea (Bink) Safari (WebKit)

HTML tags

ul(ol)

<ul  type=' '>
    <li></li>
</ul>
Copy the code

-> list-style-type:none

The type attribute changes the style of the list

img

<img src=' '  width=' ' height=' ' title=' ' alt=' ' >
Copy the code

Width height(these are commonly used for SEO)

Alt image loading failed

Title Indicates the text prompt when the mouse moves

SRC refers to the image path

A label

<a  href='https://wwww.baidu.com title=''></a>
Copy the code

If you don’t have the href attribute it’s going to look like a span and then you add the href and it’s going to be a hyperlink

The href attribute, if it doesn’t have an attribute value, then it refreshes the page

If you have it you have to have HTTP or it’s going to be local document path access

The target=-blank property opens the web page in a new TAB and then applies the anchor point which also has the title property as well as the title property

h1 -h6

<h1></h1>
Copy the code

Dividing the text inside a region will make the text bigger than div has seo text weight

span

<span></span>
Copy the code

Dividing a region to wrap content without using CSS has no impact

Font size is the only box size for inline elements

from

<form action=' '  method=' ' target=' '/>
Copy the code

A single list of form components is a box of components (input tags) through which data can be entered and carried to the background

The data is sent to the background as key-value pairs where the key represents the name of the component like input and value is the value of the component

The get parameter is going to be passed in through the URL with the parameter and the POST is going to put the data in the request header

input

<input  type=' ' name=' ' value=' '>
Copy the code

Input is a text input field which is a component of the form label and type determines what type the input is and name is like ID value can change what the input is, okay

Input type ->

Password The password type will change to an asterisk (*), which is the encryption display

Submit The form button modifies the value inside the submit button

Reset reset button clears the filled information in the form and changes the value

Radio radio button If the same name attribute is not set, radio radio will also cause multiple selection. Generally, value is set in the radio box to enable the background to check disabled. Checked is selected by default

	<label for='id'> xx</label>	<input type='radio' name ='xx' id ='id'>
Copy the code

Other attributes of input

The placeholder text box will display the value of the property when it is not written, the input value will be displayed when input is started, and the value of the property will be hidden, but the value of the property will still appear when the input text is empty

The textarea text field is like a div box, but it can only hold text. The triangle in the lower right corner can drag the text field open. The cols property can add rows to the text field. The both property can be dragged and the None property can’t be jumped and the text inside the space and the newline will be interpreted as the actual value, so what’s the value inside

Select defines the dropdown option. The name of the select is its own value. The value is the value of the selected option.

The datalist id is used with the option subcomponent to bind the datalist ID to the input with the list attribute to give the effect of multiple selections under the search box

<input type='text' list='box'>				<datalist id='box'>				<option value='html'>html</option>				<option value='js'>js</option>				<option	value='css'>css</option>				</datalist>
Copy the code

table

<table>  <thead>    <th>123213</th>  </thead>  <tbody>    <tr>      <td>32131</td>      <td>321321321</td>    </tr>  </tbody></table>
Copy the code

The difference between DIV layout and Table layout When the table layout is loaded, the page will be displayed after all the contents are loaded, so when the page network is slow, there will be a flicker of white space, while div layout is loaded from top to bottom, there is no white space

Thead Head of the label table TBody Tfoot End of the label table

The TR tag defines table rows. The TH tag defines table header cells. The TD tag defines normal cells

Td tr properties

Colspan counts yourself as rowspan and if there are any cells in the row, it will squeeze them out

CSS properties:

Border :collapse Border lines have been collapsed

Analyze the attributes of the table

  • Th bold left, right, top and bottom center
  • By default, cells in tBody are divided equally according to the width and height ratio of the table according to the number of contents
  • After td width is set, the table width is evenly split, not divided by content
  • The width of each row and column depends on the largest (widest, highest) cell in the current row or column
  • When the table is not set with width and height, it is supported by the content, supports width and height, exclusive row, supports margin and Margin Auto, while the padding in the table has no effect
  • Td TH does not support margin and padding effects

Eg :color:inherit;

The display of a table is table table-cell, which can realize adaptive width and height layout

div

Partitioning an area is often used for web layout

<div></div>
Copy the code

p

<p></p>
Copy the code

Add a restriction to div that only text can be placed in the partition area

HTML new tags -> language tags

CSS writing

1. Three CSS writing modes

1. Inter-line style: write CSS in tag attribute style 2. Internal style: add style tag to HTML document and write CSS code 3. Importing CSS files (@charset “UTF-8” for unified encoding) (Importing CSS external styles is equivalent to copying the imported CSS to the current imported code location)

<div style=' '></div><style></style><link href =' '>
Copy the code

2. The CSS notation

Div {} -> selector {}Copy the code

The selector means that the filter to be used is usually wrapped in CSS style code, which is written by applying the style code inside the parentheses to the filtered HTML element

3. Why is CSS called Cascading Style Sheets

Popular accounts

  1. The same property below overwrites the one above, the one with the highest priority overwrites the one with the lowest priority, two of the same choose the same property, and the property set later overwrites the one set earlier
  2. A cascading sequence is a set of rules that dictate the order in which different elements are stacked on top of each other. And cascading context and cascading level are concepts.
    1. From bottom to top, they are:
    2. background/border
    3. Negative z – index
    4. Block horizontal box
    5. Float box
    6. Inline /inline-block horizontal box
    7. Z-index :auto/ Z-index :0 Does not depend on the cascading context of z-index
    8. Positive z – index

CSS selectors

The id selector

I’m going to apply an ID attribute to an HTML element to filter the entire HTML document by filtering the specified ID value and the same ID value can only appear once

In CSS, use # to filter the id attribute value for CSS styling

html -><div id='demo'></div>    css ->  #demo{}
Copy the code

The class selector

You add a class attribute to an HTML element and you filter it by filtering the specified class value so that you can have the same class value multiple times and if there are multiple times you can select multiple elements

In CSS, the class attribute value is filtered by. To give CSS styles

html ->  <div class='div1'></div> 		<div class='div1'></div> css  ->   .div1{}
Copy the code

Label selector

You can filter out a class of HTML elements in CSS by specifying the tag to be filtered

html ->  <div ></div> 		<div ></div> css  ->   div{}
Copy the code

Naming conventions: – sign conjunctions (_ not recommended) Are best used in camel case naming conventions do not recommend capitalizing the first letter

Wildcard selector: * {} Selects all elements in an HTML document generally used for initialization

Selector weights: Inline Style > ID > Class > Label > *

Three code writing weights: inline style > Internal style = external style

Combinatorial selector

1. Descendant selectors: add a space between the parent and child selectors to select all of the child selectors under the parent

 html :<div><p>123</p></div>CSS -> div p {} Selects all p tags in the div tagCopy the code

2. Direct descendant selectors (only sons count as grandchildren) add > to parent and child elements

html :<div><p>123</p></div>    css  -> div>p {}
Copy the code

3. Sibling selection (a sibling of the same parent element (the one after the selector) tag and tag add +

  html-> <div><p></p><span></span><div>      css->  div p+span {}
Copy the code

4. Sibling element selector (all sibling elements under the same parent element)

html-><div><p></p><span></span><span></span></div>CSS -> p ~ span{} Select all spans following p in all divsCopy the code
5. Parallel selector in the selector directly added, it means that the selectionCopy the code
html -><div><p></p><span></span><span></span></div>css - > div,p,span{}
Copy the code

Div. Class so that the write selector is weighted and not treated as a descendant selector

The box model

Block level box model

  1. Margin The area outside the box can be changed by changing the margin value

    1. Margin merge: when a child element changes the margin top along with its parent element
    2. Solution: Add border top or padding top to the parent element
    3. The margin attribute has four values for top, right, bottom and left, and three values for top, left, right, and bottom
    4. Horizontal centering can be achieved using left and right Auto

  3. Border The outermost part of the box border wraps the entire box margin changes the distance beyond the border

    1. Attribute: border: 1px solid red; This is a compound property
    2. Split attribute -> border-weight:1px; border-style:solid; border-color:red;

  5. Padding Part of the box border next to the content area to make the box area larger

    The padding property has four values for top, right, bottom and left and three values for top, left, right, and bottom

  6. The default width of the block-level box model is 100 percent the width of the parent and the default height is split by the content

    You can set the width height property to limit the size of the content area after setting the width height

    The value of width height can be set to a percentage of 1%(which will eventually be fixed) fixed value 2px(pixels) em(1 times the parent font size)

5. By default, one line is exclusive of other elements

Inline box model

  • Margin (padding) top can’t be used to move a line-in-box model. The added padding top will mask other elements
  • You can use the padding(margin) left to change its position, but the padding does not extend the content area. Margin Auto does not support horizontal center
  • You can use border but not width height to set width and height
  • The content area is determined by the text content, and can be enlarged by changing the font size.
  • Use line-height to change the vertical orientation of the box itself without affecting the elements in the row. The box model is invisible
  • You can use vertical-align to change the vertical alignment. Elements in a row default to baseline alignment
  • You can use text-align to align inline elements or text horizontally
  • It’s on a line with other inline elements but it has a literal property and any space or carriage return between inline elements counts as a space in the content direct during rendering

Display types and interconversions

  • The box model just dictates how the browser should render and parse a box, right
  • The display attribute tells the browser which box model rules to render the box with
  • The display of the block-level box model is inline for the elements in the block line
  • The third display type is inline-block the length of both sets
  • Margin (padding) Top Supports setting the width height attribute to limit the content area
  • Being able to share a line with other inline elements or inline block elements also carries a literal attribute
  • It also has baseline alignment without margin Auto support

Display type conversion -> Element types can be converted by modifying the display attribute of the element

Address text attributes: 1. Set parent font size to 0. 2

HTML Element classification

Common block-level elements are: div P H1-h6 ul OL Li DD DL

Common inline elements are: A span em I strong lable IMG TT

A common inline block element is: input

The rounded style

How to make a circle by setting the four corners to 50%

  • One value is four directions
  • Two values top left, bottom right (diagonal), top right, bottom left
  • Three values top left, top right, bottom left (diagonal), bottom right
  • Four values top left, right, top right, bottom left, bottom left
  • Eight values four values of the X axis four values of the y axis.

Font style

Font style and text Style Text properties are inherited by default

The color value in border-color has been said

Font-size Specifies the font size

The default font size is 16px. The default font size is 16px

Em (unit value) is equal to the font size of the parent, which is a relative unit and only finds the font size of the nearest parent and only goes up if the font size of the nearest parent has not been set

Rem is to find the font size of the root node of the website (usually HTML), which is usually used on mobile

Percentage % relative to font size similar to EM relative to parent

  • Font-family :’ Microsoft Yahei ‘,’ black ‘, Arial; font-family:’ Microsoft yahei ‘,’ black ‘,arial; font-family:’ Microsoft Yahei ‘,’ black ‘,arial
  • Chrome yahei ie 宋体 sans-serif font (similar to Chinese calligraphy) serif font is divided into serif and serif font do not use any other company font will be accused of copyright issues
  • @font-face {font-family:’xx name ‘; src:’url’}
  • Blod text normal default lighter bolder is thicker
  • Font-style font style normal Default ITALIC oblique Oblique inclines the font
  • Font -variant makes lowercase letters uppercase, but smaller than normal uppercase letters; small-cape makes lowercase letters uppercase
  • The line spacing is equal to the line height-font size 50px can be regarded as the upper and lower margin of the paragraph and its fall directly
  • Text-align text alignment
  • Center Center Justify both sides of your text (fill in space when the text is too short to justify a single line of text)
  • The above attributes only control text and do not apply to other elements
  • Vertical-align Changes the element’s own baseline to the penultimate line of the alphabet dance line by default
  • Text-intent The first line is indent (unit: px em)
  • Text-transform Controls the case of the text uppercase All lowercase letters lowercase letters cpaitalize The first letter is uppercase
  • Text-decoration underline line-through overline Use none to cancel text decoration, usually used for the A tag
  • Letter-spacing: characters word-spacing between words is not affected by text
  • White-space wrap Nowrap does not wrap a line
  • Element content overflow hidden Hidden
  • Text-overflow: Ellipse ellipsis
  • Overflow text three-piece set (overflow text with ellipsis)
  • white-space:nowrap; Unwrap text overflow :hidden Overflow hidden
  • Text-overflow: Ellipsis Prerequisites Block-level elements set the width, which can only be used for block-level or line-level block elements
  • Word-break: break-all solve the problem of too long words without newlines

The color opacity is equivalent to the fact that the tiles on the floor do not affect the top, while 0 is fully transparent and 1 is fully opaque Transparency is the transparency of the whole box

Visibility element is visible visible hidden

Transparency 0 can also be hidden but the element is actually still there, but the A tag link style is still there, the mouse touch can change, and the A tag does not trigger when the visibility is hidden

Background style

1. The color of the background is background-color

# FFF hexadecimal 2. RGB 3. Rgba

background-color:red
Copy the code

E.g. < 1 > It’s a background-image

The image path is selected in conjunction with the URL property

background-image:url('xxxx')
Copy the code

3. Hierarchy of context

Content layer > border layer > Background image layer > Background color layer

4. Background-repeat: Background tile property

The default is tiled, which means the image is smaller than the box and will automatically expand xy until it covers the entire box

You can set the no-repeat so that the background image is not tiled or you can set a single direction or only a single direction tiling

background-repeat-x:repeat; -> X-axis untilingbackground-repeat: repeat-y; -> tiling only the y axisCopy the code

* If the default background image is tiled, the background image will extend under the border, if not repeated, the image will not extend under the border

5.background-size: the size of the background image

Background-size: width height; You can control the size of the background by using percentage and auto

Contain: scale the image until one edge touches the border and it stops

6. Background-origin: background image display base point

Can you set where to start displaying the image

  • Content-box: The background image begins at the upper left corner of the content area
  • Padding-box: The background image starts at the top left corner of the inner margin
  • Border-box: The background image corresponds to the top left corner of the border

7. Background-clip: Clip the picture

The clipping area style of the background image is used to crop the image when the original size of the background image is larger than the element to ensure that the background image is visible in which area

  • Content-box: Displays only the background image of the content area
  • Padding-box: Displays the background image of the content area and the inner margin section
  • Border-box: Displays the image of the content area, inner margin, and border parts

8. Background-position: background image positioning

The horizontal and vertical offset of the background image relative to the display base point

You can set px or percentage units: Width percentage base (element width – image width) Height percentage base (element height – image height)

9. Background-attachment: Background image attachment

The purpose of the background image associative attachment style is to determine whether the background is fixed in the viewport or scrolls along with the block containing it.

Fixed: This keyword indicates that the background is fixed with respect to the viewport. Even if an element has a scrolling mechanism, the background does not scroll with the content of the element.

**10. Overflow **

  1. Overflow: visible; (Default) The exceeded content is displayed normally
  2. Overflow: hidden; Beyond content hiding
  3. Overflow: scroll; If there is a lot of content, use a scroll bar to display the extra content
  4. Overflow: auto; If the content is not exceeded, the normal display content exceeds, and the scroll bar is displayed

11. Background composite style writing

background: color image repeat attachment position/size

background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px;Copy the code

It’s going to be replaced by the default, it’s going to be separated by a slash between position and size

A single element can set multiple background images

background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px.url(images/1.png) no-repeat scroll 20px 20px/30px 30px ；
Copy the code

The rounded style

Rounded corner style (English: border-radius), which was developed by W3C to show a curved edge to a block element that is displayed as a rectangle by default

1. Border-radius: All eight corners can be changed

Draw circle: border-radius: value equal to half of width (height) and width equal to height

2. Draw the ellipse

Border-radius: y/x -> y can be interpreted as wide and x can be interpreted as high

Color gradient

Gradient definition: the so-called gradient, generally refers to a smooth transition between two or more colors, the effect is a vector effect, will not be blurred due to page enlargement, CSS3 defines two types of gradient,

There is a linear gradient, a radial gradient, and a promising angular gradient that is not widely used at present.

Linear-gradient () goes down one line at a time

background:linear-gradient(to top,red 0%,blue 100%The default gradient direction is from top down to bottom up to that direction. You can set the Angle background:linear-gradient(45deg,red 0%,blue 100%)
Copy the code

Radial gradient() a radial gradient

The only difference between a radial gradient and a linear gradient is the direction in which you add color. A radial gradient is similar to drawing concentric circles, one layer at a time

background:radial-gradient(red 0%,blue 100%)
Copy the code

Repeat gradients repeating-Linear-gradient () and repeating-radial-gradient()

They work in a similar way to the previous two, except that the color code repeats indefinitely until it fills the background.

background:repeating-linear-gradient(45deg,red 0,blue 15px,red 15px) What color does that Angle start with and how many pixels of blue repeatCopy the code

Gradients, when used for a background, are shown in the form of a background image ！！！！！！ So you can use all the style features of the background image, such as size, position, base point, clipping, etc

Floating style

Document flow (document normal rendering flow from top to bottom from left to right) Elements are arranged according to their own rules without changing their properties (block level occupies its own position line by line)

Float allows elements to escape from the document flow (out of the original layer) and stop when they encounter parent boundaries or adjacent float elements. Float elements do not occupy position in the document flow. The position behind the float element will replace its original position (affecting only those behind it)

The actual effect of float is to leave the flow of the document, clear the margin behind the block-level element, and move the preceding element away from its original position so that it can go up

Float: 1. Allows elements to be both laid out and displayed horizontally

2. Problem: Normally the parent height is supported by the element. Once the float leaves the document stream, the child element cannot support the parent, causing the parent height to collapse 3. Floating elements are stuck (if the upper height and margin are too high for the parent, floating elements that fall out will be stuck down (if they float left, they will see the extra high margin)

4. Elements that become floating elements have floating element properties and no longer have block – or row-level attributes

Floating element features: 1. Does not occupy the position (document flow position) 2. Horizontal display with floating element horizontal display 3. Margin: Auto (whether in line or block level once floating, loses the original rule, changes to float rule) (only block level support auto)

The difference between floating elements and inline blocks:

1. No whitespace parsed 2. No vertical alignment problems 3

Floating effect on text: the original intention of floating is to surround text

Actual size in standard box model = Content +padding+border

Box-sizing: border-box width = width-padding-border

Fixed height collapse caused by the parent float element itself cannot clear float

1. The height of the parent element is not set. After the height is fixed, the operator element is separated from the parent element and still has a height

  1. Triggering the BFC allows the parent element BFC(block-level formatting context) to set one of the following attributes to the parent element

    overflow:hidden;display:inline-block;float:left;position:absolute;/* Position style *Copy the code

    When the parent element forms a BFC, the parent element becomes enveloping: in simple terms, the parent element has a virtual box (at this point, the margins of the child element no longer merge with the margins of the parent element), and the width and height of the parent element are extended by the elements still in the plane and floating elements inside.

  2. Adding an empty block-level tag at the end of the parent content setting clear: both causes code redundancy. Ul OL does not apply

4. The parent level plus float will not cause height collapse, but clear float layer by layer to clear

5. The pseudo-element simulates the third point but does not need to add the element to create an unnamed inline element through CSS

Each element is born with two elements but no display and attributes. Conten can be set with CSS to display the content after the element and before the element

Clear Property Clear property: Ensures that there are no floating elements to the left and right of the current element

Clear floats with pseudo-elements

content= ' 'display:"block"(Only block level properties can be set to clear.) clearbothCopy the code

Locate the style

Default Position (static) -> An element set to static will always be in the position given by the page flow (static elements ignore any top, bottom, left, or right declarations). Not commonly used.

Absolute positioning

1. Elements that are set to absolute positioning drift up from their position in the document stream

2. The elements that float back will float higher, that is, the ones that float back may cover the ones that float ahead

position:absolute
Copy the code

Absolute and relative applications are combined

A. relative B. relative

  • Coordinate system with absolutely positioned child elements by setting relative positioning of parent elements (usually parent and child)
  • The absolute location takes the parent of the nearest existing location (non-static) as the origin of the coordinates
  • You can then control the absolutely positioned elements with attributes such as left and right
  • Elements that are positioned relative to each other do not move out of the document flow. Elements that do not move out of the document flow are shadows
  • The relative positioning of the origin of coordinates is their own ontology moving after the display is the shadow
  • Absolute positioning if left is not set, it will appear where it would normally appear in document flow with the default left right value
position:absoluteleft:0px;
Copy the code

** Fixed positioning ** fixed

Set the fixed positioning style element, the coordinate system is automatically locked to the browser window, the coordinate system is located in the browser window top left vertex can also adjust the left to move the element

The hierarchy z-index of absolute elements

The default hierarchy is that the element that floats last floats highest

The default hierarchy is: elements that float later float highest. We used z-index to change the hierarchy of elements

Hierarchy: Z-index > Z-index =0 > Float layer > Normal Document Flow > border layer > Background image layer > Background color > Z-index negative value

Pseudo-classes style

CSS pseudo-class is a keyword prefixed with a colon (:) that is added to the end of a selector. When you want styles to be rendered to a given element in a particular state, you can add the corresponding pseudo-class to the element’s selector to control only child and sibling elements

  • : Checked This pseudo-class represents the selected state of a form element and can be used for radio buttons, check boxes, and other elements

  • :active This pseudo-class represents the state in which elements such as form elements and links are activated. The concept of activation here is special (for input fields, it is when the left mouse button is pressed down and not lifted; For element A, also left mouse button down and not up)

  • :hover This pseudo-class represents the state of the mouse arrow on the selected element and can be used on any element

    div:hover{ color:red; } -> Mouse updivWhen?color:red赋予div
Copy the code

  • :focus This pseudo-class is triggered when the user clicks, touches, selects form elements, links, etc., using the “TAB” key of the keyboard

  • :nth-child() This CSS pseudo-class first finds all siblings of the element selected by the selector before the pseudo-class, then sorts them by position starting from 1, selecting the (n) element.

  • :nth-last-child() This is basically the same as :nth-child, except that it counts backwards from the end instead of the beginning

  • The :nth-of-type() selector matches elements whose positions in the same sibling node of the element selected before the pseudo-class match those in the :nth-of-type() parentheses

  • : nth-last-type () This is basically the same as :nth-of-type, except that it counts backwards from the end instead of the beginning

  • :first-child selects the first (and must be the first) occurrence in the parent element

  • :first-of-type Selects the first occurrence in the parent element

      Regardless of its position within the brother

    • [attr] This selector selects the element containing the attr attribute among the elements selected by the pseudo-class selector.

    • [attr=val] This selector selects only all elements whose attr attribute is assigned to val. (attr is the attribute name, val is the attribute value)

    • [attr~=val] This selector selects all elements in the attr attribute that contain a value of val. (attr is the attribute name, val is the attribute value, and ~ means contained)

    • [attr^=val] selects elements beginning with val for the attr attribute.

    • **[attr =val]∗ Selects the value of the attr attribute for elements ending in val (including val) (=val]** Selects the value of the attr attribute ending in val (including =val]∗∗ Select the value of the attr attribute elements ending in val (including val).

    • [attr=val]* Selects the element containing the character val in the value of the attr attribute (a substring is simply part of a string, for example, “cat” is a substring of the string “caterpillar”)

    Animation frames

    1: play multiple static frames (static graphics) in a short period of time to form visual residue

    2. Creation method of keyframe animation:

    1. The first and last frames are defined by the user, and the middle frames are generated by the computer

    2. The user defines the animation time from the first frame to the last frame (according to this time, the computer calculates the specific number of frames to help us generate)

    The principle of trigger animation

    The last frame of the element animation is assigned by an event such as hover Check, and then the initial first frame is animated

    • Transition-duration defines the duration of an animation from the first frame to the last frame. The browser will generate a corresponding number of intermediate frames based on this duration
    • Transition-delay defines how long the animation will be displayed as soon as the action is triggered. The default delay is 0, i.e. the animation will be displayed as soon as the action is executed
    • Transition-timing-function: the transition-timing-function defines the rate at which the animation changes from the first frame to the last frame
    • The transition-property element takes a change in a property as the animation’s change effect (e.g. a change in width, a change in height, etc.). The first and last frames represent changes in the value of this property (e.g. width from 100px in the first frame to 500px in the last frame).
    transform(rotateX(50deg))transition:width 2s  xx  2x;
Copy the code

    Active animation

    Active animation: key frames are created by the user without any action trigger

    @keyframesAnimation name {state1{style name1: style value1; } state2{style name1: style value2; }... State X {style name1: style value3; }}Copy the code

    Different from trigger animation: users can create multiple key frames to control the entire process of animation more finely

    Animation Activation: Apply animation-name styles to elements that need to display user-created active animation

    @keyFrames Create animations that can be modified or overmodeled or rendered in 2D

    The animation property does not include the animation state property

    • Animation-name Specifies the @keyframes animation name to be used
    • Animation-duration Specifies how long it takes for an animation to complete a cycle in seconds or milliseconds. Default is 0
    • Animation-timing -function Specifies the speed curve. Animation-delay Specifies the animation delay
    • Animation-iteration -count Specifies the number of times an animation can be played. The default is 1
    • Animation-direction Sets the playback direction
    • Animation-play-state Specifies whether the animation is running or paused
    @keyframes  xx{    0%{}    10%{}    100%{}}div{ animation:xx  2x  infinite }
Copy the code

    Composite writing

    ​ animation: name duration timing-function delay iteration-count direction fill-mode play-state;

    Change styles for 2D animation

    The transform property applies to 2D or 3D transformations of elements. This property allows you to rotate, scale, translate, skew, etc.

    • Transform: rotate (deg); If the Angle value is positive, the element rotates clockwise; The Angle value is negative element and rotates counterclockwise
    • Transform: translate (offset 1, offset 2); /Sets the offset effect of the element from its original position/ offset 1: defines the horizontal offset of the element; /You can set it with translateX() alone/ offset 2: defines the vertical offset of the element; /You can set it with translateY() alone/
    • Transform: scale (multiple 1, multiple 2); /Sets the scaling factor of the element/ Multiple: 0Between 1, the element shrinks (the multiple is 0 and the element disappears) multiple: >1, element magnification: <0, element inversion (-1)0, inverted zoom, less than -1, inverted zoom)
    • Transform: skew (Angle 1, Angle 2); /Sets the skew data for the element/ Angle 1: defines the horizontal Angle of the element; /SkewX () can be set separately/ Angle 2: Defines the vertical Angle of the element; /SkewY () can be set separately/
    • Each element has a transform-Origin style whose default position is exactly at the intersection of the horizontal and vertical center lines of the element
    transform-origin:0% 0%; Change the base of change (you can change the base outside of your element)Copy the code

    Composite writing

    Variations can be written in compound notation, such as

    transform: scale(*) Translate (*, *)skew(*)  rotate(*).Copy the code

    A difference in the order of multiple style values within a changing style can result in completely different results

    Front-end animation can be basically divided into two categories: one is to use JavaScript to animate the canvas and the other is to use JavaScript or CSS to control the change of the location attribute value of elements to achieve animation effectsCopy the code
    The details of each step are as follows: 1. Change (changing the position attribute value of an element via JavaScript or CSS) 2.Style (calculating Style) : The browser determines which CSS rules are ultimately applied to each DOM element. 3.Layout: The browser calculates the size and placement of each DOM element on the final screen. In addition, the position of some elements on the whole page is relative, so the change of the position of any element will lead to the occurrence of other elements. Change. This process is called reflow. 6.Paint: Paint the text, colors, images, borders, and shadows of DOM elements on multiple layers. The most typical is 7. Elements with different Z-index values in background and absolute positioning. 8.comPosite: Combine layers in a reasonable order and display them on screen. For example, the content layer of the element is 9. Above the background layer, and the element with different z-index values in the same coordinate systemCopy the code

    3 d animation

    • 1. By default, the front 3D coordinate system has no Z-axis value, so by default, you can’t see the distance of 3D objects, but only the projection of 3D objects
    • 2. Add the Z-axis by adding a perspective style to the coordinate system
    • 3. When an element is moved using the absolute positioning style, the X-axis and Y-axis of the coordinate system at this time take the midpoint of the ancestor element with relative positioning as the origin
    • 4. When the transform displacement style or relative positioning style is used to move the element, the X-axis and Y-axis of the coordinate system take the midpoint of the element as the origin
    • 5. By default, the z-axis of the coordinate system is located at the boundary between the horizontal and vertical centerlines of the parent element
    • 6. The z-axis position can be set using the perspective-Origin style

    shadow

    Composite writing

    It’s like painting around the elements and that’s how shadows work

    Box-shadow: xOffset yOffset burlLehgth spread color outset; Box shadow: horizontal direction offset vertical direction offset shadow blur distance Shadow zoom shadow color shadow display mode;

    Flex flex box

    A simpler and more efficient way to arrange, align, and allocate free space among the children of an element block

    1. The element with display:flex becomes an elastic box. We call the parent element the container and the child element the item

    2. The container has two axes by default: horizontal main axis and vertical cross axis.

    Container: The spindle is a transverse cross axis (side axis) with the vertical axis perpendicular to the spindle used for macro control items

    Flex-direction determines the direction of the main axis and what the main axis is. The default is row horizontal from left to right row reverse horizontal from right to left column vertical from up to down column reverse vertical from down to up

    Flex-wrap: determines whether to wrap and side/cross axis orientation by default nowRAP does not wrap. If the main axis is horizontal, the cross axis is vertical and if the main axis is horizontal, the cross axis is vertical (from bottom up) and if the opposite is white, the cross axis is vertical

    Flex-flow: row wrap; flex-flow: row wrap;

    The justify – the content:

    • Used for spindle alignment
    • Flex-start aligns the start of the spindle
    • Flex-end aligns the end of the spindle
    • Center the center line of the spindle
    • Space-between Has no space on the left and right sides and the same space in the middle
    • The spacing on the left and right sides of the space-around is half of the middle space

    Align-items: a single row of items on the side axis

    • The default value for strench projects is full side axis
    • Flex-start cross axis start alignment
    • Flex-end crosses the axis end alignment
    • Center cross axis midpoint alignment
    • Baseline alignment

    Align-content Align-attribute for multi-line items is the same as for single-line items

    • The default value for strench projects is full side axis
    • Flex-start cross axis start alignment
    • Flex-end crosses the axis end alignment
    • Center cross axis midpoint alignment
    • Baseline alignment
    • Space-between cross axes allocate excess space between items in a similar alignment at both ends
    • The extra space is allocated on both sides of the main axis of the project

    Project:

    Flex: Auto – “1 1 auto” determines the content based on the content. If more boxes are allocated, the width will be wider

    • The flex-grow box model grows and allocates the extra space in the container. The default is 0 and does not allocate the items in the container. The average allocation of items in the container is greater than 1
    • Flex-shrink Assumes space that the container is not wide enough. The default value is 1. When the parent container is not large enough, it shrinks itself
    • Flex-basis confirms the default length on the main axis (width and height determined by the main axis), but if the parent length is not enough to divide into Flex-basis, the length will be lower than basis. The default is auto, determined by the content, but if you set the length to override basis

    Flex :1 1 0 grow to 1 shiink 1 basis 0

    Align-self: The alignment of subitems is covered by the container

    • The default value for strench projects is full side axis
    • Flex-start cross axis start alignment
    • Flex-end crosses the axis end alignment
    • Center cross axis midpoint alignment
    • Baseline alignment

    You can change the sorting priority of items above the axis by setting order

    The elastic box model supports margin padding and is very flexible

    Content can be written when contenteditable is true

    Ali icon use

    1. Add the icon you want to download to the shopping cart in aliyun icon Vector library
    2. Click download code
    3. Then find the CSS file copy project generated by @font-face
    4. Define styles that use iconFONT
    5. Pick the appropriate icon and get the font code to apply to the page

    Div with no width and height centered horizontally and vertically

    Using Flex

    • Just set it in the parent box:display: flex; 		justify-content: center;		align-items: center;
Copy the code

    Using CSS 3 transform

    • Parent box setting: Position :relativeDiv Setting: transform:translate(-50%, -50%);  position: absolute;  top: 50%;  left: 50%;
Copy the code

    Run the display:table-cell method

    Parent box Settings: display:table-cell;text-align:center;    vertical-align:middle;DivSetting: display: inline - block;vertical-align:middle;
Copy the code

    The parent container sets the width and height to be horizontally centered

    Using Margin

    .father {  height: 100%;  width: 100%; }.root {  background-color: red;  width: 200px;  height: 200px; /* If the parent element is also used in percentage */  margin: 25% auto; /* Vertically centered (parent height - child height)/2*/  margin: 0 auto;  margin-top:100px; }Copy the code

    The use of absolute

    .father {  position: relative;  height: 100%;  width: 100%; }.root {    background-color: red;    width: 200px;    height: 200px;    /* position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; * /}
Copy the code

    Use absolute plus margin

    .father {  position: relative;  height: 100%;  width: 100%; }.root {    background-color: red;    width: 200px;    height: 200px;     position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    margin: auto; }
Copy the code

    BFC knowledge

    Definition: Block formatting context (BFC). It is a separate rendering area with only block-level box parameters. It specifies the layout of the internal block-level box and has nothing to do with the outside of the area.

    BFC layout rules A BFC is a separate container on a page, and the child elements in the container do not affect the outside elements. And vice versa.