Jsliang Job Search series – 43 – CSS series summary

There are three parts to review the knowledge points.

Article address: Basic

• Advantages and disadvantages of DIV + CSS layout
• The principle of LoVe HAte:aThe labelhoverEvent failure problem,link -> visited -> hover -> active
• responsive: A website can be compatible with multiple terminals, rather than doing a specific version for each terminal, through@mediaDetect screen sizes of different devices for processing
• Vertical center
  • FlexLayout:align-items 和 justify-content
  • Absolute positioning layout:absolute + left/right/bottom/top: 0 + margin: auto
  • transformLayout:absolute + transform: translate(-50%, -50%)
• The document flow: Divides the form into rows from top to bottom and drains elements from left to right once in each row, creating a document flow, also known as a normal flow
• Out of document flowElements that leave the document flow no longer take up space in the document flow, but instead float above the document flow.float: left/rightAs well asposition: absolute/fixed
• Block-level scoped Context (BFC)
  • Description: a separate container on a page where children inside the container do not affect the outside elements, and the outside elements do not affect the inside elements
  • Resolving problems: Clean up internal float of elements and solve margin merge problems
  • Production condition: root elementhtml,float: left/right,position: absolute/fixed,display: inline-block/flex/grid,overflow: hidden
• px,em,rem 和 vw/vhThe difference between
• link 和 @importThe difference between
• Gradual increments and graceful downgrades
• Setting hidden elements:display: none,visibility: hidden,opacity: 0
• CSS selectors
  • Used after properties! importantOverrides element styles defined anywhere on the page
  • As astyleThe style in which attributes are written to elements (inline style)
  • idThe selector
  • Class selectors | | pseudo class selector attribute selectors (behind style front cover style)
  • Label selector
  • Wildcard selection
  • Browser custom styles
• Cascading context:background/border,z-indexIs a negative value, block-level element, floating element, inline element,z-index: 0 / auto,z-indexpositive
• display:inline,block,inline-block,table,none
• position:static,relative,position,fixed,sticky
• CSS 3 new features
• CSS optimization
  • Avoid chain selectors (match rules from right to left)
  • Avoid unnecessary repetition
  • avoid*The wildcard
  • Specify the introduction position: inheaddefinelink

Article address: box model

• Standard box: Standard boxcontentWidthEqual to setwidth, it’sActual total width = width + padding + border + margin. (Same with height)
• Weird box: Weird boxcontentWidthEqual to setwidth + padding + border, it’sActual total width = contentWidth + margin. (Same with height)
• Set box mode:inheritInheritance,content-boxStandard box,border-boxWeird box

Article address: mobile terminal

• Use the unit:em,rem,%As well asvw/vh
• layoutUse:remUnit, passposition: relative/absoluteLayout,Flexlayout
• 1 px implementation:::afterPseudo-classes +The transform: scaleY (0.5), the use ofBox-shadow: 0 0.5 0 0 # CCC
• 300ms click delay
  • Why it happens: Do you need a delay to determine whether the user needs to click or double click
  • How to resolve: Setup<meta>And throughFastClick 库

There are 46 references in this series.

• 50 CSS classic interview questions[Recommended Reading: 30min]
• 12 things YOU need to know about HTML and CSS[Recommended Reading: 30min]

• Dry! All kinds of common layout + well-known site instance analysis[Reading Suggestions: 1H]
• CSS common layout modes[Reading Suggestions: 1H]

• Flex Layout Tutorial: Syntax section[Reading Suggestions: 1H]
• Flex Layout Tutorial: Sample article[Reading Suggestions: 1H]
• Flex layout in 30 minutes[Recommended Reading: 30min]
• Display: Flex Layout tutorial for myself[Recommended Reading: 30min]

• Mars – mobile needs a hero[Reading Suggestions: None]
• Tencent Mobile Web front-end knowledge base[Reading Suggestions: None]
• Here’s what you need to know about mobile adaptation[Recommended Reading: 30min]
• How to solve the problem of mobile Click event delay of 300ms?【 Reading Suggestions: 20min】
• Design solution — the cause and solution of 300ms delay on mobile terminal【 Reading Suggestions: 20min】
• Detail the classic REM and Rookie VW layouts on mobile[Recommended Reading: 30min]
• Mobile 1PX solution[Recommended Reading: 30min]
• How do Retina mobile devices achieve true 1px lines?【 Reading Suggestions: 20min】
• Rem layout parsing【 Reading Suggestions: 5min】

• CSS Tips[Recommended Reading: 30min]
• Summary of middle CSS Settings – Super complete[Recommended Reading: 30min]
• 8 Tips for CSS Performance optimization【 Reading Suggestions: 20min】
• Does CSS load block?[Recommended Reading: 30min]
• Does CSS load block[Recommended Reading: 30min]
• Incredible pure CSS scrolling progress bar effect[Reading Suggestion: 30min]
• Detailed positioning of the CSS【 Reading Suggestions: 20min】
• Css unit px, REM, EM, VW, vh difference【 Reading Suggestions: 10min】
• Talk about REM versus VW — REM【 Reading Suggestions: 5min】
• Let’s get back to position:sticky【 Reading Suggestions: 20min】
• Some in-depth understanding and application of CSS line height【 Reading Suggestions: 10min】
• What if the browser has a precision error when converting REM to PX?【 Reading Suggestions: 20min】
• Thoroughly understand word-break, word-wrap, and white-space【 Reading Suggestions: 20min】

• Personal Summary (CSS3 new features)[Reading Suggestions: 1H]
• High performance CSS3 animation【 Reading Suggestions: 20min】
• Fun CSS3 effects challenge summary【 Reading Suggestions: 20min】
• From bronze to king 10 CSS3 pseudo-class using skills and use, understand a ha【 Reading Suggestions: 20min】

• Thoroughly understand CSS cascading context, cascading hierarchy, cascading order, and Z-index[Recommended Reading: 30min]
• In-depth understanding of cascading context and cascading order in CSS[Recommended Reading: 40min]

• What is BFC? Under what conditions can it be triggered? What are the application scenarios?【 Reading Suggestions: 20min】
• Learning Block Formatting Context (BFC)【 Reading Suggestions: 20min】
• MDN – Block formatting context【 Reading Suggestions: 20min】
• BFC(Block-level formatting Context)【 Reading Suggestions: 5min】

• Web developers need to know CSS Tricks[Reading Suggestions: None]
• All that cold stuff in the CSS world[Recommended Reading: 30min]
• Think about front-end design draft and workflow from font size of netease and Taobao【 Reading Suggestions: 20min】
• Can you ditch CSS preprocessors in 2019?【 Reading Suggestions: 10min】
• A brief introduction to CSS Preprocessors (1) : Why use preprocessors?【 Reading Suggestions: 20min】
• The next innovation in layout【 Reading Suggestions: 20min】

Jsliang’s document library is licensed by Junrong Liang under the Creative Commons Attribution – Non-commercial – Share alike 4.0 International License. Based on the github.com/LiangJunron… On the creation of works. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.