navigation

[Deep 01] Execution context [Deep 02] Prototype chain [Deep 03] Inheritance [Deep 04] Event loop [Deep 05] Curri Bias function [Deep 06] Function memory [Deep 07] Implicit conversions and operators [Deep 07] Browser caching mechanism (HTTP caching mechanism) [Deep 08] Front-end security [Deep 09] Deep copy [Deep 10] Debounce Throttle [Deep 10] Front-end routing [Deep 12] Front-end modularization [Deep 13] Observer mode Publish subscribe mode Bidirectional data binding [Deep 14] Canvas [Deep 15] webSocket Webpack HTTP and HTTPS CSS- Interview Handwriting Promise

[react] Hooks

[Deployment 01] Nginx [Deployment 02] Docker deployVue project [Deployment 03] gitlab-CI

[source code – Webpack01 – precompiler] AST abstract syntax tree [source code – Webpack02 – Precompiler] Tapable [source code – Webpack03] hand written webpack-compiler simple compilation process [source code] Redux React-redux01 [source] Axios [source] vuex [source -vue01] Data responsive and initialized rendering [source -vue02] Computed responsive – Initialization, access, update process

Front knowledge

Some words

-sheldon: Sticky triangle, rectangle alternate OrientCopy the code

The vh and vw

  • Vh: indicates the viewport height of the browser
  • Vw: indicates the viewport width of the browser
  • Note: VH and VW include the width and height of the scroll bar
    • When you need a full screen, subtract the width and height of the browser scroll bar

Sticky – Footer (three methods)

Sticky -footer effect: The footer is fixed at the bottom when the content is less than one screen, and at the very bottom of the content when the content is more than one screen

  • padding margin
  • flex
  • calc

(1) Margin and padding combination

  • Applicability: Suitable for footer fixed case, good compatibility
  • The principle of
    • content
      • padding-bottom: 50px; Make sure the height of the footer is clear so that the footer does not block the content
      • min-height: 100%; Make sure you fill up the screen when you don’t have enough content
        • Note that min-height: 100% is for the parent element
        • So set the parent element of content, parent element, body, HTML height to 100%
      • box-sizing: border-box; Make sure width,height includes content,padding,border
    • footer
      • margin-top: -50px; If it’s negative, make sure you move it 50px up to the bottom of the screen when you run out of content
-footer -margin-pading: -50px; -footer -margin-pading: -50px; - Because the content area is set to -min-height: 100%; Padding-bottom: 50px; < span style = "box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; font-size: 14px! Important; white-space: normal;" Min-height: 100% is calculated based on the parent element, so all content-wrap elements must be set height: 100% - Notice to clear all the padding and margin of the default style - code <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; margin: 0; } html, body { height: 100%; } .wrap { height: 100%; } .content { min-height: 100%; // Not enough content to fill the entire content space padding-bottom: 60px; Box-sizing: border-box; // Section: border-box; // set width,height, content,padding,border: violet; } .footer { margin-top: -60px; Margin-top: 0px; text-indent: 0px; text-indent: 0px; text-indent: 0px; text-indent: 0px; text-indent: 0px; background: red; } </style> </head> <body> <div class="wrap"> <div class="content"> <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <! -- <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> --> </div> <div class="footer">footer</div> </div> </body> </html>Copy the code

(2) the flex layout

  • Fixed footer is usually not very good, not very flexible
  • So the Flex layout allows sticky footer layouts where the footer is not fixed
  • wrap
    • display: flex;
    • flex-direction: column; // Arrange them vertically
    • min-height: 100%; // Of course, the parent element must also be 100% high. All parent elements above must be 100% high
  • content
    • flex: 1; // Indicates the magnification ratio. When there is free space, the magnification occupies the full space
2. Flex layout <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; margin: 0; } html, body { height: 100%; } .wrap { /* height: 100%; */ min-height: 100%; display: flex; flex-direction: column; } .content { /* min-height: 100%; */ flex: 1; /* padding-bottom: 60px; box-sizing: border-box; */ background: yellow; } .footer { /* margin-top: -60px; */ height: 60px; background: blue; } < span style = "box-sizing: border-box! Important; word-break: inherit! Important; word-break: inherit! Important;" // Let the content project flex: 1; This will allow cotent to take up the rest of the main axis, that is, every height except footer, min-height in the main axis direction: 100% <div class="wrap"> <div class="content"> <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> </div> <div class="footer">footer</div> </div> </body> </html>Copy the code

(3) calc properties

  • Calc (expression)
    • Take an expression as an argument and the result of the expression as a value
    • The expression can be any combination of + – * /
    • Note: + - operators must have Spaces between them, * / does not
  • Calculate it
Method 3 - Calc attribute - calculate: calculate <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style =" max-width: 100%; clear: both; 0; padding: 0; }.content {min-height: calc(100vh-30px) // The argument is an expression, can use + - * /}.footer {height: 30px; background: black; color: white; } </style> </head> <body> <div class="content"> content <br><br><br><br> content <br><br><br><br> content <br><br><br><br> </div> <div class="footer"> footer </div> </body> </html>Copy the code

Remove the floating

BFC

  • Block Formatting Context (BFC) is a feature
    • BFC refers to a rendered area of a page with a set of rendered rules that determine how its children are positioned and how they relate to and interact with other elements
    • Elements with BFC element characteristics can be thought of as isolated, independent elements, elements in the container do not affect the layout of other elements
  • How do I trigger the BFC feature
    • The root element
    • Floating flot
    • Absolute position: Absolute and fixed
    • Display is inline-block, table-cells, and Flex
    • Overflow values other than visible (hidden, auto, scroll)
  • BFC layout rules
    • Margin folded
      • Margin folding will occur for two adjacent block-level elements belonging to the same BFC
    • Separate container
      • Elements inside the container do not correspond to elements outside the element
  • Use the BFC to clear the floating principle
    • Elements with BFC properties contain all child elements (including floating elements) when calculating height
    • So it can solve the problem of (float) caused by (parent element height collapse)
  • Why is floating clear
    • Cause: Parent element height collapse after floating element leaves document flow (when parent element height is not set)
    • Solution: Trigger the BFC attribute, or use the clear attribute on the floating element’s sibling

Clear floating method – resolve parent element height collapse

  • When the parent element has no height set, such as when there are two child elements and one child is set to float, the parent element will collapse in height

(1) overflow: hidden

  • Method: Set overflow: hidden on the parent element of the floating element
  • Principle: Trigger BFC. When calculating the height of an element with BFC characteristics, all child elements will be counted. If an element with error float is reported, its height will not collapse
  • So: overflow: hidden scroll auto can be, as long as not (overflow: visible) can be
  • Which properties trigger the BFC, that is, can be used to clear the float
    • The root element
    • floating
    • Absolute fixed
    • Overflow: hidden/auto/scroll
    • display: inline-block/flex/table-cell

(2) Pseudo-element (::before) (::after)

  • Method: To the parent element of the floating element, add a pseudo-element
  • Principle:
    • 1. The pseudo-element is a child of the current element, and then set the clear attribute to the pseudo-element. Note that the clear attribute applies only to block-level elements
      • Notice the distinction between pseudo-elements and pseudo-classes
        • The pseudo-element: is an element ::after ::before
        • Hover :hover… hover :hover… hover: Hover…
    • 2. Add pseudo-elements to the floating element’s parent element, and then set clear:both, equivalent to the floating element’s brother element set clear attribute

(3) Insert a child element, such as span, into the parent element of the floating element. When setting the clear property, display must be block

  • It’s the same as adding pseudo-elements, using child elements to inflate the height of the parent element

(4) The parent element of the float element is also set to float, thus triggering BFC (repeat, but easy to omit to write)

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; padding: 30px; position: relative; /* float: left; */ /* position: absolute; */ /* overflow: hidden; */ /* display: inline-block; */ } .father::before { content: '.'; height: 100PX; width: 100PX; position: absolute; top: 0; left: 0; display: block; background: greenyellow; clear: both; } .brother { height: 200px; width: 200px; } .child { height: 200px; width: 200px; background: red; float: left; } </style> </head> <body> <div class="father"> <div class="child">child</div> <div class="brother"></div> </div> </body>  </html>Copy the code

CSS selectors

  • Element selector
  • Relational selector
  • Property selector
  • Pseudo-class selector
  • Pseudo object selector

Element selector

The selector The name of the describe
* Wildcard selector Select all elements
E Element selector Select the specified element
#idName The id selector Select the element whose ID attribute is equal to idName
.className Class selectors Select the element whose class attribute is equal to className

Relational selector

The selector The name of the describe
E>F Child selectors The child selector can only select the child element, not the grandchild element, grandchild element
E F Descendant selector In addition to being able to select child elements, you can also select grandchild elements, grandchild elements
E+F Adjacent selector The adjacent selector can select only the adjacent sibling elements that match the condition, (The adjacent F element after the E element )
E~F Sibling selector The sibling selector selects all sibling elements that match the criteria, without emphasizing adjacent elements (All the brothers F after E )

Property selector

The selector describe
E[att] Select the E element with the ATT attribute
E[att="val"] Select the E element with the att attribute value val
E[att~="val"] Select the element E that has the attribute att and one of the values is equal to val (including cases where there is only one value and that value is equal to val)
E[att^="val"] Select an attribute with att and an attribute value of valAt the beginningThe E element of the string
E[att$="val"] Select an attribute with att and an attribute value of valAt the endThe E element of the string
E[att*="val"] Select the att attribute and the attribute value iscontainsThe E element of the string val

E [att | = "val"] option with att attributes and attribute values for starting with val and connector - delimited string E element, if the attribute value only for val, will also be selected

Pseudo-class selector

  • E:link Sets the style of hyperlink A before it is accessed
  • E:visited sets the style of hyperlink A in which the link address has been visited out of date
  • E:hover Sets the style of the element’s mouse when it hovers over
  • E: Active sets the style of the element when it is activated by the user (the event that occurs between mouse click and release)
  • E: Focus sets the style of the element when it becomes the focus of the input (the element’s onfocus event occurs). (Typically applied to form elements)
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < style > div/class ~ =" y "div [$=" 2 "class] {/ / ------------------------------------- property selector, Descendant selectors / / div [class ~ = "y"] -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- div attributes is the class, and the value of the class is one of the xy div, namely (father) / / div/class ~ = "y" Div [class $= "2"] - descendant selectors, including child element, element of grandchildren, grandson elements/sun/div [$= "2" class] -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - div class attribute value to 2 at the end of the div is selected, namely (child2, Children2) border: 2px solid red; margin: 10px; } div [class = "child4"] + div {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- adjacent selector, selector (brother) background: blue; } </style> </head> <body> <div class="father xy"> <div class="child1"> <div class="children1">children1</div> <div class="children2">children2</div> </div> <div class="child2">child2</div> <div class="child3">child3</div> <div class="child4">child4</div> <div class="child5">child5</div> </div> </body> </html>Copy the code

Selector priority

  • ! Important > Inline Style > ID > Properties > Class > Element selector or pseudo-element selector > Wildcard selector

Pseudo-classes and pseudo-elements

pseudo-classes

  • Pseudo class: like a class is a class, said some dynamic state — — — — — — — — — — — — — — — — — — — — — — — — — pseudo class is a class, a colon:

Pseudo elements

  • Pseudo-element: is an element that is no longer in the DOM document (a child of the current element) ——— Pseudo-element is an element with two colons ::
    • Note: Pseudo-elements are children of the current element and are no longer in the DOM document. They are not available in JS and can be used for performance tuning, such as divider lines
Pseudo-classes and pseudo element 1. Pseudo class: as well as the class is a class, said some dynamic state -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the class is a class, a colon: Pseudo elements: it is an element that is not in the dom document tree, (the current element's child elements) -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- pseudo element is an element, two colons: : 2. 3. Common pseudoclasses and pseudoelements Pseudoclasses: :hover: Active: Focus ------------- Set the style of the input box, such as changing the background color :visited :link: Firsh-child..... Pseudo elements: : : before: : after: : first - letter -- -- -- -- -- -- -- -- -- -- -- -- select specified selectors initials: : first - line -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- select specified selectors must first line: : selection -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - matching user selected parts, such as selecting text background color, such as: : placeholder -- -- -- -- -- -- -- -- -- -- -- -- -- -- set the style of the placeholder 4. Conclusion: - a pseudo-element is a class that defines states :hover, :active, :focus, :visited, :link, :first-child, :last-child, etc. - A pseudo-element is a child of an element, not in the DOM tree, and cannot be obtained with JS - a pseudo-element is an in-line element, Setting width and height is invalid when it can be used to refer to display:block change instance: 1. Display: inline-block-float and position change display <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style =" max-width: 100%; clear: both; .pseudo { height: 150px; width: 300px; background: rgb(3, 173, 185); display: flex; justify-content: center; align-items: center; color: white; position: relative; / / -- as absolute positioning anchor point}. The pseudo: : after {-- -- -- -- -- -- -- -- -- -- -- -- pseudo element is the current element's child elements content: "'; -------------- must set the content, where the content is empty position: Absolute; ------- absolute positioning changes display to inline-block left: 50%; // ------------- absolute positioning sets both left and right to 50%, i.e. the width is compressed to one point, and right: 50% in the center; bottom: 0; height: 2px; background: rgb(255, 230, 0); transition: all .3s; }. Pseudo :hover::after {// ----  ( .pseudo:hover::after ) content: ''; position: absolute; left: 0; bottom: 0; height: 2px; background: rgb(255, 230, 0); left: 0; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the hover, when the state to trigger the transition right: 0; } .pseudo::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; background: rgb(255, 0, 0); top: 50%; bottom: 50%; transition: all .3s; } .pseudo:hover::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; background: rgb(255, 0, 0); top: 0; bottom: 0; } < / style > < body > < div class = "pseudo" > pseudo-classes and pseudo element < / div > < / body > < / HTML >Copy the code

Shock ripple effect

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; width: 100px; height: 40px; background: black; border-radius: 30px; text-align: center; line-height: 40px; color: white; position: relative; } .button::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); // --------------------- center width: 200px; height: 200px; opacity: 0; background: white; border-radius: 50%; z-index: 9999; transition: all .5s; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 0.5 s}. Excessive animation button: active: : before {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- pseudo class: active => Click change status content: "; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; opacity: 1; background: white; border-radius: 50%; z-index: 9999; transition-duration: 0s; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- when the active duration is 0, Moment when changes to the active state of / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- an instant transparency from 1 to 0; Size from 200 to 0 / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- click done, Excessive execution. 5 seconds animation / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- trigger state, with the transition - duration: 0 s; </style> </head> <div class="button">button</div> </body> </ HTML >Copy the code

CSS drawing triangles

  • -Serena: It’s a triangle.
The width and height of the border are set to 0, and the four sides of the border are distinguished by different colors. 3.#b is the upward triangle -- the length of the bottom of the triangle is twice the length of the border (border-left+border-right) -- the height of the triangle is the border-bottom value. So if you change the border-bottom, you get triangle 4 with different heights. 5. Example <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < style >. The triangle {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- triangle, the high div width is set to 0; Width: 0; height: 0; border: 100px solid transparent; Border-bottom: 100px solid red; border-bottom: 100px solid red; border-bottom: 100px solid red; border-bottom: 100px solid red; //------------- Up triangle bottom =left+right length, height is the bottom length}. Rectangle {width: 200px; height: 200px; background: blue; } </style> </head> <body> <div class="triangle"></div> <div class="rectangle"></div> </body> </html>Copy the code

Visibility: the difference between hidden and display:node

  • Visibility: Occupies the original position after being hidden
  • Display :none If it is hidden, it does not occupy the original position
  • But they’ll still be in the DOM node

Display: Causes and solutions for inline-block gaps

  • Cause: There are white space characters between labels
  • The solution:
  1. < font size=0; Then set the size you want in each child element(Font size can change the size of a character)
  2. Instead of breaking lines between labels, they just fit together<div>1</div><div>2</div>

@media Media enquiries

  • @media query, you can define different styles for different screen sizes.
  • Use:
    • You can do that in the link tag
    • You can do it in CSS
(1) @ @ media media grammar mediatype and | not | only (media feature) {CSS - Code; } 1. Mediatype: indicates the mediatype. -screen: indicates the computer, tablet, or mobile phone. Media feature: Media feature - Each media feature expression must be enclosed in parentheses. The and - operator is used to combine multiple media functions into a single media query - requires each link function to return true for the query to be true // --------------------------- to be true if both are tru - It is also used to combine media capabilities with media types. - not -only 4. 微 体 @media screen and (max-width: 300px) {// ----- if the document width is less than 300 pixels, change the background color (background-color) body {background-color:lightblue; } } @media only screen and (min-width: 640px) and (max-width: } @media screen and (width: 640px-1136px) {} @media screen and (width: 640px-1136px)} @media screen and (width: 640px)} @media screen and (width: 640px); 680px), screen and (orientation: landscape) and (max-width: 750px) { aside { display: none; } // Trigger a comma when the screen width is less than 680px or when the screen width is less than 750px and landscape.Copy the code

Use media queries in the link tag

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" Href ="style. CSS "type="text/ CSS" /> Indicates that the styleCopy the code

Use media queries in CSS

@media only screen and (max-width: 765px) { .media { background: red; } } @media only screen and (min-width: 1200px) { .media { background: yellow; } } @media only screen and (min-width: 766px) and (max-width: 1199px) { .media { background: blueviolet; }} indicates the screen width (1) is less than 765px, the background color is red (2) greater than 1200px, the background color is yellow (3) between 766px and 1199px, and the background color is bluevioletCopy the code

em

  • < font style = “font-size: 14px; font-size: 14px; When em is used as another attribute unit, it indicates its own font size
  • Disadvantages of the EM layout
    • The downside of the flexible em layout is that it is all over the place. Once the font size of a node changes, its descendants have to be recalculated
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "font-size: 20px; } .child { font-size: 5em; Width: 5em; // ----------- 1em = 100px; width: 5em; // ---------------- < img SRC = "https://itunes.apple.com/cn/app/index.html" style = "box-sizing: border-box; color: RGB (50, 50, 50); line-height: 5em; background: red; } </style> </head> <body> <div class="father"> <div>father</div> <div class="child">child</div> </div> </body> </html>Copy the code

rem

  • Principle: 1rem= font size of the root element

CSS pixels, physical pixels, double screen (pixel ratio)

  • Physical Pixels = CSS pixels (device independent pixels) * Pixel ratio (several times screen)

Rem layout

  • Px absolute unit
  • Em, REM,vw and so on are relative units
  1. Dynamically set the HTML font size
  2. Make the appropriate ratio between PX and REM (e.g. 1px= 1REM)
  3. The size of the font-size can be inherited, so to avoid setting the HTML’s font-size affecting the offspring’s font-size, do not reset the font-size on the body
< font size = 750px; 3. The size of the font can be inherited, so do not reset the font size 1 and 2 on the body to avoid changing the font size of the HTML to affect the offspring's font size. Dynamically set the font size of HTML ----------- (can be implemented with JS, Can also use CSS calc method implementation) (1) js document. DocumetElement. Style. FontSize = document. DocumetElement. Client / 750 + 'px' - an equation: DesignWidth - x = deviceWidth/750 * designWidth - x = deviceWidth/750 * designWidth - x = 1rem * designWidth = designWidth rem (2) css-calc() .html { font-size: calc(100vw / 750); } 3. body body { font-size: 16px; // The default font size for the browser is 16px}Copy the code

Rem layout – Instance 1 – Manual

Rem layout: - How rem is used to calculate the size of an element based on the size of the HTML, 1rem = the size of the HTML - How rem is used to dynamically set the size of the HTML <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; padding: 0; } html { /* font-size: calc(100vw / 750); * / / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- with CSS calc dynamic set the HTML () of the font size / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - vw note unit, Vw means the width of the viewport, that is, the total width of the viewport of the browser is 100vw // ------ calc(100vw / 750) means that the width of the browser is divided into 750 parts, Design draft based on 750 px design / / -- -- -- -- -- - 1 rem = calc (750) 100 vw / / / -- -- -- -- -- - according to the formula: DesignWidth // ------ If there is a div=100px on the design sheet // ------ } body {font-size: 16px; font-size: 16px; }.father {width: 100rem;}.father {width: 100rem;}.father {width: 100rem; // ---------------- 1:1: height: 100rem; background: goldenrod; font-size: 50rem; } </style> </head> <body> <div class="father">father</div> <script> document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) + 'px'; </script> </body> </html>Copy the code

Rem layout – Example 2 – How to write px directly to make it look like it’s actually IN REM units, i.e., when developing, it’s still in PX units

  • Write yourself a function of pxtorem, transform
  • Leverage third-party dependencies (PostCSs-pxTorem)
@function px2rem ($px) {@return $px + rem; // -----------}.demo {width: px2rem(100); height: px2rem(100); } (2) Postcss-pxtorem https://github.com/cuth/postcss-pxtorem if it is based on the webpack project, Can new postcss. Config. Js file -- -- -- -- -- -- -- -- -- -- -- -- -- - app. Vue -- -- -- -- -- -- -- -- -- -- -- -- -- - * {margin: 0; padding: 0; } html { font-size: calc(100vw / 750); } -- -- -- -- -- -- -- -- -- -- -- -- -- -- - postcss. Config. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - can also be in vue. Config. Js configuration in the -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the module. Exports = {plugins: {' autoprefixer: {-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- solving browser compatibility of prefix browsers: [' Android > = 4.0 ', 'iOS > = 7']}, 'postcss - pxtorem' : < span style = "box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; font-size: 14px; line-height: 20px; font-size: 14px; line-height: 20px; white-space: inherit;" 5, propList: ['*'], selectorBlackList: [], replace: true, mediaQuery: false, minPixelValue: 0, exclude: /node_modules/i } } } --------------- ue.config.js --------------- module.exports = { lintOnSave: true, css: {loaderOptions: {postcss: {plugins: [require('postcss-pxtorem')({rootValue: 1, // base of conversion selectorBlackList: [' weui ', 'mu], / / ignore conversion regular match propList: [' *'],]}}}}}),Copy the code

animation

  • animation: name duration timing-function delay iteration-count animation-direction;
  • Animation: animation name duration Speed curve delay execution number of play in turn to reverse execution;
  • The number of iteration – count: n | infinite play
  • animation-direction: normal|alternate; Whether to take turns in reverse execution
  • Alternate: alternate
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "box-sizing: border-box; color: RGB (74, 74, 74) -------------------------------------------------- @keyframes from { left: 0; } to { left: 100px; } } .father { width: 200px; height: 200px; background: red; position:relative; animation: go 1s ease-in-out 2s infinite alternate; // ------------- animation } </style> </head> <body> <div class="father">father</div> </body> </html>Copy the code

1 pixel physical border

  • Implement 1 physical pixel border using (pseudo-element, media query, Transform, device pixel ratio)
  • DevicePixelRatio: window.devicepixelratio
  • Physical Pixels = CSS pixels (device independent pixels) * Pixel ratio (several times screen)
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; padding: 0; } .one-px-border { height: 200px; width: 200px; position: relative; }. One - px - border: : before {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- pseudo element, the current element's child elements, not in the DOM, promote efficiency content: "'; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- you must set up the content position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: red; } @media screen and (-webkit-min-device-pixel-ratio: 2) {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - pixel ratio is 2, the scaling of the size of the y direction from 0.5 one - px - border: : before {transform: scaleY (0.5); } } @media screen and (-webkit-min-device-pixel-ratio: 3) {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - pixel ratio is 3, the scaling of the size of the y direction from 0.333 one - px - border: : before {transform: scaleY (0.33333); } } </style> </head> <body> <div class="one-px-border"></div> </body> </html>Copy the code

Elements are centered horizontally and vertically

  • Absolute positioning
    • Given the box width and height, margin is negative half
    • Until the width and height of the box, translate:
  • Flex layout
  • The grid layout
  • Table – cell layout
Table - cell layout <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; padding: 0; } .father { height: 300px; width: 300px; border: 1px solid black; display: table-cell; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the parent element display: table - cell vertical - align: middle; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- vertical center vertical align: middle text - align: center; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- horizontal center text - align: center / / note: / / 1. < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 20px; font-size: 14px! Important; word-break: inherit! Important; // 2. If the child element (width and height are not known), (parent element text-align: center); And the child element Settings (display: inline-block;) } .child { // height: 100px; // width: 100px; background: red; display: inline-block; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- note: here's the display: inline - block is a must, because of the high wide unknown / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- wide high known, with the margin: 0 auto; And the parent element does not require text-align:center; } </style> </head> <body> <div class="father"> <div class="child">child</div> </div> </body> </html>Copy the code
Table - Cell layout - do not know the width and height of child elements <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; padding: 0; } .father { height: 300px; width: 300px; border: 1px solid black; display: table-cell; vertical-align: middle; text-align: center; } .child { background: red; display: inline-block; } </style> </head> <body> <div class="father"> <div class="child">child</div> </div> </body> </html>Copy the code

  • Grid layout implements horizontal and vertical center
1 --.father {display: grid; // --------------------------------- display: grid; justify-items: center; // ------------------------- justify-items: center; align-items: center; // --------------------------- align-items: center; } .child {}Copy the code
2 --.father {display: grid; } .child { justify-self: center; align-self: center; }Copy the code

Single-line ellipsis and multi-line ellipsis

Single-line and multi-line ellipses <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < style >. Content1 {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ellipsis line background: yellow; width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }. Content2 {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the multi-line ellipsis background: red; width: 100px; overflow: hidden; display: -webkit-box; // ------------------------------ display: -webkit-box -webkit-box-orient: vertical; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - its direction - line - clamp: 2; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the number of rows} < / style > < / head > < body > < div class = "content1" > ellipsis ellipsis ellipsis ellipsis ellipsis line line line line line </div> <div class="content2"> </div> </body> </ HTML >Copy the code

The difference between a word-wrap and a word-break

  • Word wrap: break word — — — — — — — — — — — — — — — — — — — — — the whole word a newline
  • Word – break: break – all — — — — — — — — — — — — — — — — — — — — — — — words within a newline
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word; word-wrap: break-word; "> < span style = "max-width: 100%; width: 120px; background: yellow; margin: 10px; } .word-break { word-break: break-all; width: 120px; background: red; margin: 10px; } </style> </head> <body> <div class="word-wrap">abcdefgh go home sdfasdfasdfadfasdfasdfadfafd</div> <div class="word-break">abcdefgh go home sdfasdfasdfadfasdfasdfadfafd</div> </body> </html>Copy the code

Block, inline, inline-block

Common block-level elements: div, form, table, p, pre, H1 ~ H6, dl, OL, ul, Li, etc. Span, a, img, INPUT, textarea, I,strong, em, lable, SELECT, BR, etc. By default, the width of a block element automatically fills the width of its parent element. 2. Inline - Does not occupy a single line. < span style = "box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; line-height: 20px;" 3. Inline-block - Has both the block feature, which allows you to set width and height properties, and the line element, which does not occupy a lineCopy the code

Double column layout – left fixed, right adaptive

  • float
  • flex
  • Absolute positioning
(1) Left fixed, right adaptive - float layout - left flot: left; width = 200px; - No need to set <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; padding: 0; } html, body { width: 100%; height: 100%; } .container { width: 100%; height: 100%; } .left { background: red; height: 100%; float: left; // ------------------------ float: left width: 200px; {}. Right / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the right margin left: 200 px; margin-left: 200px; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- here must be set, otherwise the wrap text around the background happens: yellow; height: 100%; } </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>Copy the code
(2) Left fixed, right adaptive - Flex layout <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; padding: 0; } html, body { width: 100%; height: 100%; } .container { width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: flex-start; } .left { width: 200px; flex: 0 0 200px; background: red; height: 100%; } .right { flex: 1; background: yellow; height: 100%; } </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>Copy the code
(3) Absolute positioning <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; padding: 0; } html, body { width: 100%; height: 100%; } .container { width: 100%; height: 100%; position: relative; } .left { background: red; height: 100%; width: 200px; position: absolute; } .right { position: absolute; left: 200px; right: 0; background: yellow; height: 100%; } </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>Copy the code

Three column layout – Holy Grail layout

  • flex
  • Absolute positioning
  • floating
Grail Layout - Flex <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "max-width: 100%; padding: 0; } html, body { width: 100%; height: 100%; } .container { width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: flex-start; } .left { height: 100%; background: red; flex: 0 0 200px; } .center { height: 100%; background: blue; flex: 1; } .right { height: 100%; background: yellow; flex: 0 0 200px; } </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> </body> </html>Copy the code
<div class="left"></div> <div class="right"></div> <div class="main"></div> ## main  </div> .left { float: left; width: 100px; } .right { width: 200px; float: right; } .main { margin-left: 120px; margin-right: 220px; } ## or trigger BFC, BFC area, not overlapping with floating element. Main {overflow: hidden; }Copy the code

position

  • static inherit absolute relative fixed
  • Static: The default value. There is no positioning
    • B: Static
  • Inherit: specifies that the value of the position attribute should be inherited from the parent element
    • Inherit: Inherit
  • absolute
    • Absolute positioning, must have (reference), out of the document stream
    • The (reference) must have (location attribute), and the two must have (contain) a relationship
    • If a reference that has a location attribute and is an inclusion relation is not found, it is located relative to the browser window
  • relative
    • Relative positioning, the reference is the position before the element offset, left and right margin of auto is still valid and does not leave the document flow
  • fixed
    • The window position
  • The difference between absolute and fixed
    • When the scrollbar is present, the fixed positioning element will not scroll with the scrollbar, absolute absolute positioning will scroll with the scrollbar
  • sticky
    • This property can use pure CSS mode to achieve the ceiling effect - ceiling
    • Viscous positioning is a mixture of relative positioning and fixed positioning. Elements are positioned relative until they cross a certain threshold and then fixed
    • Elements with position: sticky set do not leave the document flow, but retain the original position of the element in the document flow.
      • When the element is rolled beyond the specified offset value in the container, the element is fixed at the specified position in the container. That is, if you set top: 50px, the sticky element will be fixed when it reaches the top 50px of the relative positioning element and will not move up.
      • The fixed relative offset of an element is relative to its nearest ancestor element with a scroll box
      • If none of the ancestor elements can be scrolled, then the element offset is calculated relative to the viewport.
      .wrap {position: relative; } .ceiling {position: sticky; top: 0; }Copy the code

The box model

  • Divided into standard box model, IE box model
  • box-sizing
    • Content-box Standard box model: Width and height include: Content
    • Border-box IE box model ——- Width and height include: Content, padding, border
    • Inherit inheritance

Difference between @import and link

  • affiliation
    • @import is a CSS syntax – only for importing styles
    • Link is an HTML tag – in addition to loading CSS, you can also set other attributes of the link tag, such as RSS, rel
  • Load order
    • The link tag introduces CSS with the page loaded – first
    • @import The imported CSS will not be loaded until after the page has been loaded
  • compatibility
    • @import is cSS2 syntax, only available in IE5 – poor compatibility
    • Link is an HTML tag that does not have compatibility – good compatibility
  • The weight
    • Styles introduced by Link have a greater weight than styles introduced by @import
  • DOM controllable
    • Js manipulates the DOM. You can insert the link tag, but not @import

data

Sticky – footer juejin. Cn/post / 684490… Sticky – footer aotu. IO/notes / 2017 /…

Landing the zhuanlan.zhihu.com/p/25321647 landing juejin. Cn/post / 684490… Landing the www.w3ctrain.com/2016/03/28/… Landing the www.jianshu.com/p/7e04ed3f4… CSS selector juejin.cn/post/684490… Pseudo elements Pseudo-classes animation (full) zhuanlan.zhihu.com/p/36502282 pseudo elements Pseudo-classes animation www.haorooms.com/post/css_wl… Pseudo elements Pseudo-classes animation segmentfault.com/a/119000000… Inline block-level elements have gaps juejin.cn/post/684490… The media query zhuanlan.zhihu.com/p/26882107 rem layout: juejin. Cn/post / 684490… Rem layout principle: juejin.cn/post/684490… Rem no no no giant Giant: juejin.cn/post/684490… Rem juejin. Cn/post / 684490… Rem can be used: juejin.cn/post/684490… Two-column three-column layout: juejin.cn/post/684490…