Q: Explain float and how it works? Method to clear the float

A: Floating elements leave the document flow and do not take up space. The floating element touches the border that contains it or stays in the border of the floating element.

This method is to add an empty tag definition CSS clear:both. The downside is adding meaningless labels.

This method is only applicable to non-Internet Explorer browsers. The specific writing method can refer to the following examples. Note the following points in use. Height :0 must be set in the pseudo-object where the floating element is to be cleared, otherwise the element will be several pixels higher than it really is.

#parent::after{
  content:"";
  height:0;
  visibility:hidden;
  display:block;
  clear:both;
}
Copy the code

3. Overflow hiding

overflow: hidden;
Copy the code

4. Float external elements

Q: How do I center a box vertically and horizontally on a page

Answer: method one: known width height

div{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
Copy the code

Method two: unknown width and height

div{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

Q: Front-end performance optimization solution

A: 1, reduce DOM operation 2, before deployment, image compression, code compression 3, optimize JS code structure, reduce redundant code 4, reduce HTTP requests, set HTTP cache reasonably 5, use content distribution CDN acceleration 6, static resource cache 7, image loading delay

Q: CSS selector priority order

A:

  • ID selector, such as # ID {}
  • Class selectors, such as.class{}
  • Property selector, such as a[href=” SegmentFault.com “]{}
  • Pseudoclass selectors, such as hover{}
  • Pseudo-element selectors such as ::before{}
  • Label selectors, such as SPAN {}
  • Wildcard selectors, such as *{}

Q: What are the new features of CSS3

A:

border-radiusRounded cornersbox-shadowshadowtext-shadowText Shadow gradient linear gradienttransformRotate, zoom, move, or tilt Media Query multi-column layout with multiple backgroundsCopy the code

Q: What is an empty element?

A: That is, HTML elements without content, such as BR, meta, HR, link, input, img

Q: How do I communicate with multiple tabs in a browser

A: 1. Timer setInterval + cookie Set A setInterval timer on page A to refresh continuously to check whether the value of Cookies changes, and refresh if it does. Since Cookies are readable in the same domain, the value of Cookies can be changed during the audit of page B, so page A can be obtained naturally. This would have done the job I wanted, but it would have been a waste of resources. While it’s hard to feel wasteful in this era of over-performance, this implementation is really not elegant.

2. Use localStorage Localstorage is the storage space shared by multiple tabs in the browser, so it can be used for communication between multiple tabs (PS: Session is the session-level storage space, and each TAB is independent). Add a listener directly to the window object:

window.onstorage = (e) = > {console.log(e)}
// Or so
window.addEventListener('storage'.(e) = > console.log(e))
Copy the code

Onstorage and storage events are triggered only when localStorage is modified on a page other than the current page. Modifying localStorage on the current page does not trigger the listener function. SetItem (‘a’, ‘b’) : localstorage. setItem(‘a’, ‘b’);

Q: Why do I initialize CSS styles

A: 1. Browser differences Different browsers have different default values for some tags. If the CSS is not initialized, the page display will be different between browsers

2. Improve the quality of your coding. If you don’t initialize it, the entire page will be done badly, with a lot of repetitive CSS styles

Q: what are the new pseudo classes in CSS3?

A:

p:first-of-type Selects the first element belonging to its parent elementp:last-of-typeSelect the last element belonging to its parent elementp:only-of-typeSelect an element that is unique to its parentp:only-childSelect a unique child element that belongs to its parentp:nth-child(2) selects the second child of the parent elementCopy the code

Q: Talk about your understanding of Canvas, SVG, webGL

A:

  1. Canvas is a newly added element object of HTML5, which is literally a Canvas. Browser JS is equipped with corresponding operation API, so it can draw directly without relying on other APIS or components, which is equivalent to 2D API. Canvas is suitable for scenes with bitmaps, high data volume and high drawing frequency (frame rate), such as animations and games.

  2. SVG is an XML-based markup language for drawing points, lines, and graphs on data; SVG is suitable for vector graphs and scenes with low data volume and low drawing frequency, such as graphs and charts.

  3. WebGL (Full Write Web Graphics Library) is a 3D drawing standard. Generally speaking, WebGL is the 3D version of Canvas drawing. Because of the complexity of native WebGL, we often use some third-party libraries, such as three.js, etc. WebGL is mainly used for 3D presentation, animation and games.

Continuously updated