1. Label semantics
  • The code structure is clearer
  • By name, even people with no basic knowledge can figure out what this part of code does
  • Convenient team development and maintenance, more readable code
  • Conducive to SEO optimization, crawlers rely on tags to determine context
  1. Meta tags
  • Meta tags provide metadata about HTML documents that are not displayed on the page, but are readable to machines, tell browsers how to parse the page, and tell search engines keywords (SEO optimization)
  • Meta tells the browser how to parse the page, describes the main content of the page, and sets the HTTP header content that the server sends to the browser
  • Charset =” UTF-8 “Sets the character encoding used on the page
  • Viewport Sets the viewport and mobile adaptation
  1. CSS and javascript introduced location
  • The introduction of script tag is generally placed at the end of the body, so as to avoid the script being too large and taking a long time to load, which will lead to a blank page for a long time. This is because the rendering process and JS process are mutually exclusive, and the script will block the rendering of the page. The loading between scripts is synchronous and executed in the order of introduction. But there are two attributes that affect the order in which the script executes and the page renders
    • Defer: Rendering will not block, so that even if placed inside the header it will not block page loading, but js will finish loading before document and will not affect the order of execution between scripts, in the order introduced
    • Async: Just like defer, it solves blocking rendering, but it is executed after the document is loaded, and its execution order is based on which document is loaded first. Therefore, there are requirements on file order, so do not use it if there is a dependency
  1. What are HTML block-level elements, inline elements, inline block elements? What’s the difference?
  • Block level elements: div, H1-H6, P, ul, OL, DL, li, HR, DT, DD, form, table
    • Block elements have a single row
    • Wide and high effective
    • The default width is the same as the parent element, and the content is spread out height
    • Margin, padding all in effect
  • Line elements: EM, I, del, small, strong, INS, SPAN, A
    • Width and height do not take effect
    • Left and right margin does not take effect
    • Line up
    • Size depends on content
    • Padding is effective
  • Inline block elements: img, input(form element, excluding form)
    • Line up
    • Wide and high effective
    • Margin, padding works


  1. Box model, what is the standard CSS box model?
  • margin padding border content

  • Standard box model: box width = width + padding + border + margin

  • Weird box model: box width = width (including padding+border) + margin

  1. Range of new features
  • Border – radius rounded corners
  • Border-image Border image
    • border-image: url() top right bottom left
    • border-width: top right bottom left
  • Box-shadow: x, Y,size, opCity
  • Text-shadow Indicates the shadow of the text
  • Linear-gradient linear gradient
    • background: linear-gradient(to position , color,color,… ,color)
  • Radial gradient
    • background: radial-gradient(shap size at position , color,color,… ,color)
  • 2D/3D transform: Rotate scale translate
  • @media Media query, set according to the screen width, used to solve mobile adaptation, according to the screen size of the CSS to take effect
  • Flex Layout (Elastic box)
  1. Implement element hiding
  • Display: None no placeholders, source code visible
  • Opacity: 0, source code visible, 0
  • Visibility: hidden Placeholder, source code visible
  • Position: top:-9999px,left:-9999px Moves the element out of the window using position
  1. Center the element horizontally/vertically
  • Horizontal center
    • Text-align: center
    • Margin: 0 auto
    • position: left: 50%; transform: translate(-50%)
  • Vertical center
    • height = line-height
    • verticle-align: middle
    • position: top: 50%; transform: translate(0,-50%)
  1. Position the element horizontally and vertically centered
  • Wide high fixed position: top: 0, left: 0, right: 0, bottom: 0, margin: auto
  • Position: top: 50%, left: 50%, margin-left: -width/2px,margin-top: height/2px
  • dispaly: flex; Justify -content: center,align-items: Center
  • position: left: 50%,top: 50%; transform: translate(-50%,-50%)
  1. Position
  • The static default
  • Relative positioning does not deviate from its own position, does not affect the characteristics of the element itself, and z-index increases the level
  • Absolute, off-scaling, deviation from the parent element, and no deviation from the body element
  • Fixed Fixed position, off scale, deviation relative to Windows
  1. Remove the floating
  • Sets the height of the parent element
  • Use Overflow: Hidden
  • Use extra label method: Add a label to the end of the child element, add a style to the label, style definition clear:both closed float
  • Pseudo-element cleanup float
 content: ' ',
 height: 0,
 display: block,
 clear: both,
 visibility: hidden
 *zoom: 1
Copy the code
  • Double pseudo-element cleanup float
.clearfix::after {
 content: ' ',
 display: table
 clear: both
 *zoom: 1
Copy the code
  1. Margins merge and collapse
  • The two block elements are vertically aligned to add a margin on top and a margin on bottom, resulting in a margin merge where the largest element is displayed
  • If you put a margin on a nested block element, the parent element will fall down. This is called margin collapse
    • Setting a border on the parent box (not recommended)
    • With the overflow: hidden
    • Add padding (without margin)
  1. Rearrange and redraw
  • Part of the render tree (or the entire render tree) needs to be re-analyzed and the node sizes recalculated. This is called rearrangement. Note that there is at least one rearrange-initialization page layout.
  • Parts of the screen need to be updated when the node’s geometry changes or when the style changes, such as changing the element’s background color. Such updates are called redraws.
  • When will rearrange redraw be triggered
    • Add, delete, and update DOM nodes
    • Display: None Hides a DOM node – triggering rearrangement and redrawing
    • Hide a DOM node by visibility: Hidden – only triggers redraw because there are no geometric changes
    • Move or animate the DOM nodes in the page
    • Add a style sheet and adjust the style properties
    • User actions, such as resizing a window, changing font size, or scrolling.
  1. What are the CSS selectors? What is the priority of the selector?
  • The id selector
  • Class selectors
  • Property selector
  • Pseudo class selector
  • Label selector
  • Pseudo element selector
  • Wildcard selector
  • Priority: Inline Style > ID selector (100)> Class selector (10) = Attribute selector = Pseudo-class selector > Element selector (1) = Relation selector = Pseudo-element selector > Wildcard selector (0)
  • ! important
  • Descendant selector selects all
  • The child selector selects only parent children