Front-end Engineer Interview Questions (HTML + CSS)

image.png

It is the recruitment season of golden nine silver ten. I will share with you the front end questions I have collected for many years. It is divided into three parts. This is the first part of HTML and CSS layout related.

1. The other

1.1 New features, removed those elements

HTML5 is no longer a subset of SGML, but is all about adding graphics, location, storage, multitasking, etc.

New features (including tags):

Canvas painting;
Video and audio elements for media playback;
Local offline storage localStorage Stores data for a long time. Data is not lost after the browser is closed. SessionStorage data is automatically deleted after the browser closes;
More semantic content elements such as article, footer, header, nav, section;
Form controls, Calendar, Date, time, Email, URL, search;
New technologies webworker, Websocket, Geolocation;

Removed elements:

Pure elements: Basefont, Big, Center, FONT, S, Strike, TT, U;
Elements that negatively affect usability: Frame, Frameset, Noframes;

1.2 Deal with the browser compatibility of HTML5 new tags

Support for new HTML5 tags: IE8/IE7/IE6 supports tags generated by the document.createElement method. You can take advantage of this feature to enable these browsers to support new HTML5 tags.

You can also use a mature framework like HTML5shim.

<! --[if lt IE 9]> <script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <! [endif]-->Copy the code

1.3 Distinguish BETWEEN HTML and HTML5

DOCTYPE declaration new structural element function element

1.4 Semantic understanding of HTML

Do the right thing with the right label. HTML semantics make the content of the page structured, clearer structure, easy to browser, search engine parsing; Display in a document format even without style CCS and is easy to read; Search engine crawlers also rely on HTML tags to determine the context and the weight of each keyword, which is good for SEO. Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding.

1.5 HTML5 offline storage

When the user is not connected to the Internet, the site or application can be accessed normally. When the user is connected to the Internet, the cache file on the user machine can be updated.

How it works: HTML5 offline storage is based on the caching mechanism (not the storage technology) of a newly created.AppCache file, which stores resources offline through parsed lists that are stored like cookies. Later, when the network is offline, the browser displays the data stored offline.

How to use:

Add a manifest attribute to the page header as shown below;
The cache. Manifest file is written to store offline resources; CACHE MANIFEST #v0.11 CACHE: js/app.js CSS /style. CSS NETWORK: resourse/logo.png FALLBACK: / /offline.html
When offline, use window.applicationCache to implement requirements.

How do browsers manage and load HTML5 offline storage resources? When online, the browser finds the MANIFEST attribute in the HTML header and requests the MANIFEST file. If it is the first time to access the app, the browser will download the corresponding resource according to the contents of the MANIFEST file and store it offline. If the app has already been accessed and the resource has been stored offline, the browser will load the page using the offline resource. Then the browser will compare the new manifest file with the old manifest file. If the file has not changed, nothing will be done. The resources in the file are then re-downloaded and stored offline. When offline, the browser uses the resources stored offline.

2. HTML tag correlation

2.1 What are the disadvantages of iframe?

Iframe blocks the Onload event on the main page;
Search engine searchers can not interpret this kind of page, not conducive to SEO;
Iframe and the home page share the connection pool, and browsers have restrictions on connections to the same domain, so parallel page loading can be affected.

These two disadvantages need to be considered before using iframe. If you need to use an iframe, it is best to use javascript to dynamically add the SRC attribute value to the iframe to get around these two problems.

2.2 What is the function of Label

The label label defines the relationship between form controls. When the user selects this label, the browser automatically shifts focus to the form control associated with the label.

<label ="Name">Number:</label> <input type="text" Name ="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label>Copy the code

2.3 How can I Communicate with multiple Tabs in the Browser?

WebSocket, SharedWorker; You can also call localStorge, cookies and other local storage methods.

When localStorge is added, modified or deleted in another browsing context, it triggers an event. We monitor the event and control its value to carry out page information communication. Quirks: Safari throws a QuotaExceededError exception when setting localStorge in traceless mode;

2.4 How is webSocket compatible with Low Browsers?

Adobe Flash Socket, ActiveX HTMLFile (IE), XHR based on Multipart encoding, XHR based on long polling

2.5 Differences between Font labels

The title attribute has no clear meaning and only represents a title, while H1 represents a title with clear hierarchy, which also has a great influence on the capture of page information.

is used to emphasize the content, while is used to show the content.

I content is displayed in italics, and em indicates emphasized text;

Physical Style Elements pre Semantic Style Elements strong, em, ins, del, Code should use semantic style tags accurately, but not overuse them. Natural style tags are preferred when in doubt.

3. CSS (1)

3.1 Box Model

Introduce the standard CSS box model? What’s different about the box model for the lower version of IE? (1) There are two kinds, IE box model and W3C box model; (2) Box model: content, padding, margin, border; (3) Area: the content part of IE calculates border and pading;

3.2 CSS selector and attribute inheritance

1. Id selector (# myID) 2. Class selector (.myclassName) 3. Tag selector (div, H1, P) 4. Adjacent selector (H1 + P) 5. Child selector (UL > LI) 6. Descendant selector (Li A) 7. Wildcard selector (*) 8. Attribute selector (a[rel = “external”]) 9. Pseudoclass selector (A :hover, Li :nth-child)

Inheritable styles: font size font family color ul li DL DD DT

Non-inheritable style: border padding margin width height

3.3 Priority algorithm

The nearest priority principle shall prevail if the style definition is the nearest in the case of the same weight;
The loading style is based on the last loaded location;

The priority is:! Important > ID > class > tag important Has a higher priority than inline

3.4 CSS3 added pseudo classes

Example: p:first-of-type selects each <p> element that belongs to the first <p> element of its parent element. P :last-of-type Selects each <p> element that belongs to the last <p> element of its parent element. P :only of type Selects each <p> element that belongs to the <p> element unique to its parent element. P :only-child Selects each <p> element that belongs to the only child of its parent element. P :nth-child(2) selects each <p> element that belongs to the second child of its parent. The :after appends content before an element. It can also be used to clear floats. :before Adds content after the element :enabled :disabled Controls the disabled status of form controls. : Checked check boxes or check boxes are selected.Copy the code

3.5 CSS center

Give the div a width and add margin:0 auto

div{
    width:200px;
    margin:0 auto;
 }
Copy the code

Center the absolutely positioned div

  position: absolute;
  width: 1200px;
  background: none;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
Copy the code

Center one horizontally and vertically

Div {position: relative; /* width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; /* background-color: pink; }}Copy the code

Horizontal and vertical center two

Unknown height of the container, using the 'transform' attribute div {position: absolute; /* width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; }}Copy the code

Horizontal and vertical center three

Container {display: flex; container {display: flex; align-items: center; /* vertical center */ justify-content: center; /* Horizontal center */}. Container div {width: 100px; height: 100px; background-color: pink; }}Copy the code

3.6 Display Value and Function

Blocks are displayed as block type elements. None The default value. Display as inline element types. Inline-blocks are displayed like inline elements, but their contents are displayed like block-type elements. List-items are displayed as block type elements and add style list tags. The table element displays the display property as a block-level table. Inherit specifies that the display property should be inherited from the parent elementCopy the code

3.7 the position location

Absolute Generates an absolutely positioned element relative to the first parent element whose value is not static. Fixed (not supported by old IE) generates an absolutely positioned element, positioned relative to the browser window. Relative Generates an element that is positioned relative to its normal position. Static Default value. Without positioning, the element appears in the normal stream (ignoring the top, bottom, left, right Z-index declarations). Inherit specifies that the value of the position property be inherited from the parent element.Copy the code

3.8 New CSS3 features

Added various CSS selectors (: Not (input) : All nodes whose class is not "input") border-radius:8px Multi-column Layout Shadow and Shadow\Reflect Text-shadow text render Transform added rotation, scaling, positioning, tilting, animation, Multi-background transform:\scale(0.85,0.90)\ Translate (0px,-30px)\ skew(-9deg,0deg)\Animation:Copy the code

3.9 Creating a Triangle

#demo {width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }Copy the code

3.10 Browser Compatibility

* The pNG24 bit image will appear in the background of iE6, the solution is to make it PNG8. Margin :0; margin:0; padding:0; } to unify. * IE6 double Margin bug: After the block property tag float, margin is displayed in IE6 larger than the set margin. Float IE to generate double distance #box{float:left; width:10px; margin:0 0 0 100px; } In this case, IE will produce a distance of 20px. The solution is to add -- _display:inline; Convert it to an inline property. (_ is a symbol recognized only by Internet Explorer 6) the gradual elimination of parts from the whole. First of all, the clever use of the "\9" mark, the IE viewer from all the situation out. Then, use "+" again to separate IE8 and IE7 and IE6, so that IE8 has been independently identified. css .bb{ background-color:#f1ee18; Background-color :#00deff\9; background-color:#00deff\9; /*IE6, 7, 8 */ +background-color:#a200ff; /*IE6, 7 */ background-color:#1e0bd1; /*IE6 recognize */} * In IE, you can use the method of getting regular attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes; In Firefox, you can only use getAttribute() to obtain custom attributes. Solution: Use getAttribute() to obtain custom attributes. * In IE,even objects have x,y attributes, but no pageX,pageY attributes; In Firefox,event objects have pageX and pageY properties, but no x and y properties. * workaround :(conditional comment) the disadvantage is that in Internet explorer, additional HTTP requests may be added. * Chrome's Chinese UI forces text smaller than 12px to be displayed at 12px by default, by adding the CSS attribute -webkit-text-size-adjust: None; To solve. Hover styles no longer hover or active after A hyperlink has been clicked. a:link {} a:visited {} a:hover {} a:active {}Copy the code

3.11 Blank interval before Li

The arrangement of the line boxes is affected by the spacing (carriage return \ space), etc. Since Spaces are also characters, these Spaces will also be styled and occupy space, so there will be spacing. If the character size is set to 0, there will be no Spaces.

3.12 Why do I initialize CSS Styles

- Due to browser compatibility issues, different browsers have different default values for some tags. If CSS is not initialized, the page display will be different between browsers. - Of course, initialization styles can have an impact on SEO, but you can't have your cake and eat it, but try to initialize with minimal impact. The simplest initialization method: * {padding: 0; margin: 0; } (strongly not recommended) Taobao style initialization code:  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select textarea {font:12px/1.5tahoma, Arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }Copy the code

4. CSS (2)

Landing the 4.1 specification

(A concept from the W3C CSS 2.1 specification, it is a stand-alone container that determines how an element positions its content and how it relates and interacts with other elements.) A page is made up of boxes, and the type of the Box is determined by the element type and the display attribute. Different types of boxes are involved in different Formatting contexts, so elements inside the Box are rendered in different ways, that is, elements inside and outside the BFC do not affect each other. For details, see the BFC in the CSS

4.2 The CSS Defines weights

Here are the rules for weights: tag weight is 1, class weight is 10, id weight is 100, the following example demonstrates the weight values of various definitions: / * weight for 1 * / div {} / * weight for 10 * /. Class1 {} / * weight for 100 # * / id1 {} / * weight of 100 + 1 = 101 * / # id1 div {} / * weight of 10 + 1 = 11 * /. Class1 div {} Class1. Class2 div{} The last defined style will work if the weights are the same, but this should be avoidedCopy the code

4.3 CSS float

Please explain why floats occur and when they need to be cleared. How to clear the float:

Floating elements leave the document flow and do not take up space. The floating element touches the border that contains it or stays in the border of the floating element. What are the problems and solutions caused by floating elements?

Problems caused by the floating element: the height of the parent element cannot be open, and parent elements at the same level with the floating element at the same level of the floating element (inline element) will follow that float were it not for the first element is the element before the elements also need to float, otherwise it will affect the structure of the page shows the solution: using CSS in the clear: both; Property to clear the float of the element solves problems 2 and 3. For problem 1, add the following style to the parent element:

.clearfix:after{content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block; } /* for IE/Mac */Copy the code

There are several ways to clear floats:

Extra label method

<div style="clear:both;" ></div>Copy the code

(Cons: Adding extra tags makes the HTML structure look less concise.)

Use the After pseudo-class

#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
Copy the code

Notice that we're adding to the parent element

Set up theoverflowforhiddenOr auto

Add CSS property overflow:auto to parent tag that contains floating elements; zoom:1; //zoom:1 for compatibility with IE6.Copy the code

4.4 the cookie isolation

If static files are placed under the master domain name, data with cookies will be submitted to the server when static files are requested, which wastes traffic. Therefore, it is better to separate them. Cookie is limited by domain, so requests cannot be submitted across domains. Therefore, when a non-primary domain name is used, cookie data will not be contained in the request header, which can reduce the size of the request header and the request time, so as to reduce the overall request delay. In addition, this method does not transmit cookies to the Web Server, reduces the processing and analysis of cookies by the Web Server, and improves the speed of HTTP request parsing by the Webserver.Copy the code

4.5 the link and @ import

(1) Link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS, rel connection attributes, etc. @import is provided by CSS and can only be used to load CSS;

(2) When the page is loaded, link is loaded at the same time, and the CSS referenced by @import waits until the page is loaded;

(3) Import is proposed by CSS2.1, and can only be recognized in IE5, while link is XHTML tag, there is no compatibility problem;

4.6 What is the difference between the style tag written after and before the body?

Tips for JS blocking, there have been a lot of articles on the Internet, but less CSS blocking description, so the CSS blocking in-depth study. Wrote a test demo, the code is as follows

late-css.php <? php header("Content-type: text/css; charset=utf-8"); sleep(intval(@$_GET[time])); $str = 'div{background:blue}'; echo $str; ? > late-js.php <? php header("Content-type: text/js; charset=utf-8"); sleep(intval(@$_GET[time])); $str = 'document.write("I'm the lazy note")'; echo $str; ? >Copy the code

index3.html <html> <head> <style> div{background:red; width:200px; height:200px; } </style> <link rel="stylesheet" href="/lab/late/late-css.php? time=10&blue"> </head> <body> <div></div> </body> </html>Copy the code

Running the demo showed that the page had to wait 10 seconds to open, and that the blue square opened directly. (Prove that CSS blocks in the page, but not sure whether it blocks when parsing the DOM or when rendering)

index4.html <html> <head> <style> div{background:red; width:200px; height:200px; } </style> </head> <body> <div></div> </body> <link rel="stylesheet" href="/lab/late/late-css.php? time=10&blue"> </html>Copy the code

Running the demo showed that the page had to wait 10 seconds to open, and that the blue square opened directly. (The proof that CSS exists in the page is blocking rendering) then when we design the page CSS, try to put the CSS displayed on the first screen directly on the HTML is the most appropriate, but the actual situation is difficult to do, such as some navigation styles, the future CDN in the CSS file, have to put CSS in the outer chain.

index.html <html> <head> <style> div{background:red; width:200px; height:200px; } </style> <link rel="stylesheet" href="/lab/late/late-css.php? time=5&blue"> </head> <body> <div><script src="/lab/late/late-js.php? time=10"></script></div> </body> <style> div{background:yellow; } </style> </html>Copy the code

(Proving js, blocking DOM parsing, CSS rendering where DOM parsing goes) guess what this shows? White for 5 seconds, blue for 5 seconds, then yellow

index2.html <html> <head> <style> div{background:red; width:200px; height:200px; } </style> </head> <body> <div><script src="/lab/late/late-js.php? time=10"></script></div> </body> <link rel="stylesheet" href="/lab/late/late-css.php? time=5&blue"> <style> div{background:yellow; } </style> </html>Copy the code

(To prove that CSS does not block DOM parsing on download, but rendering on download) red first, then yellow

Summary: Neither CSS nor JS downloads will be parsed, CSS downloads will block rendering, and external styles will block subsequent script execution until the external styles are loaded and parsed.

There is no JS blocking, CSS will only render after DOM parsing.
When the DOM encounters JS blocking, CSS rendering is triggered

So now there is a question, what is the difference between the CSS before and after the body?

If you don’t have jS blocking, it doesn’t matter where you put it,
If you encounter a JS block, write your CSS above the BODY and there will be no second rendering. If you write your CSS below the BODY, there will be one rendering when the JS block is complete and there will be a second rendering when the block is complete (unless the external chain’s CSS download time is longer than the blocking time).

Reprint please specify

Geek Tutorial – Geek Tutorial