The content of this article is a summary of the html+css front-end interview questions of major Internet companies in BAT, which has certain reference value , Friends in need can refer to it, I hope it will be helpful to you.
Many interview questions were encountered in my own interview with BAT. Sort out and share and hope that more front-end er can make progress together. It is not only suitable for job seekers, but also helpful for consolidating and reviewing the front-end foundation.
And more questions are collected by me along the way, and there are also previous years. Make sure it is correct, and please correct me if there are any mistakes or better solutions.
The first few questions will be very basic, and the deeper you go, the deeper you will get.
Html article:
1. Which browsers have you tested the page on? What are the kernels of these browsers?
-
IE: trident kernel
-
Firefox: gecko kernel
-
Safari: webkit kernel
-
Opera: It used to be the presto kernel, but Opera has changed Use Google Chrome’s Blink kernel
-
Chrome :Blink (based on webkit, jointly developed by Google and Opera Software)
2. There is a very important thing at the beginning of every HTML file, Doctype, do you know what this is for?
Answer: The declaration is placed at the front of the document, in the label Before. This tag tells the browser which HTML or XHTML specification the document uses. (Key point: tell the browser which specification to parse the page according to)
3. What is Quirks Mode? What is the difference between it and Standards mode
Answer:
Starting from IE6, the Standards mode is introduced. In the standard mode, the browser tries to give standard-compliant documents in the specification to the extent that it is properly handled in the specified browser.
CSS is not mature enough before IE6, so before IE5 and so on Browser support for CSS is poor, and IE6 will provide better support for CSS, but then the problem comes, because there are many pages written based on the old layout, and if IE6 supports CSS, it will make these pages The display is abnormal, how to ensure that the existing page is not destroyed, and provide a new rendering mechanism?
We often encounter such problems when writing programs , how to keep the original interface unchanged and provide more powerful functions, especially when the new functions are not compatible with the old functions. A common practice when encountering this kind of problem is to add parameters and branches, that is, when a certain parameter is true, we use the new function, and if this parameter is not true, we use the old function, so that we can not break The original program, but also provides new functions. IE6 also does this similarly. It regards DTD as this “parameter”, because no one will write DTD on previous pages, so IE6 assumes that if DTD is written, it means that this page will use better support for CSS. Layout, and if not, use the layout that is compatible with the previous one. This is Quirks mode (quirks mode, weird mode, weird mode).
Difference:
In general, there are three differences in layout, style analysis and script execution.
Box model: In the W3C standard, if you set an element’s Width and height refer to the width and height of the element content, and in Quirks mode, the width and height of IE also include padding and border.
Css:
1. Is there any way to set the CSS style of a DOM? </st🙂 Mess with other stuff (like bold headlines).
In this regard, it is not possible to do every reset reset. It also does somewhat more than a reset, and it handles quirks you never have to think about, like inconsistent HTML audio elements or inconsistent line-height .
14.What are Sass and LESS? Why is everyone using them?
They are CSS preprocessors. He is an abstraction layer on top of CSS. They are compiled into CSS with a special syntax/language.
For example, Less is a dynamic style language. It endows CSS with the characteristics of a dynamic language, Such as variables, inheritance, operations, functions. LESS can run on the client (supporting IE 6+, Webkit, Firefox) or on the server (with Node.js).
Why use them?
-
Clear structure, Easy to expand.
-
It can easily shield browser private syntax differences. Needless to say, this encapsulates repeated processing of browser syntax differences and reduces meaningless mechanical labor.
-
Multiple inheritance can be easily implemented.
-
It is fully compatible with CSS code and can be easily applied to old project. LESS just extends the CSS syntax, so old CSS code can also be compiled with LESS code.
15.display:none and visibility What is the difference between :hidden?
-
display : Hides the corresponding element but does not occupy the original space of the element.
-
visibility : Hide the corresponding element and occupy the original space of the element.
That is, after using the CSS display:none property , HTML element (object) width, height and other attribute values will be “lost”; and after using visibility:hidden attribute, HTML element (object) is only visually invisible (completely transparent), and it occupies The spatial position still exists.
16. Do you know that CSS has a content attribute? what’s the effect? What is the application?
Answer:
Know. The content property of css is specially applied to the before/after pseudo-element to insert generated content.
The most common application is to use pseudo-classes to clear floats.
//A common code that uses pseudo-classes to clear floating
.clearfix:after {
content: "."; //The content attribute is used here
display: block;
height:0;
visibility: hidden;
clear:both; }
.clearfix {
*zoom:1;
}
The after pseudo-element generates a content behind the element through content The block-level elements of the point, and then use clear:both to clear the float.
Then the problem continues, Know the css counter (sequence number characters are automatically incremented )? How to implement css counter through css content property?
Answer: The css counter is set by counter-reset, counter-increment Two attributes, and one method of counter()/counters() are implemented with after/before pseudo-classes.
Specific implementation plan: Please poke Zhang Xinxu’s blog post CSS counter (serial number characters are automatically incremented ) in detail.
If you think the questions are ok, please give me a recommendation, the number of questions will continue to increase.
For the time being, post the part that makes the answer. For each question in the article, if there are better solutions or mistakes, please let me know.
The above is the detailed content of the html+css front-end interview questions summary of BAT major Internet companies. For more, please pay attention to other related articles on 1024programmer.com!
Please pay attention to other related articles on 1024programmer.com for more details!
微信扫一扫打赏
支付宝扫一扫打赏
