1, about BFC understanding 2, box model understanding 3, box-sizing understanding 4, progressive enhancement VS elegant downgrade 5, URL -> page loading complete the entire process 6, JS components 7, how to cross-domain access 8, JS judge array 9, strict mode 10, Ajax advantages and disadvantages What's the difference between HTML, XML, and XHTML 12. Semantic HTML 13. Separation of content and style 14. 19. What is the difference between using link and @import when you import a page style? 20Copy the code

Understanding of BFC

BFC is used to format block-level box BFC: provides an environment in which HTML elements are laid out according to certain rules. Ex: For example, a floating element will form a BFC. The inner elements of the floating element are mainly affected by the floating element, but the two floating elements do not affect each other. This can be thought of as a separate container where the rules inside do not affect the outside. So under what circumstances will a BFC be generated: 1, float elements, float values other than none Position (absolite, fixed) 3, dispaly = the inline – blocks | table – cells | table captions – 4, overflow value other than the visible role: 2. Contains floating elements. 3. If two elements belong to the same BFC, the upper and lower margins will overlap, but if two elements belong to two different BFC, margins will not overlap

Understanding of the box model

CSS box model, Contains the content, padding, border, margin of these basic such as such as where the content is everyone know I said in the set width = As mentioned in the BFC, the CSS margins overlap in one BFC. The solution is to put them in both BFC’s. One thing we need to be aware of when using the box model is browser compatibility, which is a good solution for declaring
, ul has the padding in mozilia by default, while in IE only margin has the padding. In box models we often use a property called box-sizing, which will separate the page, and this is also a common problem with the first page

The understanding of the box – sizing

Box – sizing: content – box | border – box | inherit the content – box is the default, total width = margin, border and padding + width border – box: Width = border + padding + content = width + margin + width = 100% box-width = 100% box-width

Progressive enhancement vs. elegant degradation

Progressive enhancement: low browser to achieve the basic functions, advanced browser interactions and effects to achieve better experience Graceful degradation: in advanced browser to realize full function, then for low-level browser hack to low-level browser can run normally Because the two versions of the browser support for CSS 3 and caused by the different story

Url -> Page load complete the entire process

1. The browser queries the IP address corresponding to the domain name. 2. The browser establishes a socket connection with the server based on the IP address. 4. The browser is disconnected from the server. This is too much for me to write a blog about, but that’s enough for the interview

Js component

ECMAScript defines the properties, methods, and objects of the scripting language. 2. Document Object Type (DOM) : plans the entire page as a document composed of a hierarchy of nodes

How to access cross-domain

1, jSONp cross-domain access 2, window.name cross-domain 3, HTML5 window.postmessage method 4, HTTP header to add origin This is my blog devoted to the two types of cross-domain requests that JSONP and Origin use most today

Js judge array

return Object.prototype.toString.call(arg) === '[object Array]'Copy the code

Strict mode

How to use: The flag ‘use strict’ when entering the strict mode is stricter, safer, and faster. 3. Enhanced security measures: (1) Prohibit this from referring to a global object; (2) Prohibit traversing the call stack within a function; (3) Prohibit the deletion of variables unless an object is created using a different =true; If you assign a read-only property to an object that only has a getter, and add a new property to an object that is not allowed to extend, you will get an error. Objects must not have arguments of the same name. Functions must not have arguments of the same name. 7

Pros and cons of Ajax

Advantages: Reduce the burden of the server, on-demand data, minimize redundant requests, local refresh. Cons: Browser differences, streaming and mobile support not good enough

What’s the difference between HTML, XML, and XHTML

HTML: Hypertext Markup Language for displaying information, case insensitive XHTML: An updated version of HTML, case sensitive XML: Extensible Markup Language is used to transmit and store data

Semantic HTML

Intuitively understand the functions of labels and attributes for easy reading and maintenance

Content is separated from style

Can ensure that the web page stable degradation, easy to maintain

Use of meta tags

Meta name=”keyword” meta name=”description” meta name=”description” content=”name Name =”viewport” content=”width=device-width, initial-scale=1.0

What the document states

Let the browser parser know what specifications are needed to parse the document

Strict mode and promiscuous mode

Promiscuous mode: Pages are displayed in a looser, backward-compatible manner

<! Doctyle HTML > function

Parse the rendered page using the HTML5 standard and enter promiscuous mode if not written

Common Browser kernel

Internet Explorer uses Trident Firefox Gecko Opera Blink Safari Chrome WebKitCopy the code

What’s the difference between using link and @import when importing styles to a page

The link is loaded at the same time as the page is loaded, and @import is loaded after the page is loaded

Understanding the browser kernel

Rendering engine and JS engine Rendering engine: responsible for obtaining the content of the web page, collating information, and computing the display of the web page JS engine: parsing and executing JS to achieve the dynamic effect of the web page

My Github, your attention is what keeps me going github.com/skychenbo/i…