One, foreword

Usually see other people write the face, found HTML and CSS test is not much, but there are some HTML and CSS knowledge points are often asked, can be called a classic interview questions are not too much. In my opinion, if you have enough time to read a lot of HTML and CSS questions, it doesn’t matter, but if you don’t have enough time, you need to learn how to choose between them. Also focus on the core knowledge of native JavaScript.

How do big companies conduct interviews?

Note: Interviews with large companies have a characteristic, is based on the same question, repeatedly asked you.

  • What is tag semantics
  • What are the labels? What do they mean
  • The difference between block-level labels and inline labels
  • How to convert
  • Display what else is there besides these values
  • display:none
    • What can you do to hide elements?
    • Display: None and visibility:hidden difference?
    • Animation-compatible processing
    • What else can the filter do
    • …
  • display:flex
    • When did you use Flex in your project
    • What else can you center in this way?
    • What else can be done with responsive layouts?
    • What are the box models
  • …

If you know the answers to the above questions, you can skip this part and enter the next part. If you have some unclear answers to the above questions, I suggest that you can take the time to learn the relevant knowledge and then enter the main topic.

Three, classic interview questions analysis

1. How do you understand HTML semantics?

Endorsement type answer – related knowledge points, also equivalent to direct those knowledge points to say, but without their own views

  • 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;
  • Displays in a document format even without styling CSS 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.

Answer brilliantly – by example/illustration

I think the main idea of HTML semantics is that we should use appropriate tags to structure web content. The essence of HTML is to define the structure of web documents. A semantic document makes the results of a page clearer and easier to understand. This not only facilitates maintenance and understanding by developers, but also enables the machine to interpret the content of the document correctly.

For example, we often use b tags and strong tags, which are bold text in style, but the strong tag has the semantics of emphasis. To a general display, we might look the same, but to a machine, there’s a big difference. If the user is using a screen reader to access a web page, the strong tag has a noticeable change in tone, while the B tag does not.

If a search engine crawler analyzes our web page, it will rely on HTML tags to determine the context and the weight of each keyword. A semantic document is friendly to crawlers. It is conducive to crawler interpretation of document content, which is conducive to SEO of our website. From HTML 5, we can see that the standard tends to construct web pages in a semantically oriented way, such as adding semantic tags such as header, footer and aside. Deleted big, font and other non-semantic tags. HTML 5 is much more than that.

From table layout to DIV + CSS layout, to today’s professional front end using the correct tags for page development.

2. What is your understanding of HTML5?

Endorsement type answer: simply say knowledge point, skip

Answer brilliantly – talk about something relevant and then talk about something or two that you are familiar with

HTML5 is the latest version of the standard that defines HTML. Features new elements, attributes and behaviors, while having a larger technology set, allowing for building more diverse and powerful websites and applications.

HTML5 has added some semantic tags, such as header, footer, nav, etc., and removed some pure style tags. Form improvements; Some new additions:

  • Canvas painting
  • Video and audio elements for media playback
  • Local Communication (webSocket)
  • LocalStorage (localStorage, sessionStorage)
  • Device capability (map location, mobile phone shake)

Extension point:

What problem does HTML5’s emergence of local storage solve?

  • Overcome some of the limitations of cookies, while storing some data that needs to be tightly controlled by the client and doesn’t need to be sent to the server
  • Provides an alternative way to store sessions in addition to cookies
  • Provides a way to store data across sessions with large storage space

Repeat the distinction between cookie, localStorage, sessionStorage – be organized

The common storage technologies on the browser side are cookie, localStorage, and sessionStorage.

Cookies were originally a way for the server to record user status. They were set by the server, stored by the client, and then sent to the server when the client initiated a same-origin request. A cookie can store up to 4K data, its lifetime is specified by the Expires attribute, and the cookie can only be shared by same-origin page access.

LocalStorage is a browser-native storage method provided by html5, which is generally capable of storing 5M or more data. Unlike sessionStorage, it does not expire unless it is actively deleted, and localStorage can only be accessed and shared by same-origin pages.

SessionStorage is also a browser-local storage method provided by HTML5. It draws on the concept of server-side Seesion, which represents the data saved in a session. It can store 5M or more data, it expires after the current window closes, and sessionStorage can only be accessed and shared by same-source pages of the same window.

Table Summary:

features cookie localStorage sessionStorage
Data life cycle Generally, it is generated by the server. You can set the expiration time Unless it’s cleaned up, it’s always there This parameter is valid only in the current session and is cleared after you close the page or browser
Data store size 4K 5M 5M
Communicates with the server Each time it is carried in the same HTTP request header, using cookies to store too much data can cause performance problems Don’t participate in Don’t participate in
use Generated by the server to represent user identity Used by the browser to cache data Used by the browser to cache data

3. Master the five schemes in which the box is placed horizontally and vertically

The endorsement type answer: will oneself understand the plan answer come out

Answer with gusto. – Personal advice

This need, in the midst of my project is very common, just began, I only come to this plan, and then with the rise of CSS 3, flex the popularity of this way, the special convenient, for a time, when I go to Denver to see blog, found a kind of scheme, this scheme is not commonly used, but also can realize, I feel very interesting, So remember it.

This shows that you pay attention to new technology, discuss the comparison between new technology and old technology, good learning habits and self-learning ability.

Solution to achieve this requirement:

  • Positioning: three kinds
  • display:flex
  • Flex/Grid and Margin: Auto
  • JavaScript
  • display:table-cell

Start by creating the basic HTML layout and the most basic styles.

<div class="container">
    <div class="center"></div>
</div>
Copy the code

The basic CSS styles are as follows:

/* Public code */* {padding: 0;margin: 0; }.container{
    /* Set the size of the parent box */
    width: 100vw;
    height: 100vh;
}
.center{
    width: 100px;
    height: 100px;
    background-color: # 666;
}
Copy the code

Method 1: Absolute positioning and negative margin implementation (known height width)

This method needs to know the height and width of the vertically centered element to calculate the margin value, which is compatible with all browsers. That is, you need to know the specific width and height of the element

.container{
    position: relative;
}
.center{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
Copy the code

One problem with this requirement is that you need to know the specific width and height of the element

Method 2: Absolute positioning and Margin: Auto (known height width)

This method does not need to know the height and width of vertically centered elements, but does not work with older versions of Internet Explorer.

.container{
    position: relative;
}
.center{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; /* * */
}
Copy the code

Method 3: Absolute location +CSS3(height and width of unknown elements)

Using Css3’s Transform, it is easy to realize the vertical centering of elements in the case of unknown height and width. But in a project, if you want to use it for practical purposes, it’s best not to use it for compatibility reasons.

.container{
    position: relative;
}
.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, 50%); }Copy the code

Approach 4: Flex layout

It is not compatible with earlier Versions of Internet Explorer.

/* Set it in the parent container */
.container{
    position: relative;
    width: 100vw;
    height: 100vh; /* Must have height */
    display: flex;
    justify-content: center; /* Spindle alignment */
    align-items: center; /* Alignment of the cross axes */
}
Copy the code

Flex/Grid and Margin: Auto

The container elements are either flex layout or Grid layout, and the child elements are simply margin: Auto, not compatible with earlier versions of Internet Explorer.

.container{
    width: 100vw; /* Must have height */
    height: 100vh;
    display: grid; /* or flex */
}
.center{
    margin: auto;
}

Copy the code

Method 6: JavaScript – Understand

This way, when the page size changes again, the box position does not automatically change. In general, if you can use CSS, you don’t need JavaScript.


      
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>JavaScript implements vertical horizontal center of the box</title>
  <style>* {padding: 0; margin: 0; }body{
      position: relative;
    }
    .box{
      width: 100px;
      height: 100px;
      background: # 666;
    }
  </style>
</head>
<body>
  <div id="box" class="box"></div>
  <script>
      let HTML = document.documentElement,
          box = document.getElementById('box'),
          winW = HTML.clientWidth,
          winH = HTML.clientHeight,
          boxW = box.offsetWidth,
          boxH = box.offsetHeight;

      box.style.position = 'absolute';
      box.style.left = (winW - boxW) / 2 + 'px';
      box.style.top = (winH - boxH) / 2 + 'px';
  </script>
</body>
</html>
Copy the code

Method 7: Table layout – understand

.container{
    width: 100vw;
    height: 100vh;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.center{
    display: inline-block;
}
Copy the code

4. About the box model in CSS3

When you answer questions, don’t endorse, don’t endorse, don’t endorse.

Brilliant answers – think analytically, which approach is better, what pain points are encountered, in conjunction with the project, looking at the source code of UI libraries written by others

The box model is composed of content, padding, border and margin. Box-sizing: content-box Box-sizing: content-box Box-sizing: content-box I had a situation where I implemented a 100*100 box, set width and height, and added padding and border, and found that the box would get bigger. I had to manually change width and height every time I changed it. Then CSS 3 came along and provided a way to box-sizing: Border-box, also known as weird box model, width and height refer to the box size, not the content size, no matter how I adjust, no matter how I adjust the border, it will scale the content itself, the whole box will still be 100*100, so it’s easier to write the style, you don’t have to calculate the value yourself. So I used box-sizing: border-box in my projects.

When doing mobile responsive development, there are many layout options that can be applied to CSS 3’s Flex flex box model.

Standard box model

Weird box model

Flex elastic box model

5. How does the CSS achieve a two-column layout?

Start by creating the basic HTML layout and the most basic styles.

<div class="wrapper" id="wrapper">
  <div class="left">The left side is fixed in width, not in height</br> </br></br></br>The height could be very small or it could be very large.</div>
  <div class="right">The content here may be higher or lower than the left-hand side. The width needs to be adaptive.</br>The basic style is that the two divs are 20px apart and the left div is 120px wide</div>
</div>
Copy the code

The basic CSS styles are as follows:

.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
}
.left {
    width: 120px;
    border: 5px solid #ddd;
}
.right {
    margin-left: 20px;
    border: 5px solid #ddd;
}
Copy the code

The following code overrides this basic code by adding different classes to the container.

doubleinline-blockplan

.wrapper-inline-block {
    box-sizing: content-box;
    font-size: 0;	/* Remove whitespace */
}

.wrapper-inline-block .left..wrapper-inline-block .right {
    display: inline-block;
    vertical-align: top;	/* Align top */
    font-size: 14px; /* The child element needs to be reset */
    box-sizing: border-box;
}

.wrapper-inline-block .right {
    width: calc(100% - 140px); /* Dynamically calculate the width of the right box */
}
Copy the code

Disadvantages:

  • You need to know the width of the left box, the distance between the two boxes, and box-sizing for each element
  • Whitespace characters need to be removed
  • You need to set upvertical-align: topSatisfy top alignment

doublefloatplan

.wrapper-double-float {
    overflow: auto;		/* Clear float */
    box-sizing: content-box;
}

.wrapper-double-float .left..wrapper-double-float .right {
    float: left;
    box-sizing: border-box;
}

.wrapper-double-float .right {
    width: calc(100% - 140px);
}
Copy the code

Disadvantages:

  • You need to know the width of the left box, the distance between the two boxes, and box-sizing for each element
  • Parent elements need to be cleared of float. Personal advice: use pseudo-elements to float clearly

float+margin-leftplan

.wrapper-float {
    overflow: hidden;		/* Clear float */
}

.wrapper-float .left {
    float: left;
}

.wrapper-float .right {
    margin-left: 150px;
}
Copy the code

Disadvantages:

  • Need to clear float
  • We need to calculate the right boxmargin-left

useabsolute+margin-leftmethods

.wrapper-absolute .left {
    position: absolute;
}

.wrapper-absolute .right {
    margin-left: 150px;
}
Copy the code

Disadvantages:

  • Absolute positioning is used; if used in a div, you need to change the position of the parent container
  • There is no way to clear the floatIf the left box is higher than the right box, it exceeds the height of the parent container. So you can only set the parent container’smin-heightTo place this situation.

usefloat+BFCmethods

.wrapper-float-bfc {
    overflow: auto;
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}
Copy the code

Use left float, but right box through Overflow: auto; The BFC is formed so that the right box does not overlap with the floating elements.

Disadvantages:

  • The parent element needs to clear the float

flexplan

.wrapper-flex {
    display: flex;
    align-items: flex-start;
}

.wrapper-flex .left {
    flex: 0 0 auto;
}

.wrapper-flex .right {
    flex: 1 1 auto;
}
Copy the code

The actual development of the use of more is this scheme, less code, simple to use. Note that a default property value for the Flex container is align-items: Stretch. This property causes the column height effect. To make both boxes height automatic, set align-items: flex-start;

gridplan

Another new layout. Can meet the demand. Expand your knowledge.

.wrapper-grid {
    display: grid;
    grid-template-columns: 120px 1fr; /* Define the column width of each column */
    align-items: start; /* Sets the vertical position of the cell contents (top, middle, bottom) */
}

.wrapper-grid .left..wrapper-grid .right {
    box-sizing: border-box;
}

.wrapper-grid .left {
    grid-column: 1; The grid-column attribute is a combination of grid-column-start and grid-column-end */
}

.wrapper-grid .right {
    grid-column: 2;
}
Copy the code

Note:

  • gridLayout also hasColumn etc.Is the default. Need to set:align-items: start;.
  • gridThe layout also has a small area of note andflexDifferent: in usemargin-leftThe time,gridThe default layout isbox-sizingSet the position between box widths. whileflexIt uses two divsborderorpaddingThe distance between the sides.

6. How does CSS achieve a three-column layout?

The three-column layout, as the name implies, is fixed on both sides and adaptive in the middle. This layout is very old, but it’s still very classic because it’s used in many places, including some big companies.

Note: Grail layout, wing layout separately after details

Start by creating the basic HTML layout and the most basic styles.

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>
Copy the code

The basic CSS styles are as follows:

* {padding: 0;margin: 0; }.left{
    width: 100px;
    height: 200px;
    background-color: red;
}
.right{
    width: 200px;
    height: 200px;
    background-color: blue;
}
.main{
    height: 200px;
    background-color: green;
}
Copy the code

The following code overrides this basic code by adding different classes to the container.

Float solution

.container-float{
    overflow: auto;
}
.container-float .left{
    float: left;
}
.container-float .right{
    float: right;
}
.container-float .main{
    margin-left: 120px;
    margin-right: 220px;
}
Copy the code

Disadvantages:

  • The parent element needs to clear the float
  • The main content cannot be loaded first, which affects the user experience when there is too much content on the page

Absolute positioning scheme

.container-absolute{
    position: relative;
}
.container-absolute .main{
    margin: 0 120px;
}
.container-absolute .left {
    position: absolute;
    left: 0;
    top: 0;
}

.container-absolute .right {
    position: absolute;
    right: 0;
    top: 0;
}
Copy the code

Simple and practical, and the main content can be loaded first.

Disadvantages: If the middle column has a minimum width limit, or if the inner element has a width, layer overlap can occur when the browser width is small enough.

Landing the plan

BFC rules are described as follows: BFC regions, which do not overlap with floating elements. So we can use this to achieve a three-column layout.

.container-float-bfc .left{
    float: left;
    margin-right: 20px;
}
.container-float-bfc .right{
    float: right;
    margin-left: 20px;
}
.container-float-bfc .main{
   	overflow: hidden;
}
Copy the code

Disadvantages:

  • The parent element needs to clear the float

  • The main content modules cannot be loaded first, which affects the user experience when there is too much content on the page

The flex project

HTML layout:

<div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>
Copy the code

CSS styles:

.container-flex{
    display: flex;
}
.container-flex .main{
    flex-grow: 1;
}
.container-flex .left{
    order: -1;
    flex: 0 1 100px;
    margin-right: 20px;
}
.container-flex .right{
    flex: 0 1 200px;
    margin-left: 20px;
}
Copy the code

Simple and practical, the future trend.

Table scheme – understand

HTML structure:

<div class="container container-table">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>
Copy the code

The CSS code:

.container-table{
    display: table;
    width: 100%;
}
.left..main..right{
    display: table-cell;
}
Copy the code

Disadvantages: Can’t set column spacing

7. Analyze the core principles of grail layout

Basic HTML layout:

Note: In the HTML code, place the main part of the container first, then the left part, then the right part

<div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>
Copy the code

1. The left and right columns of the three columns are 200px and 200px in width respectively, and the main part in the middle is set to 100% full

Note: This CSS code is based on constant modification

* {padding: 0;margin: 0; }.container > div {
    height: 200px;
}
.left{
    width: 200px;
    background: red;
}
.right{
    width: 200px;
    background: blue;
}
.main{
    width: 100%;
    background: green;
}
Copy the code

2. Set all left floats. Now main takes up the entire line because width is 100%.

.container > div {
    float: left;
    height: 200px;
}
Copy the code

3, left element set margin-left:-100%; Back to the wardrobe

Note: Setting margin-left to negative will change the position of the element itself. Due to the float, the element is pulled to the left by the width of the main element (100%) so it is back to the beginning.

4, set the right element margin-left: -200px; Back to the end of each line

The left and right elements cover the contents of the main element, so we can add the padding to the container:

6. Set relative positioning

After the padding is set, the left and right elements are squeezed in. We can set position:relative to absolute because the floating elements are already out of the document flow. Position is achieved by setting the relative position of the left and right elements:

Complete CSS code:

* {padding: 0;margin: 0; }.container{
    padding: 0 220px; / * step 5 * /
}
.container > div {
    float: left; / * step 2 * /
    height: 200px;
    position: relative; Step 6 / * * /
}
.left{
    width: 200px;
    background: red;
    margin-left: -100%; Step 3 / * * /
    left: -220px; Step 6 / * * /
}
.right{
    width: 200px;
    background: blue;
    margin-left: -200px; / * step 4 * /
    right: -220px; Step 6 / * * /
}
.main{
    width: 100%;
    background: green;
}
Copy the code

Summary of complete operation steps

  • In HTML code, the main section is placed in the first part of the container, followed by the left and right sections

  • The left and right columns of the three columns are 200px and 200px wide respectively. The main section in the middle is set to 100% full

  • Set all three to float left, and now main takes up the entire line because width is 100%.

  • Margin-left :-100%; margin-left:-100%; margin-left:-100%

  • Margin-left: -200px; Back to the end of each line

  • The left and right elements cover the contents of the main element, so we can add the padding to the container

  • After the padding is set, the left and right elements are crowded in, so we can set position:relative

  • If you want to keep the container at the same height, add min-height:200px to the left main right

I believe that readers (I) look at the above implementation process, and then look at the summary of the complete operation steps, should be to achieve a clearer understanding of the holy cup layout.

8. Analyze the core principle of dual-wing layout

Basic HTML layout:

 <div class="main">
     <div class="center">
         <div class="center-inner"></div>
     </div>
     <div class="left"></div>
     <div class="right"></div>
</div>
Copy the code

CSS styles:

* {padding: 0; margin: 0; }.main > div {float: left; }.left{
    width: 200px;
    height: 200px;
    background: red;
    margin-left: -100%;
}
.right{
    width: 200px;
    height: 200px;
    background: blue;
    margin-left: -200px;
}
.center{
    width: 100%;
}
.center-inner{
    margin: 0 220px;
    height: 200px;
    background: grey;
}
Copy the code

In fact, the essence of the two-wing layout is the same as that of the Holy Grail layout. Both elements are arranged by setting negative margins. The difference is the HTML structure. Instead of the padding of the grail layout, to eliminate overlaying of elements on both sides. Therefore, the principle of these two layouts is basically the same, the key is to set negative margin skills, and element float relative positioning skills to achieve.

9. Have an in-depth knowledge of the underlying CSS specification BFC

1. What is BFC?

BFC (Block Formatting Context) is an independent block-level rendering area with only Block level involvement. This area has a set of rendering rules that govern the layout of block-level boxes. BFC elements can be considered as separate containers for Block Formatting Contexts. The elements inside the container do not affect the layout of the elements outside, and the BFC has some features that normal containers do not. In layman’s terms, the BFC can be thought of as a large, closed box, where the elements inside the box, no matter how turbulent, do not affect the outside.

2. Trigger conditions

As mentioned above, the BFC is a render area. Where and how large the render area is depends on the element that generates the BFC. CSS2.1 specifies that an element that satisfies one of the following CSS declarations generates the BFC;

  • The root element or any other element containing it
  • The float property is not None
  • Overflow property is not visible
  • Display properties are inline-block, table-cell, table-caption, flex, inline-flex
  • The position attribute is absolute or fixed

3. BFC rendering rules

  • The internal boxes will be placed vertically, one on top of the other;
  • The vertical distance of the Box is determined by margin. The margin of two adjacent boxes belonging to the same BFC will overlap (collapse), independent of direction;
  • The left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.
  • The BFC region does not overlap the float element region;
  • A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa;
  • When calculating the height of the BFC, the floating element is also involved;

4. Application of BFC in layout

Prevent margin overlap

According to the second rule of BFC, the vertical distance of Box is determined by margin, and margin overlap will occur between two boxes belonging to the same BFC

The solution is to wrap the container on one of the p’s and trigger its BFC, so that the two P’s are not the same BFC and therefore do not overlap;


      
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    .wrap{
      overflow: hidden; /* New BFC */
    }
    p{
      background: #ccc;
      width: 200px;
      margin: 100px;
    }
  </style>
</head>
<body>
  <p>haha</p>
  <div class="wrap">
    <p>hehe</p>
  </div>
</body>
</html>
Copy the code
Clear internal float

According to rule 6 of the BFC layout: when calculating the height of the BFC, floating elements are also involved in the calculation

Example: It can’t inflate the parent while the child elements float. Solution: Let the parent generate BFC


      
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    .parent{
      border: 5px solid #ccc;
      width: 300px;
      overflow: hidden; /* Form BFC */
    }
    .child{
      background: red;
      width: 100px;
      height: 100px;
      float: left;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>
</html>
Copy the code
Prevents elements from being overwritten by floating elements

According to rule 3 of the BFC layout: the left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float;

Follow the fourth rule of BFC layout: the BFC area does not overlap with the float box

Example: Adaptive two-column layout


      
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    .aside{
      width: 200px;
      height: 200px;
      background: #ccc;
      float: left;
    }
    .main{
      background: grey;
      height: 300px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="aside"></div>
  <div class="main"></div>
</body>
</html>
Copy the code
conclusion

The examples above illustrate rule 5 of the BFC: A BFC is a separate container on a page, and children within the container do not affect external elements and vice versa;

Because the elements inside the BFC do not affect the external elements, when there are floating elements outside the BFC, in order not to affect the layout of the internal Box, the BFC will narrow to avoid overlapping with the floating elements. Similarly, when there is a float inside the BFC, the HEIGHT of the float element is included in the BFC calculation so as not to affect the layout of external elements. The same goes for avoiding margin overlap.

10. Mobile responsive layout development

  • media
  • rem
  • flex
  • vh / vw

For more information, please refer to principles and Solutions of Front-end Responsive Layout (Detailed version).

Sigh with emotion

Blogging is very fee energy, I began to enjoy the process of writing a blog, it may be particularly strong to give my self fulfillment, the process of from 0 to 1, expect from a small white to finally can acquire this moment, at the same time share is a very happy thing, hope can grow up together with everybody progress, become better myself. About HTML&CSS classic interview questions, first share here, the follow-up will continue to add according to the actual situation, I hope to inspire you. If you think this article is good, please remember to like and follow it!

Reference article:

  • Front-End-Interview-Notebook
  • Reveal front-end storage
  • Let’s get cookie straight
  • Front-end interview to fill the gap –(four) front-end local storage
  • 16 ways to achieve horizontal center and vertical center
  • CSS implements horizontal and vertical centralization in 1010 ways
  • How to center an element (Final)
  • Box-sizing border-box
  • Seven ways to achieve left fixed and right adaptive two-column layout
  • CSS layout says – probably the most complete
  • Explain seven three-column CSS layout techniques
  • Overview of CSS Three-column Layout (including the Two-wing layout and the Holy Grail Layout)
  • Four methods of CSS three-column layout
  • The Holy Grail layout and the principle of the twin wing layout
  • Interviewer: Have you learned anything about mobile adaptation?