1. How to understand semantics

The name of the label has some intuitive meaning, you can directly see the possible function

Advantages:

1. Clear structure when the page fails to load

2. It is conducive to SEO (making search results rank high) optimization and is conducive to being included by search engines

3. During the development and maintenance of the project, it is beneficial to reduce the difficulty of development and save costs

2. Page rendering process, backflow and redrawing

1. Page presentation process

(1) First, the browser will parse the OBTAINED HTML code into a DOM tree, and each tag in the HTML is a node in the DOM tree

(2) The browser will parse all styles into style structures

(3) After combining DOM tree and style structure, construct render tree, in which each node becomes box(Box dimensions)

(4) After the Render Tree is built, the browser will draw the corresponding page according to it

2. Return

Backflow occurs when content in render Tree needs to be rebuilt due to changes in element size, layout, display, etc. (changes to page elements affect layout). Each page has at least one backflow, the first time the page loads.

3. Redrawn

When some elements in the Render Tree need to be updated with attributes that only affect the appearance of the element, the style (e.g. color) does not affect the layout is called repainting. Reflux must be redrawn, redrawn does not have reflux at all.

3. The difference between link and import

1. Essential difference: Link is an XHTML tag and @import is one of the ways CSS provides it

2. Different reference types: Link can import CSS/JS files, while import can only import CSS files

3. Difference in loading order: The CSS imported by link is loaded with the page, while the CSS imported by @import is loaded after the page is loaded

4. Compatibility differences: Link is XHTML tag with almost no compatibility problems, @import belongs to CSS2.1, IE5 can not be identified

4. The difference between PX and EM

Similarities: Both are units of length

Difference: Px is a unit of pixels, an absolute unit that doesn’t change when other elements change size. Em is relative to the font size of its parent element and is a relative unit.

5. Clear floating methods

1. Define the height or style of the parent element: overflow: Hidden

2. Add an empty element at the end and add style: clear: both

3. Define pseudo classes for parent elements

.clearfloat:after{display:block; clear:both; content:""; visibility:hidden; The height:0}. Clearfloat {zoom:1}//zoom property is a proprietary property of Internet Explorer that allows you to set or retrieve the scale of an objectCopy the code

6. What are elegant degradation and progressive enhancement

1. Progressive enhancement

For the lower version of the browser to build the page, to ensure the most basic functions, and then for the higher version of the browser effect, interaction and other improvements and the pursuit of functionality to achieve better user experience.

2. Rank: 2

Start by building full functionality and then make it compatible with older browsers

The difference between:

Graceful downgrading starts with a complex status quo and tries to reduce the supply of user experience (see below). Progressive enhancement starts with a very basic, working version and continues to evolve to meet the needs of future environments (see moving forward).

7. Display: None and visibility:hidden

1. Display: None: Destroys the corresponding DOM element, so it is out of the document stream and will not be parsed by the browser. Visibility: Hidden is a visual disappearance, which can be understood as zero transparency, occupying space in the document flow and being parsed by the browser.

2. Use visibility: hidden to perform better than display: None. Display: None Backflow is generated when the page is switched. And visibility: hidden will not.

8. The difference between relative, absolute, fixed and sticky

1. Relative: does not deviate from the standard flow and is generally used with absolute (child absolute parent phase)

Absolute: positioning relative to the parent element closest to it, out of the standard flow

3. Fixed: fixed positioning, relative to the browser viewport positioning, will not scroll with the page scrolling.

4. Sticky: sticky positioning, different from the previous attributes, it will produce a dynamic effect, much like the combination of relative and fixed: In some cases it is “relative”, while in other cases it is “fixed”. In other cases it is “fixed”. If sticky is effective, it must be used with top, bottom, left and right attributes. Otherwise, it is equivalent to relative positioning and does not produce the effect of “dynamic fixation”. The reason is that these four attributes are used to define “offset distance”, which browsers treat as the threshold for sticky to take effect

9. Examples of block-level elements and inline elements

Display: block/table: div, p, H1-h6, ul, OL, DL, li, header, footer, aside, section, article, form, table, etc

2. Display: Inline: A, B, br, em, I, SPAN, strong, small, code, Q, sub, sup

3. Display: inline-block: button, img, input, select, textarea

10. CSS box model

1. Standard box: width = content

(box-sizing: border-box) width = border + padding + content

11. It features

1. Semantic labels

  • Defines the header area of the document

  • defines the tail area of the document

  • defines the navigation of the document

  • Defines sections (sections, sections) in a document

  • defines a page-independent content area

  • defines the sidebar content of the page

  • describes the details of a document or part of a document

  • The

    tag contains the title of the Details element

  • defines dialog boxes, such as prompt boxes

2. Enhanced forms

Added input type

  • Color: Used to select a color

  • Date: Selects a date from a date picker

  • Datetime: Select a date (UTC time)

  • Datetime-local: Select a date and time (no time zone)

  • Datetime-local: Select a date and time (no time zone)

  • Email: Input field containing the E-mail address

  • Month: Selects a month

  • Number: indicates the input field of a value

  • Range: Input field of numeric values within a range

  • Search: Search the domain

  • Tel: Defines the input phone number field

  • Time: Select a time

  • Url: enter the URL address field

  • Week: Select the week and year

3. Add form attributes

  • Placehoder property, where a short prompt is displayed on the input field before the user enters a value. That is, the default prompt of our common input box disappears after the user enters.
  • The Required attribute, which is a Boolean attribute. The input field cannot be empty
  • The Pattern attribute describes a regular expression used to validate the value of an element.
  • Min and Max properties to set the minimum and maximum value of an element.
  • The step property, which specifies the legal number interval for the input field.
  • Height and width attributes for the image height and width of the label of type image.
  • Autofocus property, which is a Boolean property. Specifies that the domain automatically gets focus when the page loads.
  • Multiple property, which is a Boolean property. Specifies that multiple values can be selected from an element.

4. Add video and audio labels

5. Canvas, SVG drawing

6. Location

7. Drag and drop API

8. Web Worker (a multi-threaded solution provided by HTML5)

9.webStorage

10. WebSocket (a full-duplex communication protocol provided by HTML5 over a single TCP connection)

12. The range of new features

1. Animation properties

@keyframes/animation

2. Border properties

border-image/border-radius/border-shadow

3. Color properties

opacity

4. Elastic box model

The flex/align – the content/align – item/align – self/the justify – the content/order…

5. Transitions and animations

(1) 2D/3D transformation

transform/translate/scale/rotate/translate3d/skew

(2) transition

transition

13.BFC understanding and application

1. The concept

Block Format Content (block-level formatting context) is a independently rendered area in which the rendering of internal elements does not affect elements outside the boundary.

Application 2.

(1) Pseudo-element clearance float

(2) Solve the problem of parent element height collapse and overlapping margins

3. How

(1) And elements

(2) Float property (not None)

(3) Display attribute (inline-block, table-cell, fiex, inline-flex)

(4) Position attribute (not static, relative)

(5) Overflow attribute (not visible)

14. What are the ways of center alignment

Horizontal center

(1) Inline element: text-align: center

Margin: 0 auto

(3) Absolute: (left: 50%+margin-left: -50%)

(4) translateX

(5) flex: (display: flex; The justify – content: center)

Vertical center

(1) Inline element: height: line-height

(2) Absolute: (top:50%+margin-top:-50%)

(3) the translateY

(4) flex (display: flex; The flex – direction: the column; The justify – content: center)

15. The CSS selector

Priority:! Important > Inline > ID selector > Class selector > Tag selector > General selector

Pseudoclass selector (pseudoclass represents a particular state of an element)

  • :activeAdd styles to the activated elements
  • :focusAdds styles to elements that have keyboard input focus
  • :hoverAdd styles to elements when the mouse hovers over them
  • :linkAdd styles to links that are not accessed
  • :visitedAdds styles to links that have been accessed. (Privacy issues can only be set to color)
  • :first-childAdds a style to the first child of the element
  • :langDirection band designationlangAttribute to the element add style
  • ::selectionMatches portions that are selected or highlighted by the user

Pseudo-element selectors (representing special locations in elements that do not appear in the DOM)

  • :first-letterAdds a special style to the first letter of the text.
  • :first-lineAdds a special style to the first line of text.
  • :beforeAdd content before the element.
  • :afterAdd content after the element

16. Write style before and after the body

1. Write before body

Facilitate gradual rendering by the browser

2. Write after body

Because the browser parses the HTML document line by line, parsing to the style at the end causes the browser to stop rendering until it loads and the parsed style sheet is complete

17.DIV+CSS layout is different from table layout

The table layout

Disadvantages:

1. Display styles are bound to data

2. The layout is not flexible enough

3. A page may have a large number of table elements with high code redundancy

4. It is not conducive to being included by search engines

Advantages:

1. Easy to understand

2. Different browsers generally see the same effect

DIV + CSS layout

Advantages:

1. Conform to W3C standards

2. Search engines are friendlier

3. Convenient style adjustment, content and style separation

4. CSS style code is simple, for a large website can save a lot of bandwidth

18. How do I draw a 0.5px line

1. Use meta ViewPort

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"Copy the code

** is mobile only

2. Transform: Scale ()

The transform: scale (0.5, 0.5);Copy the code