Front end face test and Answer (ii) _ Basic knowledge

Part1 CSS Related

1 inline elements (inline-element) and block elements (blocks element) are respectively

Common inline elements (inline elements) have a, B, span, I, EM, input, select, IMG, etc.
Common block elements have Div, UL, Li, H1~h6, Talbe, OL, UL, TD, P, etc.

2 Floating related

A floating layout means that the element is detached from the normal stream/document stream so that it can move around until its outer edge encounters the edge of the containing box or another floating box. A floating box does not belong to a normal stream in a document, and when an element floats, it does not affect the layout of the block-level elements but only the arrangement of the inline elements.
Because the floating element is detached from the flow of the document, its parent element does not know it exists, so it behaves as if it is 0, and its parent element does not wrap with it, no matter how the floating element changes, which is called "Height collapse".
In the following example, regardless of how the height of the #floatdom changes, #parent高度始终为0, which causes the parent element border to not be stretched, the background cannot be displayed, and so on

<div id= "Parent" > <div id= "floatdom" style= "float:left;width:300px;height:300px
 ;" >
 <div style= "Clear:both" >
</div>

Because of the high collapse (which is often not what we expected), we have to clear the float, and here are some ways to clear the float:
• Add a style with "clear:both" element after floating element

<div id= "Parent" > <div id= "floatdom" style= "float:left;width:300px;height:300px
 ;" >
 <div style= "Clear:both" >
</div>

You can also add a BR label with its own Clear:both property

<div id= "Parent" > <div id= "floatdom" style= "float:left;width:300px;height:300px
 ;" >
 <br/>
</div>

Use this way to clear the advantages of floating is easy to understand, easily mastered, shortcomings are also obvious, adding a lot of meaningless tags, this in the maintenance of the latter is very painful.
• Add 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 is no structural and semantic problem with this approach, and the amount of code is minimal, but when content is increased it is easy to cause content to be hidden and the elements that need to overflow 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" class= "Clearfix" >
 <div id= "Floatdom" style= "Float:left;width" : 300px;height:300px; " >
</div>

In this way, just adding a class to the target element is one of the most current ways to use it.

Reference
Iyunlu.com/view/css-xht

3 The difference between the relative layout (relative) and the absolute layout (absolute)

The most essential difference between a relative layout and an absolute layout is whether to detach from the document stream.
The relative layout is not detached from the document flow, that is, after you set the element relative layout, the document flow remains in its original position, and you can set its offset relative to the original position by setting properties such as top or left.
Absolute layout is out of document flow, that is, the elements in the document flow do not know that the absolute layout elements exist, the absolute layout of the location is relative to the parent element with relative layout or absolute layout of the elements, if none exists relative to the body layout.

4-Box models (box model)

The box model defines the display form of an element, including content (contents), padding (margin), border (boundary), and margin (outer margin) parts, there are two kinds of box model standard, one is the standard box model of the Internet, and the other is IE box model, Adopted Microsoft's own standards.

The difference between the two box models is mainly the calculation of the width of the elements. The width defined in the CSS in standard mode is the breadth of content, the width of the entire element in the page, and the formula is:

Copy Code code as follows:

Dom_width = Width + padding + border + margin

In the IE box model, the width defined in the CSS is content + padding + border, so in the IE box model, the entire element is occupied on the page (with a high degree of empathy).

Copy Code code as follows:

Dom_width = Width + margin

In CSS3, we use the box-sizing two-box model, when we set box-sizing: content-box (default), we use the standard box model of the Internet, when set box-sizing:border-box , we adopt IE box model.

5 CSS Reset (reset)

Each browser has its own style, and each browser these styles are often different, which brings us some inconvenience in the layout. Therefore, in practice, it is often necessary to the browser's CSS style "Qing 0", that is, CSS reset. The simplest kind of reset code is as follows:

*{
 margin:0;
 padding:0;
}

This way although simple but too "violent", because many elements like Div, Li, etc. by default there is no margin, padding style, which is tantamount to creating a lot of redundancy, the more recommended way to write the reset code according to their own needs.

Reference:
Www.zhangxinxu.com/wordpress/2010/08/html5-css-reset

6 CSS hack

Because different browsers to the CSS parsing and support is different, this will cause the same CSS code in different browsers to display the way is not exactly the same, this need to use CSS hack to solve the compatibility of different browsers. This process of writing different styles for different browsers is called CSS hack.

There are several common forms of CSS hack:
• attribute hack

For example, IE6 can recognize _width and *width , but in the IE7 can be recognized *width , but not recognized _width , in Firefox two are not recognized.
• Selector hack

such as IE6 can recognize *html .class{} , IE7 can identify *+html .class{} or *:first-child+html .class{} .
• Condition hack

IE conditional annotation is a non-standard logical statement that Microsoft has provided from IE5. For example, for all ie:

<!–[if ie]>
 <!–your code–>
 <![ Endif]–>

For IE6 and the following versions:

<!–[if lt IE 7]>
<!–your code–>
<![ Endif]–>

This kind of hack not only takes effect on CSS, but all the code written in the judgment statement will take effect.

Reference

Http://www.jb51.net/css/226888.html

7 Graceful demotion (graceful degradation) with progressive enhancement (progressive enhancement)

Progressive enhancement means building a page for a lower version of the browser, ensuring the most basic functionality, and then achieving a better user experience with improved and additional functionality such as effects, interactivity, etc. for advanced browsers.

Graceful demotion means building complete functionality at the outset and then being compatible with a lower version of the browser.

The difference is that graceful demotion begins with a complex situation and attempts to reduce the supply of user experience, while progressive enhancement starts with a very basic, functional version and expands to suit the needs of the future environment. Demotion (functional decay) means looking back, and progressive enhancement means looking ahead while keeping its roots safe.

8 Name The browser compatibility problem you are encountering
• Different browsers display the interior margin, the outside margin, such as the UL tag in Firefox default is padding value, and in IE only margin have a value

Use CSS Reset (see article 5th)
IE6 double margin Bug, the block-level element float after the original outside distance of 10px, but IE interpreted as 20px

Set its block-level element display to inline
Min-height not supported in IE6

The role of Min-height is to maintain a minimum height when the contents of the container are small, so as not to break the layout or UI design effect. And when the contents of the container increase, the container can be automatically extended to adapt to the changes in content.

This can be done in the following way:

#targetDom {
  background: #ccc;
  min-height:100px;
  Height:auto!important;
  height:100px;
  overflow:visible;
 }

• The method function for binding events in standard event bindings is AddEventListener, and IE uses the attachevent

Two binding statements are written separately by conditional judgment or by using a Web frame library such as jquery.
• The standard browser uses event capture, and IE uses event bubbling mechanisms

Later the standard thought bubble more reasonable, using the set AddEventListener the third parameter compatible two mechanisms, event bubbling is the default value.
• Event properties in incident handling IE in the way of access and standard browser is different

Standard browsers are brought in as parameters, and IE is window.event way to get the target element ie for e.srcelement Standard browser for E.target

Part2 Other

1 Understanding common HTTP status Codes

All OK, the answer document for Get and post requests follows.

The 201 created server has created the document, and the location header gives its URL.

The accepted has accepted the request, but the processing has not yet been completed.

The 304 not Modified client has buffered documents and makes a conditional request (typically providing a if-modified-since header that indicates that the customer only wants to update the document for a specified date). The server tells the customer that the previously buffered document can continue to be used.

Bad request syntax error occurred.

404 Not Found Cannot find a resource at the specified location. This is also a common answer.

The 405 method does not allowed request methods (GET, POST, head, DELETE, put, Trace, and so on) do not apply to the specified resource. (HTTP 1.1 new)

Internal server Error Servers encountered unexpected circumstances, unable to complete the customer's request.

502 Bad Gateway server, as a gateway or proxy, accesses the next server in order to complete the request, but the server returns an illegal reply.

2 Handwriting Ajax Requests

Simulates the XMLHttpRequest method if (window) in IE5 and IE6. XMLHttpRequest = = undefined) {window. 
   XMLHttpRequest = function () {try{return new ActiveXObject ("msxml2.xmlhttp.6.0");//available, use latest ActiveX object} catch (E1) { try{return new ActiveXObject ("msxml2.xmlhttp.3.0");/not available, back up earlier version} catch (E2) {throw new Error ("XMLHTTPR
   Equest 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 =) {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 =) {callback&
  &callback (Request);
 }
 }; ReQuest.send (Json.stringfy (data)); }

This is the traditional use of XMLHttpRequest, XMLHttpRequest Level 2 presents a number of new approaches, and the cors that we often refer to are derived from this approach.

To learn more about XHR2 recommended XMLHttpRequest Level 2 use Guide

3 Cross-domain issues

When we request data from other servers through Ajax in the page, the client can cross domain problems because of the browser's homology to JavaScript policy. The so-called homology strategy refers to a script that can only request resources from the same source (same domain name, port number, protocol).

If the service address requested above XMLHttpRequest is different from the current file, the following error appears in the browser:

So how do you solve such cross-domain problems?

(1) Cross-domain using cors

"Cross-domain resource sharing" (Cross-origin resource sharing, referred to as cors). Cors is the ability to expand in XHR2, the use of the method is very simple, in the server settings:
Header Set Access-control-allow-origin *

This setting will accept Cross-domain requests for all domain names, specify a specific URL, or qualify a domain name:
Header Set Access-control-allow-origin http://www.test.com

However, the limitation of this approach is that it requires client support, and the server side makes the relevant settings. In both cases, cross-domain support for all types of HTTP requests through cors, and developers can use the common XMLHttpRequest to initiate requests and obtain data, and better error handling than JSONP.

(2) using JSONP to realize spanning

For older browsers, they often do not support cors, so it is a common way to use JSONP for cross-domain domains.
We know that it is not affected by the homology policy to specify the load target script in the Web page through the src of <script> elements, so you can use them to request data from other servers, the technology that uses the <script> element as the Ajax transmission is called JSONP.

The principle of JSONP implementation is as follows:

function Getjsonp (URL, callback) {
  var funcName = Getuniquename ();//use timestamp or self-increasing counter to get unique function name
  
  URL + "? callback=" + FuncName; Add the function name as a parameter to the URL
  
  var script = document.createelement (' script ');//dynamically build the script tag
  
  //callback function
  getjsonp[ FuncName] = function (response) {
   try{
    callback (response);//Processing response data
   }
   finally{
    //Even if the callback function or response throws an error , clear dynamic Add content
    Delete Getjsonp[funcname];
    Script.parentNode.removeChild (SCIRPT);
   }
  
  Triggers http request
  script.src = URL;
  Document.body.appendChild (script);
 

JSONP also has some drawbacks, first JSONP support get does not support post method, and use <script> element for Ajax request, which means that Web pages can perform any JavaScript code sent by remote server. Therefore, this technique should not be used for servers that are not trusted.

(3) using Window.name to cross domain

The Window object has a Name property that has a feature: in the life cycle of a window (Windows), All of the pages loaded by the window are shared by a window.name, each page has read and write permission to the Window.name, Window.name is a persistent existence of a window loaded in all the pages, and will not be due to the new page load and reset, so you can use the window.name in different sources Page to pass data in.

If www.a.com/a.html want to get the data in www.b.com/b.html, the principle is as follows:

A) store data in Window.name in b.html

(b) construct a hidden (display:none) iframe tag in the a.html, assuming that the ID is set to PROXY,SRC and a.html homology.

c) obtain 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) Cross-domain using Window.postmessage

This is a simpler way to use Windowobj.postmessage (message, targetorigin) to send information to the target page in page A, and to get information by listening to the message event in page B. This is the new method in HTML5, which is not available for older browsers such as IE6, IE7.

4 How to improve website performance

See the other two articles of the blogger:

Some suggestions on improving the website performance

Some suggestions on improving the performance of the website 2

Discover new content will continue to update ...

Bowen Author: Vicfeel