Common CSS and HTML-side questions

1. What kinds of browser tests are used? What are the kernel (Layout Engine)?

browser : Ie,chrome,firefox,safari,opera.

kernel : Trident,gecko,presto,webkit.

2. What is the difference between a line element and a block-level element? is the compatibility of inline block elements used? (belowIE8 )

• inline Elements : will be in the horizontal direction, cannot contain block-level elements, set width is invalid, height is invalid (can be set line-height), margin is invalid, padding up and down invalid.
  Block-level elements: each occupy one row, arranged in a vertical direction. Start at the beginning of the new line and then a break.
• compatibility : display:inline-block;*display:inline;*zoom:1;

3. What are the ways to clear floats? Which is the better way?

(1) Parent div defines height.

(2) Add empty div tag clear:both at the end.

(3) Parent Div defines pseudo-classes: after and zoom.

(4) Parent div definition Overflow:hidden.

(5) Parent div definition Overflow:auto.

(6) The parent Div also floats and needs to define the width.

(7) Parent div definition display:table.

(8) Add BR tag Clear:both at the end.

4.box-sizing what are the common attributes? What are the roles of each?

box-sizing: Content-box|border-box|inherit;

Content-box: The width and height are applied to the element's content box, respectively. Draws the inner margin and border of an element outside the width and height (the element default effect).
Border-box: Any padding and borders specified by the element are drawn within the set width and height. The width and height of the content can be obtained by subtracting the border and padding from the set width and height.

5.Doctype role? What is the difference between standard mode and compatibility mode ?

<! Doctype> tells the browser parser to parse this document with what documentation standards. DOCTYPE does not exist or is incorrectly formatted to cause the document to render in compatibility mode.

The standard mode of typesetting and JS operation mode are all supported by the browser to run the highest standards. In compatibility mode, pages are displayed in a relaxed, backwards-compatible fashion, simulating the behavior of older browsers to prevent sites from working.

6.HTML5 Why do you just need to write <! Doctypehtml>?

HTML5 is not SGML-based and therefore does not require references to DTDs, but requires DOCTYPE to regulate the behavior of the browser (let the browser run the way they should).

HTML4.01 is based on SGML, so a reference to the DTD is required to tell the document type used by the browser document.

7. What is the difference between using link and @import When importing a page ?

(1)link is XHTML tag, in addition to loading CSS, can also be used to define RSS, define the 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 @import referenced CSS will wait until the page is loaded and loaded;

(3)import is CSS2.1 proposed, only in IE5 above to be recognized, and link is XHTML label, no compatibility problem;

8. Describe your understanding of the browser kernel?

It is divided into two main parts: the rendering engine (layout engineer or Renderingengine) and the JS engine.

Rendering Engine : responsible for obtaining the content of the Web page (HTML, XML, images, etc.), organizing the message (such as adding CSS, etc.), and calculating how the Web page is displayed, and then outputting it to the monitor or printer. The browser's kernel is different from the syntax of the Web page, so the effect of rendering is not the same. The kernel is required for all Web browsers, e-mail clients, and other applications that need to edit and display Web content.

JS the engine : parses and executes JavaScript to achieve the dynamic effect of the Web page.

The first rendering engine and the JS engine are not clearly distinguished, and then the JS engine becomes more independent, the kernel tends to refer only to the rendering engine.

9.HTML5 What are the new features? How do I handle Browser compatibility issues with HTML5 new tags? How do I differentiate between HTML and HTML5?

HTML5 is now not a subset of SGML, mainly about image, location, storage, multi-tasking and other functions.

• (1) Painting canvas;
• (2) video and audio elements for media playback;
• (3) Local offline 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) Semantically better content elements, such as article, footer, header, nav, section;
• (6) Forms control, calendar, date, time, email, url, search;
• (7) New technical Webworker, WebSocket, geolocation;

IE8/IE7/IE6 supports the label generated by the Document.createelement method, which allows these browsers to support HTML5 new tags and, after the browser supports new tags, add the default style of the tag. Of course, you can use the mature framework directly, such as Html5shim;

<!--[Iflt IE 9]>

<script>src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" </script>

<! [endif]-->

Describe your understanding of HTML semantics?

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

Common CSS and HTML-side questions