Part1 CSS related
1 What are the inline-element and block elements?
Common inline elements (in-line elements) include a, b, span, i, em, input, select, img, etc.
Common block elements include div, ul, li, h1~h6, talbe, ol, ul, td, p, etc.
2 Floating related
A floating layout refers to removing an element from a normal stream/document stream so that it can move left and right until its outer edge meets the edge containing the box or another floating box. A floating box does not belong to a normal stream in a document. When an element floats, it will not affect the layout of block-level elements but will only affect the arrangement of inline elements.
It is precisely because the floating element is separated from the document stream that its parent element does not know its existence, so it will behave as a height of 0. No matter how the floating element changes, its parent element will not wrap it with it. This phenomenon is also called "height collapse".
In the following example, regardless of how the #floatDom height changes, the #parent height is always 0, which will cause the parent element border to be unable to be stretched open, the background cannot be displayed, etc.
<div id="parent"> <div id="floatDOM" style="float:left;width:300px;height:300px;"> <div style="clear:both"></div>
Because of the existence of highly collapsed (which is often not what we expect), floating must be cleared. Here are several ways to clear floating:
•Add elements with "clear: both" style after floating elements
<div id="parent"> <div id="floatDOM" style="float:left;width:300px;height:300px;"> <div style="clear:both"></div>
You can also add br tags, which come with clear: both attributes
<div id="parent"> <div id="floatDOM" style="float:left;width:300px;height:300px;"> <br/></div>
The advantages of using this method to clear floating are that it is easy to understand, easy to master, and the disadvantages are also obvious. Many meaningless labels are added, which is very painful in later maintenance.
•Add the style "overflow:hidden" to the parent element
<div id="parent" style="overflow:hidden"> <div id="floatDOM" style="float:left;width:300px;height:300px;"></div>
There are no structural and semantic problems in this way and the amount of code is very small. However, when the content increases, the content will not be automatically wrapped, and the content will be hidden, and the elements that need to be overflowed cannot be displayed.
•Use: after pseudo-element
<style type="text/css"> .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }</style><div id="parent"> <div id="floatDOM" style="float:left;width:300px;height:300px;"></div>Using this method, you only need to add a class to the target element, which is also the most commonly used method at present.
Reference
iyunlu.com/view/css-xht
3. The difference between relative layout and absolute layout
The most essential difference between relative layout and absolute layout is whether it is separated from the document flow.
The relative layout is not separated from the document flow, that is, after setting the relative layout of the element, the document flow still maintains its original position. By setting properties such as top and left, it can set its offset relative to the original position.
Absolute layout is separated from the document flow, that is, the elements in the document flow do not know the existence of the absolute layout element. The positioning of the absolute layout is relative to the elements with relative layout or absolute layout in the parent element. If none exists, it is relative to the body layout.
4 Box Model
The box model defines the display form of an element, including content (content), padding (inner margin), border (boundary) and margin (outer margin). There are currently two box model standards, one is the W3C standard box model, and the other is the IE box model, which adopts Microsoft's own standards.
The difference between these two box models is mainly in the calculation of element width. The width defined in css in standard mode is the width of the content, the width occupied by the entire element in the page, and the calculation formula is:
The code copy is as follows:
DOM_Width = width + padding + border + margin
In the IE box model, the width defined in css is content + padding + border. Therefore, in the IE box model, the width occupied by the entire element in the page is (the same as height)
The code copy is as follows:
DOM_Width = width + margin
In CSS3, two box models are retained using box-sizing . When we set box-sizing: content-box (default), we adopt the W3C standard box model. When we set box-sizing:border-box , we use the IE box model.
5 CSS reset (reset)
Each browser has some styles that come with it, and the styles that come with it are often different in each browser, which brings some inconvenience to our layout. Therefore, in practice, it is often necessary to "clear" the browser's css style, that is, CSS reset. The simplest reset code is as follows:
*{ margin:0; padding:0;}Although this method is simple, it is too "violent", because many elements such as div and li do not have margin or padding styles by default, which is tantamount to causing a lot of redundancy. The more recommended way to write reset code according to your needs.
Reference:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset
6 CSS hack
Since different browsers have different parsing and support for CSS, this will result in the display of the same CSS code in different browsers. This requires CSS Hack to solve the compatibility problem of different browsers. This process of writing different styles for different browsers is called CSS hack.
There are several common forms of CSS Hack:
•Properties Hack
For example, IE6 can recognize _width and *width , but in IE7 can recognize *width , but cannot recognize _width , neither of them is recognized in FireFox.
• Select character Hack
For example, IE6 can recognize *html .class{} , and IE7 can recognize *+html .class{} or *:first-child+html .class{} .
• Conditions Hack
IE conditional annotation is a non-standard logical statement provided by Microsoft since IE5. For example, for all IEs:
<![if IE]> <!Your Code> <![endif]>
For IE6 and below:
<![if lt IE 7]><!Your Code><![endif]>
This type of Hack not only takes effect on CSS, but also takes effect on all codes written in judgment statements.
Reference
//www.VeVB.COM/css/226888.html
7 Graceful degradation and progressive enhancement
Progressive enhancement refers to building pages for low-version browsers to ensure the most basic functions, and then improving effects, interactions and other improvements and additional functions for advanced browsers to achieve a better user experience.
Elegant downgrade refers to building complete functionality from the beginning and then compatible with lower version browsers.
The difference between the two is that elegant downgrades start with a complex status quo and attempt to reduce the supply of user experience, while gradual enhancement starts with a very basic, functional version and is continuously expanded to meet the needs of future environments. Degradation (functional decay) means looking back; while gradual enhancement means looking forward while ensuring that its foundation is in a safe area.
8 Tell us about browser compatibility issues encountered
•The inner margins and outer margins displayed in different browsers are different. For example, the ul tag has a padding value in FireFox by default, while in IE only margin has a value.
Using CSS Reset (see Article 5)
• IE6's double margin bug, the margin is originally 10px after the block-level element floats, but IE interprets it as 20px.
Set its block-level element display to inline
• min-height is not supported in IE6
The function of min-height is to maintain a minimum height when the container has less content, so as not to destroy the layout or UI design effect. When the content in the container increases, the container can automatically stretch to adapt to changes in the content.
This can be solved by:
#targetDom{ background:#ccc; min-height:100px; height:auto!important; height:100px; overflow:visible; }•The method function of binding events in standard event binding is addEventListener, while IE uses attachEvent
Through conditional judgment, write two binding statements or use web framework libraries such as jquery to bind.
•Standard browsers adopt event capture, while IE adopts event bubble mechanism
Later, the standard believed that bubble was more reasonable, and used the third parameter to set the addEventListener to be compatible with two mechanisms, and event bubble was the default value.
•The event attribute in event processing is different from that in standard browsers.
The standard browser is brought in as a parameter, and ie is obtained in window.event. The target element is e.srcElement. The standard browser is e.target.
Part2 Other
1 Understand the commonly used http status codes
200 OK Everything is OK, the response document to the GET and POST requests follows.
201 The Created server has created the document and the Location header gives its URL.
202 Accepted The request has been accepted, but the processing has not been completed.
304 Not Modified The client has buffered documents and issues a conditional request (usually providing the If-Modified-Since header that indicates that the client only wants to update documents than the specified date). The server tells the customer that the original buffered document can continue to be used.
400 A syntax error occurred in Bad Request request.
404 Not Found The resource in the specified location cannot be found. This is also a commonly used response.
405 Method Not Allowed The request method (GET, POST, HEAD, DELETE, PUT, TRACE, etc.) is not applicable to the specified resource. (New for HTTP 1.1)
500 Internal Server Error The server encountered an unexpected situation and could not complete the customer's request.
502 When the Bad Gateway server acts as a gateway or proxy, in order to complete the request to access the next server, the server returns an illegal reply.
2 Handwritten ajax request
//Mock the XMLHttpRequest method in IE5 and IE6 if(window.XMLHttpRequest === undefined){ window.XMLHttpRequest = function(){ try{ return new ActiveXObject("Msxml2.XMLHttp.6.0"); //Available, use the latest ActiveX object} catch(e1){ try{ return new ActiveXObject("Msxml2.XMLHttp.3.0"); //Unable, back off earlier version} catch(e2){ throw new Error("XMLHttpRequest is not supported"); } } } } }}//get request function xhrGet(url,callback){ var request = new XMLHttpRequest(); request.open('GET',url,true); request.onreadystatechange = function(){ if(request.readyState === 4 && request.status == 200){ callback&&callback(request.responseText); } }; request.send(null);}//post request function xhrPost(url,data,callback){ var request = new XMLHttpRequest(); request.open('POST',url,true); request.setRequestHeader('Content-Type','application/json'); request.onreadystatechange = function(){ if(request.readyState === 4 && request.status == 200){ callback&&callback(request); } }; request.send(JSON.stringfy(data));}This is the traditional usage of XMLHttpRequest. XMLHttpRequest Level 2 proposes many new methods, and the CORS we often mention also comes from this method.
To learn more about XHR2 Recommended XMLHttpRequest Level 2 User Guide
3 Cross-domain issues
When we request data from other servers through ajax on the page, the client will have cross-domain problems due to the browser's homologous policy for JavaScript. The so-called same-origin policy refers to a script that can only request resources from the same source (same domain name, port number, protocol).
If the service address requested by XMLHttpRequest above is different from the current file, the following error will appear in the browser:
So how to solve this kind of cross-domain problem?
(1) Cross-domain using CORS
"Cross-origin resource sharing, CORS for short). CORS is a capability to expand in XHR2. The usage method is very simple. Set it on the server side:
Header set Access-Control-Allow-Origin *
This setting will accept cross-domain requests for all domain names, you can also specify specific URLs, or you can also limit the domain name:
Header set Access-Control-Allow-Origin http://www.test.com
However, the limitation of this approach is that it requires the client to support it and the server to perform relevant settings. When both are satisfied, cross-domain through CORS not only supports all types of HTTP requests, but also developers can use ordinary XMLHttpRequest to initiate requests and obtain data, which has better error handling than JSONP.
(2) Use JSONP to achieve leapfrogging
For older browsers, they tend not to support CORS, so using JSONP for cross-domain is also a common way to use JSONP.
We know that when loading target scripts through the src specification of <script> element in a web page, it is not affected by the same-origin policy, so they can be used to request data from other servers. This technology that uses <script> elements as Ajax transmission is called JSONP.
The principle of JSONP implementation is as follows:
function getJSONP(url, callback){ var funcName = getUniqueName(); //Use timestamps or refer to the auto-increment counter to get the unique function name url += "?callback=" + funcName; //Add function name as a parameter to the url var script = document.createElement('script'); //Dynamicly build script tags//Callback function getJSONP[funcName] = function(response){ try{ callback(response); //Process response data} finally{ //Even if the callback function or response throws an error, clear the dynamically added content delete getJSONP[funcName]; script.parentNode.removeChild(scipt); } } //Trigger HTTP request script.src = url; document.body.appendChild(script); }JSONP also has some disadvantages. First of all, JSONP supports GET but does not support POST method. In addition, Ajax requests are used using <script> elements, which means that the web page can execute any JavaScript code sent by the remote server. Therefore, this technology should not be used for servers that do not trust.
(3) Use window.name to cross-domain
The window object has a name attribute, which has a feature: that is, during the life cycle of a window, all pages loaded by the window share a window.name, and each page has read and write permissions to window.name. window.name persists in all pages loaded by a window and will not be reset due to the loading of a new page. Therefore, data can be passed on pages from different sources with window.name.
If www.a.com/a.html wants to obtain the data in www.b.com/b.html, the principle is as follows:
a) Store data in window.name in b.html
b) Build a hidden (display:none) iframe tag in a.html, assuming that the id is set to proxy and src is set to the same origin as a.html.
c) Get data in a.html through the following code
var proxy = document.getElementById('proxy'); proxy.onload = function(){ var data = proxy.contentWindow.name;//get data}d) Remove related elements
(4) Use window.postMessage to cross domain
This method is relatively simple. In page a, use windowObj.postMessage(message, targetOrigin) to send information to the target page, and in page b, information is obtained by listening to message events. This method is a new method in HTML5 and cannot be used for older browsers such as IE6 and IE7.
4 How to improve website performance
Please refer to the blogger’s other two articles:
Some suggestions on improving website performance
Some suggestions on improving website performance 2
New content will be updated continuously...
Blog author: vicfeel