5 common front end face questions

Explain face questions: 
    The first question: What are inline elements? Block-level elements are there? What css box model have? 
    
        Inline elements example: a, strong, b, em , i, del, u, ins, span, ... 
        block-level elements example: h1 of ~ H6, P, div, UL, OL, L, ... 
        row within the block elements For example: IMG, INPUT, TD, ... 
        
        CSS box model:
             1. the box model concept: the box model is called HTML elements are all regarded as a rectangular box which consists of four components: the content (content: width / height), the padding (padding), the border (border), margins (margin) 
        
        CSS box model example:
             1.W3C standard box model (content-box): the box size = width
             2.IE standard box model (border -box): box size + padding + width = border 
        
        
        
    second question: What are the ways to introduce css? the difference between link and @import is? 
    
        1 .CSS introducing three ways:
             1 inline style: style defined by the style attribute HTML element
            
             2 internal style: CSS code will focus on the head element of an HTML document, using the style defined style elements
            
            3 external style sheet: all style definitions in one or more external style sheet file with the extension .css, the link element to link it to an HTML document 2 difference .link and the @import: 
            link use:　　　　 <Link the rel = "this stylesheet" type = "text / CSS" the href = "index.css"> 
            @import used:     <style type = "text / CSS"> @import URL ( 'index.css') ; </ style> 
            
            . 1 different attributes: link is provided html tags, not only load css document, but also define the RSS, rel connection attributes. And grammatical rules @import in css
            
             2 loading sequence differences: the page is loaded, link the label is simultaneously incorporated CSS loaded; @import introduced CSS loaded after the page is loaded. 
            
            3. Compatibility difference: @import is only CSS2.1 syntax, it can only be in the + IE5 can recognize; link HTML elements as labels, there are no compatibility problems. 
            
            4 . Controllability differences: link supports the use of javascript DOM control to change the style; @import but not supported. 
            
            5 . Priority difference: @import style sheets may introduce other again in the CSS file. 
    Third question: What is the difference between title and alt attributes on labels are? 1
    
    

    
        . Alt is an attribute of html tags, and title both html tags, html property is
        
         2 . About title 
            when title as a label, title of the page is written in the tag of this. 
            title as the property provides additional descriptive information for the element. It can be used on any label, such as a label and tag img. 
            
        3. alt attribute can only be used in the image, it is used to provide text to the user when a Web page pictures can not be displayed properly. alt image is an alternative to action rather than to provide additional descriptive text. (<Input type = "image"
 />)         
    
    
    The fourth question: interpretation css sprites, how to use, as well as its advantages and disadvantages
    
         1 .css sprites (sprite): 
            CSSSprites in domestic many people called css wizard, a Web Images application processing mode. It allows you to a page related to all sporadic images contain a large map to go, so that, when accessing the page 
　　　　 loaded as a picture does not show up as a slowly before a. 
        
        2 basic principles:. 
            CSS Sprites page is actually put in some background images integrated into a picture file, and then use the CSS "background the -image", "background- REPEAT", "background- position" a combination of background positioning, 
        background - position can be numerically accurate location of the position of the background image. 
        
        3Advantages:
             1 the use of CSS Sprites can well reduce http requests a web page, thus greatly improve page performance, which is the biggest advantage of CSS Sprites, which is also the main reason for the wide dissemination and application;.
             2 .CSS Sprites can reduced byte of the picture, have repeatedly compared the three images into one image byte is always less than the sum of these three bytes of the picture.
            3 . Web designers solved the problem in the picture naming, just a collection of pictures Last name on it, do not need to be named for every little element, thereby improving the production efficiency of the web page.
            4 Replace style convenient, need only modify the picture on a less pictures color or style, the style of the entire page can be changed. Maintenance more convenient. 
            
        4 Disadvantages:    
             1 At the time of the merger of the picture, multiple pictures you want an orderly and reasonable combined into one picture, but also to stay well enough space to prevent unnecessary background appears in the sector; these Fortunately, 
                most the pain is adaptive page in widescreen, high-resolution screen, if your picture is not wide enough, it is prone to rupture background;
            
             2 .CSS Sprites in the development of too much trouble, you have to be calculated by measuring photoshop or other tools background exact location of each unit, which is needlework, no difficulty, but it is cumbersome;
            
             3 .CSS Sprites when maintenance is too much trouble, if the page background there is a little change, we must change the general picture of this merger, no change the place is best not to move, so avoid change more css, if not fit in the same place,
                They can only (best) down plus pictures, so pictures byte has increased, but also to change css. 
    
    
    
    The fifth question: What data types of JavaScript typeof return? 
    
        undefined 
        String 
        Boolean 
        Number (NaN3) 
        Symbol (for ES6) 
        Object 
        function 
    
    
    
    Question 6: Array Method POP (), Push (), the unshift (), Shift () 
    
        var ARR = [First,. 1, 2,. 3 , Last];

         . 1 adding elements (a plurality of elements may be added, is returned after the length of the array was added) 
            arr.push (E1, E2, ...);         // Appends 
            arr.unshift (E1, E2, ...);     / / first adding
             
        2 delete elements (return element is removed);. 
            arr.shift ();                 // first remove 
            arr.pop ();                     // end delete
             
        3 Delete the specified location elements:. 
            Arr.splice (Start, count);     // accepts two parameters, start specify the starting position of the deletion, count the specified number of deletion, return the collection element to be removed
             
        4 . array taken: 
            arr.slice (start, end);         // starting at start and end intercepting elements, taken to return the subarray
             
        5 array to a string:. 
            arr.jion ( "separator");             // returned by the specified string delimiter connected



            
            
            
             
-------------------------------------------- -------------------------------------------------- --------------------------------------