Front-end interview FAQs
Introduces common questions when interviewing front-end engineers. Some of them have no answers. You can think about these questions in your spare time
1. Which browsers are commonly used for testing? What kernels (Layout Engine) are there?
(Q1) Browsers: IE, Chrome, FireFox, Safari, Opera.
(Q2) Kernel: Trident, Gecko, Presto, Webkit.
2. Tell me the difference between inline elements and block-level elements? Compatibility usage of inline block elements? (Below IE8)
(Q1) Inline elements: will be arranged in the horizontal direction and cannot contain block-level elements. Setting width is invalid, height is invalid (line-height can be set), margin up and down is invalid, padding Up and down are invalid.
Block-level elements: Each occupies one line and is arranged vertically. Begins on a new line and ends with a line break.
(Q2) Compatibility: display:inline-block;*display:inline;*zoom:1;
3. What are the ways to clear floats? Which is the better way?
(Q1)
(1) The parent div defines height.
(2) Add an empty div tag clear:both at the end.
(3) The parent div defines pseudo-classes: after and zoom.
(4) The parent div defines overflow:hidden.
(5) The parent div defines overflow:auto.
(6) The parent div is also floating and needs to define the width.
(7) The parent div defines display:table.
(8) Add the br tag clear:both at the end.
(Q2) The better method is the third method, which is used by many websites.
4. What are the commonly used attributes of box-sizing? What are the functions of each?
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box: The width and height are applied to the content box of the element respectively. Draws the element's padding and borders outside the width and height (the element's default effect).
border-box: Any padding and borders specified by the element will be drawn within the set width and height. The width and height of the content are obtained by subtracting the border and padding from the set width and height respectively.
5. What is the role of Doctype? What is the difference between standards mode and compatibility mode?
(Q1) tells the browser's parser what document standard to use to parse this document. A non-existent or incorrectly formatted DOCTYPE will cause the document to be rendered in compatibility mode.
(Q2) The typesetting and JS operation mode of the standard mode run according to the highest standard supported by the browser. In compatibility mode, pages are displayed in a loosely backwards-compatible manner, simulating the behavior of older browsers to prevent the site from not working.
6. HTML5 Why do you only need to write ?
HTML5 is not based on SGML, so there is no need to reference the DTD, but a doctype is needed to regulate browser behavior (let browsers run as they should).
HTML4.01 is based on SGML, so you need to reference the DTD to tell the browser the document type used by the document.
7. When importing styles into a page, what is the difference between using link and @import?
(1) Link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS, define rel connection attributes, etc.; while @import is provided by CSS and can only be used to load CSS. ;
(2) When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading;
(3) The import is CSS2. 1 proposed, it can only be recognized in IE5 or above, and link is an XHTML tag, so there is no compatibility issue.
8. Please introduce your understanding of the browser core?
It is mainly divided into two parts: rendering engine (layout engineer or Rendering Engine) and js engine.
Rendering engine: Responsible for obtaining the content of the web page (HTML, XML, images, etc.), organizing the information (such as adding CSS, etc.), and calculating the display method of the web page, and then outputting it to the monitor or printer.
Different browser kernels will have different grammatical interpretations of web pages, so the rendering effects will also be different. All web browsers, email clients, and other applications that edit and display web content require the kernel.
JS engine: parses and executes javascript to achieve dynamic effects on web pages.
At first, the rendering engine and the JS engine were not clearly distinguished. Later, the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine.
9. What are the new features of html5? How to deal with browser compatibility issues with HTML5 new tags? How to differentiate between HTML and HTML5?
(Q1)
HTML5 is no longer a subset of SGML. It is mainly about the addition of images, location, storage, multitasking and other functions.
(1)Painting canvas;
(2)Video and audio elements for media playback;
(3)Local offline storage localStorage long-term storage data, browser Data will not be lost after closing;
(4) SessionStorage data will be automatically deleted after the browser is closed;
(5) Content elements with better semantics, such as article, footer, header, nav, section;
(6)Form controls, calendar, date, time, email, url, search;
(7)New technologies webworker, websocket, Geolocation;
(Q2)
IE8/IE7/IE6 supports tags generated by the document.createElement method,
You can use this feature to make these browsers support HTML5 new tags.
After the browser supports the new tags, you need to add the default style of the tags.
Of course, you can also directly use mature frameworks, such as html5shim,
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to distinguish between closing a browser tab and closing the entire browser using JavaScript?
Apr 04, 2025 pm 10:21 PM
How to distinguish between closing tabs and closing entire browser using JavaScript on your browser? During the daily use of the browser, users may...
