This is the 26th day of my participation in the August More Text Challenge

Yesterday, I forgot to update the article because I read it. Even though I know it doesn’t count now, I still want to update it. It has become my obsessive-compulsive disorder to update it for 28 days

Which browser tests are commonly used? What Layout engines are available?

Browsers: Internet Explorer, Chrome, FireFox, Safari, Opera.

Kernel: Trident, Gecko, Presto, Webkit.

Understanding the browser kernel?

It is mainly divided into two parts: layout Engineer or Rendering Engine and JS Engine.

Rendering engine: Takes the content of a web page (HTML, XML, images, etc.), collates information (such as adding CSS, etc.), calculates how the page should appear, and then outputs it to a monitor or printer. The syntax of the web page will be interpreted differently depending on the browser kernel, so the rendering effect will be different. All Web browsers, E-mail clients, and other applications that need to edit and display web content require a kernel.

Javascript engine: Parses and executes javascript to achieve dynamic web pages.

At the beginning, rendering engines and JS engines were not clearly distinguished, but later JS engines became more and more independent, and the kernel tended to refer only to rendering engines.

What are the most common attributes of box-sizing? What are the roles of the two?

box-sizing: content-box|border-box|inherit;

Content-box: The width and height applied to the element’s content box, respectively. Draws the inner margin and border of the element outside the width and height (the element default).

Border-box: Any inside margins and borders specified by the element will be drawn within the specified width and height. The width and height of the content are obtained by subtracting the border and inner margin from the specified width and height, respectively.

Doctype? What is the difference between standard mode and compatible mode?

Tell the browser’s parser what document to use to parse the document. A non-existent or improperly formatted DOCTYPE will cause the document to be rendered in compatibility mode.

Standard mode typography and JS mode are run to the highest standards supported by the browser. In compatibility mode, pages are displayed in a loosely backward compatible manner, mimicking the behavior of older browsers in case the site doesn’t work.

What is the difference between using link and @import when importing page styles?

(1) Link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS, rel connection attributes, etc. @import is provided by CSS and can only be used to load CSS;

(2) When the page is loaded, link is loaded at the same time, and the CSS referenced by @import waits until the page is loaded;

(3) Import is proposed by CSS2.1 and can only be recognized in IE5, while link is an XHTML tag and has no compatibility problems.

What’s new in HTML5?

(1) the drawing canvas;

(2) Video and audio elements for media playback;

(3) Local offline storage localStorage stores data for a long time. Data is not lost after the browser is closed.

(4) The data of sessionStorage is automatically deleted after the browser closes;

(5) More semantic content elements, such as article, footer, header, nav, section;

(6) Form controls, Calendar, Date, time, email, URL, search;

(7) New technologies webworker, websocket, Geolocation;