2019 Session of the front face questions recruit school finishing --HTML, CSS articles

Foreword

2019 school session started after another recruit, organize a number of high-frequency interview questions.

HTML part

1. What is <! DOCTYPE>?

DOCTYPE declaration is html5 standard web pages, and must be declared in the first line of the HTML document. To tell the browser what the document parser documentation standards.

Document analysis types are:

• BackCompat: Quirks mode, the browser uses its own quirks mode rendering parsing the page. (If not specified DOCTYPE, this is the default mode)
• CSS1Compat: Standard mode, the browser uses the W3C standard analytical rendering the page.

2. meta tag

To provide some meta-information page (name / value pairs), helps SEO.

Property values:

• name: The name of the name / value pair. author, description, keywords, generator, revised, others. Associate content attribute to a name.
• http-equiv: When there is no name, will use the value of this property. content-type, expires, refresh, set-cookie. Associate content attribute to http head
• content: Name / value pair, can be any valid string. Always used with the name or http-equiv attribute properties
• scheme : Used to specify the program you want to translate property values

3. HTML semantics

• Do the right thing with the right label.
• html semantic content structured so that the page structure is more clear, easy to browsers, search engines resolve;
• Also available in one document format even without CSS style case, and is easy to read;
• Search engine crawlers also depends on the context and HTML tags to determine the weight of each keyword weight, which will help SEO;
• So read the source code of the Web site are more likely to block the site, easy to read maintenance understood.

4. common browser kernel

• Trident kernel: IE, MaxThon, TT, The Word, 360, Sogou browser and so on.
• Gecko-: Netscape6 and above, FF, MozillaSuite / SeaMonkey like;
• Presto kernel: Opera7 and above. [Now: Blink]
• Webkit core: Safari, Chrome and so on. [In the Chrome: (a branch Webkit) Blink]

5. A brief understanding of the browser kernel

It is divided into two parts: JS rendering engine and engine.

• Rendering engine: to convert the code into a page. Responsible for obtaining the contents of a web page (HTML, XML, images, etc.), organize messages (for example, adding CSS, etc.), and calculate page is displayed and then output to the monitor or printer. Different kernel browser for grammar explanation page will be different, so the effect of rendering is not the same. All web browser, email client and others need to edit, display web content applications that require kernel.
• JS engine: parsing and executing the javascript to achieve the dynamic performance of your pages.

Initially JS rendering engine and the engine does not distinguish very clearly, then JS engine more and more independent, the kernel tends to refer only to the rendering engine.

What's New 6. HTML5 has removed what elements? How to deal with a new label HTML5 browser compatibility problems?

• New features:
  

(1) canvas element for drawing;

(2) for media playback of video and audio elements;

(3) there is better support for local offline storage, localStorage long-term storage of data, the browser is closed after data is not lost; sessionStorage the data is automatically deleted when the browser is closed;

(4) the semantics of better content elements, such as header, NAV, Section, Article This article was, footer;

(5) a new form controls: calendar, date, time, email , url, Search;

(. 6) new technologies webworker, websockt, Geolocation;

• Remove elements:
  

(1) the performance of pure elements: the basefont, Big, Center, font, S, Strike, TT, U;

(2) the availability of the elements of a negative impact: frame, frameset, noframes;

• For compatibility reasons:
  

IE8 / IE7 / IE6 support document.createElement method produces labels, you can use this feature to make these new browsers support HTML5 tags, the browser supports the new label, the label also need to add the default style.

7. html5 which labels can do SEO optimization?

title、meta、header、footer、nav、article、aside

8. src and the difference href

• src is pointing to an external resource location, point to the content will be embedded in the current location in the document where the tag resource download request src its resources will be directed and applied to the internal documents, such as js script, img picture frame and other elements . When the browser resolves to the elements, it will pause the download process and other resources, know the resource loading, compilation, execution is completed, it is generally js script at the bottom instead of the head.
• href is the location where the network resources, and the establishment of the current element (anchor) or links between documents (link) is currently used for hyperlinks.

9. progressive enhancement and graceful degradation

• 渐进增强: Be constructed for low version of the browser page, to ensure the most basic functions, and then to effect, interactive and other improvements and additional features for advanced browser, to achieve a better user experience.
• 优雅降级: Start to build fully functional before proceeding compatible for low version of the browser.

10. The difference between the async and defer

• deferTo wait until the entire page in memory, rendering normal end (DOM structure is completely generated, as well as other script execution is complete), it will be performed. Multiple defer script is loaded in the order they appear on the page. == "complete re-render the implementation of" ==
• asyncOnce downloaded, the rendering engine will break rendering, after implementation of the script, and then continue rendering. Multiple async script is no guarantee that load order. == "downloaded on the implementation of" ==

11. How to enable communication between multiple tabs within the browser?

Method One: Call localstorge

Tab 1:

<input id="name">  
<input type="button" id="btn" value="提交">

<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
           var name=$("#name").val();    
            localStorage.setItem("name", name); //存储需要的信息 
        });     
   });    
</script>  

Tab 2:

$(function(){   
    window.addEventListener("storage", function(event){    
       console.log(event.key + "=" + event.newValue);    
    });     //使用storage事件监听添加、修改、删除的动作  
});  

Method Two: Use cookie + setInterval

Information is stored to be delivered in a cookie, read cookie information, you can obtain information to be passed at any time at regular intervals.

Tab 1:

$(function(){    
    $("#btn").click(function(){    
        var name=$("#name").val();    
        document.cookie="name="+name;    
    });    
});    

Tab 2:

 $(function(){   
    function getCookie(key) {    
       return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
    }     
    setInterval(function(){    
       console.log("name=" + getCookie("name"));    
    }, 10000);    
});  

CSS section

1. css box model

• IE box model box-sizing: border-box; (odd mode);
• W3C standard box model box-sizing: content-box; (standard mode).

Scenario:

(1) Form:
Form has some input elements but it is still the show is a traditional IE box model, with some default styles, but also in different platform or browser is different, resulting in differences in the form of show. At this point we can build a unified style form elements through a box-sizing property.

When the margin (2) is provided or subclass border element, the size of the parent layer may bursting element, then I need to use box-sizing: border-box to contain the size of the border into the element, so as not to bursting the presence of the parent element of the layer.

2. The difference in the line elements and block-level elements? Compatibility inline block-level elements use? (IE8 or less)

• 块级元素：div,p,h1,form,ul,li

(1) a separate line, arranged vertically;

(2) may contain other block-level or inline elements;

(3) height, the line height and margins and padding can be controlled;

(4) itself is a default width parent (uniform width and parent element) 100% of the container, regardless of the contents.

• 行内元素：span,a,label,input,img,strong,em

(1) horizontally arranged, not wrap;

(2) must not contain block-level elements, but may contain other inline elements or text;

element disposed within the (3) line width, void height (may be provided line-height), margin down and padding invalid;

(4) width is the width of its text and pictures, can not be changed.

• Row in the block-level elements IE8 less compatibility (analog block elements inline-block)

div {
    display： inline-block；
    zoom： 1；   //在IE下触发hasLayout
    display：inline；//一旦触发了hasLayout设置display：inline和display：block效果相似。
}

haslayout is a unique property IE7- browser. hasLayout is a read-only attribute, there are two states: true or false. When it is true, on behalf of the element has its own layout, or on behalf of the layout of the element inherited from the parent element.

Note: It can be concluded element.currentStyle.hasLayout hasLayout the current element.

3. Import Style page, use the link and @import What is the difference?

(1) link tag in XHTML, CSS addition to loading, the RSS can define other transaction like; @import CSS category belongs to only load CSS.

(2) link when referring to CSS, while loaded when the page loads; @import need to completely loaded page after page to load.

(3) link is XHTML tags, no compatibility issues; @import is presented in CSS2.1, low version of the browser (IE5 or less) is not supported.

(4) link supports the use Javascript to control DOM change pattern; and @import not supported.

4. Clear float what way?

(1) adding a non-floating elements float below

<div>
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
    <div style="clear:both;"></div>
</div>

The parent container must now consider the position of non-floating child elements, which certainly appears below the floated element, it is displayed, the parent container to put all child elements are included into it. This method is simple, but to increase the redundancy tag in the page, violates the principle of the Semantic Web.

(2) the parent container also changed float position

<div style="float:left;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>

This approach not edit the HTML code, but the disadvantage is that later became the father of container floating, it will affect the positioning of the elements behind, and sometimes, the parent container is positioned dead, can not become floating.

(3) Set the parent vessel overflow: hidden or auto. (Open BFC)

<div style="overflow: hidden;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>

缺点: A IE6 is not supported, once the size of the other sub-elements exceeds the parent container size, the display will be a problem.

(4) use: after pseudo selectors, automatically create a sub-element at the end of the parent container == (recommend this) ==

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
//兼容ie6：激活父元素的"hasLayout"属性，让父元素拥有自己的布局
.clearfix {
    zoom: 1;  //或者height：1%；
}

The brief BFC and IFC

BFC - block-level formatting context

(1) BFC trigger conditions:

• The root element or other elements include his
• Floating elements float: left / right
• position：absolute/fixed
• display：inline-block,table-cell,table-caption
• overflow is not visible
• Elastic box: display: flex or inline-flex

(2) BFC characteristics

• Box inside one after placed in a vertical direction;
• Vertical distance margin with a decision (belonging to the same two adjacent Box BFC margin of overlap will occur, regardless of the direction);
• Each of the left margin box element, comprising the block border; box in contact with the left (for a left to right format, or vice versa). The same is true even if there is floating;
• BFC region does not overlap with the float element area;
• When calculating the height of the BFC, floating child elements are also involved in the calculation, the height of the parent element can solve the problem collapse;
• BFC is isolated on a page separate containers, the container does not affect the inside of the sub-element to the outside of the element, and vice versa;
• BFC element flow of the document, width to auto, will fill the remaining width of the current row.

(3) Application

• margin folded in the vertical direction prevents two adjacent block elements in the normal stream;
• BFC may comprise a floating element, distraction parent element;
• BFC element may be covered to prevent the floating elements.

（4）BFC与hasLayout

IE6-7 does not support the BFC, but the use of private property hasLayout, use the zoom: 1 trigger hasLayout property. Zoom is used to set or retrieve the scaling element, the actual value of the size "1", i.e., the use of the element.

IFC - inline formatting context

(1) created:

BFC and compared, it creates a passive way, implicit, is created by the sub-elements contained: will be generated only in a region including only the horizontally aligned elements, sub-elements can be text , inline-level elements or inline-block-level element.

(2) Characteristics:

• Elements within the IFC, left to right, top to bottom are arranged;
• Each element inside the IFC, can be provided by a vertical-align property, to adjust the alignment in the vertical direction;
• Rectangular region containing the internal elements, each row is formed, is called line box (row block).

6. priority selector

! important> inline styles> id selector> class selector> tag selector> wildcard> Inherited

权重算法: (0,0,0,0) -> 0 corresponds to the first number of important, the second is the number 0 corresponding to the id of the selector, the third selector corresponding class 0 th number, the fourth is the number 0 corresponding to the tag selector, current weight together is a weight selector.

比较: Start with the first zero comparison, if the first big 0, then that is the right choice of high weight, if the first one and the same, comparing the second, and so on.

7. how to achieve horizontal and vertical centering

(1) within the horizontal center lines of elements

text-align: center;
line-height: 100px;

(2) block-level element is centered horizontally

margin: 0 auto;

Horizontal (3) elements known height width of the vertical center

• Use absolute positioning and negative margins realized

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
}

• Use absolute positioning and margin

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Level (4) of unknown height and width of the element vertically centered

• Is centered elements are inline-block elements or inline

.container{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

• css3 transform property

.container{
    width: 100%;
    height: 600px;
    position: relative;
}
.center{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

• flex layout

.container{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

• The simplest wording:

.container{
    display: flex;
    height: 600px;
}
.center{
    margin : auto;
}

8. achieve predetermined width left and right adaptive layout

(1) left box floated left and right box width = 100%

(2) the left box floated left and right cassette margin-left = left width of the box

(3) left box floated left and right boxes floating right set width: calc (100 % - left width of the box)

(4) is provided parent container display: flex, right cassette flex: 1

9. The width of intermediary adaptive, fixed width of about two-column layout

Two strokes get three-column layout - the Holy Grail layout, Flying wing

10 out of document flow

(1) floating out of the document flow: When using float out of the document flow, the box will ignore the other elements, but in other text box will still make a position for this element surrounds.

(2) the absolute positioning from the document flow: use absolute: position | fixed elements from the document flow, and other text box will ignore it in the other boxes.

11. CSS3 new features

• Color: Added RGBA, HSLA mode
• Text shadow (text-shadow)
• Border: rounded corners (border-radius) dark borders: box-shadow
• Box model: box-sizing
• BACKGROUND: background-size background image set size, background-origin origin set background image, background-clip set background image cropped area to "," background partition may set up multiple, adaptive layout
• Gradient: linear-gradient, radial-gradient
• Transition: transition can achieve animation
• Custom Animation
• In the pseudo-element is introduced only CSS3 :: selection
• Multimedia inquiry, multi-column layout
• border-image
• 2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
• 3D conversion

12. display: none; with visibility: hidden is what is the difference?

(1) display:none;a variety of attributes HTML elements (target) width and height, height, etc. will be "lost", considered to not exist, and not loaded.

(2) visibility:hidden;the HTML elements (objects) only is invisible (fully transparent), and it occupies a spatial position remains, it still has That attribute value of the height, width and the like.

13. The layout in response principle

Media queries, the query to the width of the current screen (media media), and set different styles for different screen width to accommodate different screen.

14. flex layout

flex layout can see Ruan Yifeng teacher of two articles: Flex Layout Tutorial: Grammar , Flex layout Tutorial: example piece , a very detailed.

(1) is provided on the container properties

• flex-direction：row | row-reverse | column | column-reverse The arrangement direction of the project
• flex-wrap：nowrap | wrap | wrap-reverse Whether wrap
• flex-flow：<flex-direction> || <flex-wrap> flex-direction and flex-wrap shorthand
• justify-content：flex-start | flex-end | center | space-between | space-around Alignment in the horizontal direction
• align-items: flex-start | flex-end | center | baseline | stretch Defined alignment in the vertical direction
• align-content: flex-start | flex-end | center | space-between | space-around | stretch Defines the alignment of a plurality of axes, one axis only if the project, then the property will not work (item multiple rows)

(2) disposed on a property item

• order：<number> The order item defined in the vessel, the smaller the value, the more forward arrangement, the default value is 0
• flex-basis：<length> | auto Defined before allocating extra space, the project space occupied by the spindle, the browser based on this property, calculate the spindle if there is extra space
• flex-grow: <number>Define an enlarged scale projects. The default value is 0, i.e., if there is free space, not enlarge
• flex-shrink: <number>Reduction ratio to define the project. Default: 1, that is, if space is insufficient, the project will reduce, the negative attribute is invalid.
• flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]Default short flex-grow, flex-shrink, and the flex-basis: 0 1 auto, i.e. is not enlarged, can be reduced, size is the size of the project itself.
• align-self：auto | flex-start | flex-end | center | baseline | stretch Allows a single project and other projects are not the same alignment

---

After ... will continue to update

the knowledge about aspects of HTTP, I can see the summary of the article: HTTP protocol knowledge summarize

the basics of JavaScript can look at these two related mind map: you do not know JavaScript (on volume) , you do not know JavaScript (in volume) of the first part

of the second volume and lower volume is still finishing.