Common front-end face questions

1, how to clear floating parent div definition height use empty tag to clear floating clear:both; (add meaningless tags) parent div defines pseudo class: After and Zoom (: After{display:block ; Clear:both;content: ""; Visibility:hidden}) Parent div definition Overflow:hidden Parent div definition Overflow:auto Parent div also floats, need to define width Parent DIV definition display:table at the end of the BR tag Clear:both

2, commonly used in those kinds of browser test. What are the kernels (layoutengine)? Browser: Ie,chrome,firefox,safari,opera. Kernel: Trident,gecko,presto,webkit

3, the next line of elements and block-level elements of the difference. Use for compatibility of inline block elements. (IE8 below)
Inline elements: will be arranged horizontally, can not contain block-level elements, set width is invalid, the height is invalid (you can set line-height), margin up and down invalid, padding up and down invalid. Block-level elements: Each occupies one row, arranged vertically. Start the new line and then a break break compatibility: display:inline-block;*display:inline;*zoom:1;

4, the CSS Display:none and Visibility:hidden difference

Display:none use, the width of the element, the height will be lost, as does not exist does not load;

The space where the element was originally occupied is not retained; Reflow and redraw visibility:hidden: visually invisible, but retains occupied space, also has width and height;

5, box-sizing commonly used attributes. What the difference is. Box-sizing:1.content-box 2.border-box 3.inherit; Content-box: Width and height are applied to the content boxes of the elements, respectively. Draws an element's inner margin and border (the element default effect) outside the width and height.
Border-box: Any inner margin and border specified by the element will be drawn within the width and height set. The width and height of the content can be obtained by subtracting the border and the inner margin from the set width and height respectively.

6, DOCTYPE function. What is the difference between standard mode and compatibility mode? <! Doctype> tells the browser what document standard parsing this document is. DOCTYPE does not exist or is incorrectly formatted to cause the document to render in compatibility mode. Standard mode of typesetting and JS operating mode are supported by this browser the highest standard operation. In compatibility mode, pages are displayed in a relaxed, backward-compatible manner, simulating the behavior of older browsers to prevent the site from working

7,HTML5 Why only need to write <! DOCTYPE html>. HTML5 is not based on SGML, so there is no need to reference DTDs, but DOCTYPE is required to regulate the behavior of browsers (let browsers run the way they should). And HTML4.01 is based on SGML, so you need to refer to the DTD to tell the document type that the browser document is using.

8, when the page import style, use link and @import what is the difference.

(1) Link is an XHTML tag, in addition to loading CSS, can also be used to define RSS, define REL connection properties, and @import is provided by CSS, can only be used to load CSS;
(2) When the page is loaded, link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded;
(3) Import is CSS2.1 proposed, only in IE5 above can be recognized, and link is XHTML tag, no compatibility problem;
9, introduce your understanding of the browser kernel.
Mainly divided into two parts: rendering engine (Layoutengineer or renderingengine) and JS engine. Render engine: Responsible for getting the content of the Web page (HTML, XML, images, etc.), organizing messages (such as adding CSS, etc.), and calculating how the page is displayed, and then outputting it to the monitor or printer. The browser's kernel is different for the syntax interpretation of the Web page, so the rendering effect is not the same. The kernel is required for all Web browsers, e-mail clients, and other applications that need to edit and display network content. JS Engine: Parse and execute JavaScript to achieve the dynamic effect of the Web page.

The first rendering engine and JS engine did not distinguish the very clear, then the JS engine more and more independent, the kernel is inclined to refer only to the rendering engine.

10. What are the new features of HTML5? How to handle browser compatibility issues with HTML5 new labels. How to differentiate between HTML and HTML5.

(Q1) HTML5 is now not a subset of SGML, mainly about images, locations, storage, multitasking, and more.
(1) Painting canvas;
(2) video and audio elements for media playback;
(3) The local off-line storage localstorage long-term storage data, the browser is closed after the data is not lost;
(4) Sessionstorage data is automatically deleted after the browser is closed;
(5) Semantic better content elements, such as article, footer, header, nav, section;
(6) Form control, calendar, date, time, email, url, search;
(7) New technology Webworker, WebSocket, geolocation;
(Q2)
IE8/IE7/IE6 supports labels generated by the Document.createelement method,
You can use this feature to enable these browsers to support HTML5 new labels,
After the browser supports the new label, you also need to add the default style for the label.
Of course, you can also directly use the mature framework, such as Html5shim;
<!--[If Lt IE 9]>
<script> src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [endif]-->

11,briefly describe your understanding of HTML semantics.
Do the right thing with the right label. HTML semantics makes the content of the page structured, clearer structure, easy to browser, search engine analysis; It is displayed in a document format and is easy to read even in the absence of a style CSS; Search engine crawler also relies on HTML tags to determine the context and the weight of each keyword, conducive to SEO; Make it easier for people to read the source code to block the site and to read and maintain understanding.

12 . The difference of CSS performance in each browser

(1) IE6 to margin:0 Auto; does not parse correctly

Workaround: Use Text-align:center in the parent element to use Text-align:left in the component

(2) can not set the micro-height (generally less than 10px):

Note: When setting the element height is less than 10px, IE6 and IE7 are not controlled, exceeding the height of the setting

Reason: IE does not allow the original height is less than the height of the font

Workaround 1: Set font size: font-size:0;

Workaround 2: Set the Overflow:hidden to the label above the height

Workaround 3: Set the row height line-height less than the height you set

(3) The child element breaks the parent component

Reason: The parent component has the Overflow:auto property set, and the child components burst out of the parent component

Solution: Set the position:relative in the parent component;

13, CSS3 Flex layout

The role of Flex is to be able to arrange items within a container according to set rules without having to calculate the width and margins of each item. Even when the size of the container changes, it can be recalculated so that it is more in line with the expected layout.

(1) Display:flex|inline-flex;flex: equivalent to Block;inline-flex: equivalent to Inline-block

(2) flex-direction (main axis direction of flow layout): row (default); Row-reverse: row opposite direction; column: Column direction; column-reverse: column orientation is opposite

(3) Flex-wrap if the axis is not fit, should be how to change lines. NoWrap (default): Do not wrap, wrap: line, the first line in the top; Wrap-reverse: New Line, the first one below.

(4) Flex-flow (abbreviations for the "flex-direction" and "Flex-wrap" properties), row nowrap for its default property values, representing the Flex-direction and Flex-wrap properties, respectively.

(5) Justify-content (alignment of spindle direction content);

Flex-srart (default): Aligns with the starting direction of the spindle; Flex-end: aligns to the spindle end direction.

Center: Align to the center of the spindle.

Space-between: The starting position is aligned to the starting direction of the spindle, the end position is aligned to the end of the spindle, and the remaining position is aligned to the center of the spindle.

Space-around: Similar to Space-between, except that the start position and end position are half blank.

(6) Align-content (content stack alignment with multiple spindle directions along the side axis)

Flex-start: Multiple spindles are aligned along the starting direction of the side axis; Flex-end: Multiple spindles are aligned along the end of the side axis.

Center: Multiple spindles aligned along the midpoint of the side axis; Space-between: The first spindle is aligned along the starting direction of the spindle, the end spindle is aligned along the end of the spindle, and the other spindle is evenly distributed.

Space-around: Similar to the Space-between, only the side axis starting position and side axis end position retain half blank; Stretch (default): Telescopic multiple spindle, keep side axis direction unify distance.

(7) Align-items (content alignment in the direction of the side axis)

Flex-srart: Align with the starting direction of the side axis; Flex-end: Align to the end of the side axis.

Center: Align to the midpoint of the side axis; Baseline: Maintain baseline alignment on the side axis, whichever is the baseline of the first item.

Stretch (default): Stretches each item in the direction of the side axis, keeping each item at the same starting and ending position.

(8) Item attribute order (sort, items are arranged from small to large according to order values)

Flex-grow (allocation ratio of blank space) Flex-shrink (proportion of project space) 14, BFC

The block-level Box:display property is block, List-item, and the element of the table, generates Block-levelbox. and participate in blockfomatting context;

The inline-level box:display property is inline, Inline-block, inline-table element that generates Inline-level box. and participates in inline formatting context;

BFC (blockformatting context) is literal translation to "block-level formatting contexts." It is an independent rendering area, with only Block-levelbox participating, which stipulates how the Inner block-level box is laid out and has nothing to do with the outside of the area. In a separate isolated container on the page, the child elements inside the container do not affect the outside element.

BFC Layout Rules:

The inner box will be placed in a vertical direction, one after the other.

The vertical distance of box is determined by margin. The margin of the two adjacent box belonging to the same BFC will overlap.

The left side of the margin box for each element is contacted with the left side of the containing block BorderBox (for formatting from left to right, or vice versa). This is true even if there is a float.

The BFC area does not overlap with float box.

BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outside element. The opposite is true.

When calculating the height of the BFC, the floating element also participates in the calculation

which elements generate BFC: The root element float property is not none position for absolute or fixed display for Inline-block, Table-cell, Table-caption, Flex, Inline-flex overflow not for visible

Application: Adaptive Two-column layout, clear internal float, prevent margin overlapping