Summarize the Html and CSS of the front-end questions, and summarize the css

Summarize the Html and CSS of the front-end questions, and summarize the css

Summary of the front-end interview questions. Today we will share the Html and CSS sections
Interview (1)
1. Which browsers are commonly used for testing? What kernel (Layout Engine) does it have )?
(Q1) browsers: IE, Chrome, FireFox, Safari, and Opera.
(Q2) kernel: Trident, Gecko, Presto, Webkit.
2. What is the difference between the element in the lower row and the block-level element? Is the compatibility of block elements in the row used? (Less than IE8)
(Q1) in-row elements: they are arranged horizontally and cannot contain block-level elements. The width setting is invalid, the height setting is invalid (line-height can be set), the margin setting is invalid, and the padding setting is invalid.
Block-level elements: Each occupies one row and is arranged vertically. Start from the new line and end with a broken line.
(Q2) compatibility: display: inline-block; * display: inline; * zoom: 1;
3. What are the methods for clearing floating points? Which method is better?
(1) The parent div defines the height.
(2) Add the empty div label clear: both at the end.
(3) parent div defines pseudo classes: after and zoom.
(4) parent div defines overflow: hidden.
(5) parent div defines overflow: auto.
(6) The parent div also floats and the width needs to be defined.
(7) parent div defines display: table.
(8) Add the br label clear: both at the end.
4. What are common attributes of box-sizing? What are their respective functions?
(Q1) box-sizing: content-box | border-box | inherit;
(Q2) content-box: content boxes that apply the width and height to the elements respectively. Draw the padding and border of the element beyond the width and height (default effect of the element ).
Border-box: Any padding and border specified by the element will be drawn within the configured width and height. The width and height of the content can be obtained by subtracting the border and the padding from the configured width and height.
5. What is the role of Doctype? What are the differences between standard and compatible modes?
(Q1) <! DOCTYPE> inform the browser about the standard document used by the parser to parse this document. If the DOCTYPE does not exist or the format is incorrect, the document is displayed in compatibility mode.
(Q2) standard mode typographical and JS operating modes are all run according to the highest standards supported by the browser. In compatibility mode, pages are displayed in a loose and backward compatible manner, simulating the behavior of older browsers to prevent sites from working.
6. Why does HTML5 only need to be written? <! Doctype html>?
HTML5 is not based on SGML, so you do not need to reference DTD, but you need doctype to regulate browser behavior (let the browser run as they should ).
HTML4.01 is based on SGML, so you need to reference the DTD to inform the browser of the document type used.
7. What is the difference between using link and @ import for page import styles?
(1) link is an XHTML label. In addition to loading CSS, link can also be used to define RSS and rel connection attributes. @ import is provided by CSS and can only be used to load CSS;
(2) When a page is loaded, the link will be loaded at the same time, and the CSS referenced by @ import will be loaded after the page is loaded;
(3) import is proposed by CSS2.1 and can be identified only after IE5 or above, while link is an XHTML tag and there is no compatibility problem;
8. What is your understanding of the browser kernel?
It is mainly divided into two parts: the Rendering Engine (layout engineer or Rendering Engine) and JS Engine.
Rendering Engine: It is responsible for obtaining webpage content (HTML, XML, images, etc.), organizing messages (such as adding CSS), and calculating webpage display methods, and then output to the monitor or printer. Different browser kernels have different syntax interpretations for Web pages, so the rendering effect is also different. All Web browsers, email clients, and other applications that need to edit and display network content require the kernel.
JS engines: parse and execute javascript to achieve dynamic web page effects.
At the beginning, the rendering engine and JS engine were not clearly differentiated. Later, the JS engine became more and more independent, and the kernel tends to only refer to the rendering engine.
9.html 5 What are the new features? How can I solve the browser compatibility problem of HTML5 new labels? How to differentiate HTML and HTML5?
HTML5 is no longer a subset of SGML, mainly about the addition of functions such as image, location, storage, and multitasking.
(1) painting canvas;
(2) video and audio elements used for media playback;
(3) Local offline storage localStorage stores long-term data, and the data will not be lost after the browser is closed;
(4) sessionStorage data is automatically deleted after the browser is closed;
(5) semantic content elements, such as article, footer, header, nav, and section;
(6) form controls, such as calendar, date, time, email, url, and search;
(7) New technologies: webworker, websocket, and Geolocation;
IE8, IE7, and IE6 support document. the tags generated by the createElement method can be used to allow these browsers to support HTML5 new tags. After the browser supports new tags, you also need to add the default tag style. Of course, mature frameworks such as html5shim can also be used directly;
<! -- [If lt IE 9]>
<Script> src = "http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [Endif] -->
10. Briefly describe your understanding of HTML semantics?
Use the correct tag to do the right thing.
Html semantics makes the page content structured and the structure clearer, so as to facilitate analysis of browsers and search engines;
It is easy to read and display in a document format even if no style CSS is available;
Search engine crawlers also rely on HTML tags to determine the weights of context and keywords, which is conducive to SEO;
It makes it easier for people who read the source code to block the website for easy reading, maintenance, and understanding.
Here is a summary of html and css. If there are any errors, please pay off them. If you have any questions during the interview, please leave a message and we will fix them together!