Front end interview questions

1, HTML interview questions

1. How to understand HTML semantics?

  • Make it easier to read (increase code readability)
  • Make search engines easier to read (SEO)

2. By default, which HTML elements are block elements and which are inline elements?

  • display: block/table; Including: div h1 h2 table ul ol p, etc; It is characterized by an exclusive line
  • display: incline/incline-block; Including span img input button, etc

2, CSS interview questions

1. Layout

  • 1. How to calculate the width of the box model?

    <!--The following code, div1 of offsetWidth How old is it?-->
    	#div1 {
    		width: 100px;
    		padding: 10px;
    		border: 1px solid #ccc;
    		margin: 10px;
    <div id="div1"></div>
    1. offsetWidth = (content width + inner margin + border), no outer margin. The answer to this question is 100+10x2+1x2=122px
    2. What if you want offsetWidth to be equal to 100px?
      1. You can add a box sizing: border box
  • 2. Vertical overlap of margin

    With the following code, what is the distance between AAA and BBB?

    	p {
    		font-size: 16px;
    		line-height: 1;
    		margin-top: 10px;
    		margin-bottom: 15px;
    <p>BBB </p>
    • The margin top and margin bottom of adjacent elements overlap
    • Blank content

      Also overlap
    • So the answer is 15px
  • 3. The problem of negative margin

    • Margin top and margin left are negative values, and the element moves up and left
    • Margin right is a negative value. The right element moves left and is not affected
    • Margin bottom is a negative value. The lower element moves up and is not affected
  • 4.BFC understanding and Application

    • Block format context, block level format context
    • An independent rendering area. The rendering of internal elements will not affect elements outside the boundary
    • Common conditions for forming BFC:
      • float is not none
      • position is absolute or fixed
      • overflow is not visible
      • display is flex, inline block, etc
  • 5.float layout and clearfix

    • How to realize the Holy Grail layout and double wing layout?
      • The purpose of the Grail layout and the twin wing layout

        • Three column layout, the middle column is loaded and rendered first (the content is the most important)
        • The content on both sides is fixed, and the content in the middle is adaptive with the width
        • Generally used for PC web pages
      • Technical summary of Holy Grail layout and double wing layout

        • Use float layout
        • Negative margin values are used on both sides,
        • Prevent the middle content from being covered by both sides, one with padding and the other with margin
      • Handwritten clearfix:

        First, let's explain why clearfix is used.
        Usually, when we write html+css, if the child element inside a parent element is float ing, it often happens that the parent element cannot be normally opened by the child element, as shown in the following figure:

        .clearfix:after {
        	content: '';
        	display: table;
        	clear: both
  • 6.flex colorator

    • Common grammar review:

      • flex-direction
  • justify-contnet

    • align-items
  • flex-wrap

    • align-self
      <style type="text/css">
            .box {
                width: 200px;
                height: 200px;
                border: 2px solid #ccc;
                border-radius: 10px;
                padding: 20px;
                display: flex;
                justify-content: space-between;
            .item {
                display: block;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #666;
            .item:nth-child(2) {
                align-self: center;
            .item:nth-child(3) {
                align-self: flex-end;
        <div class="box">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>

2. Positioning

  • What are absolute and relative positioning based on?
    • relative is positioned according to itself (it will not have any impact on external elements)
    • absolute is located according to the location element of the nearest layer
      • Positioning elements include: absolute relative fixed body
  • What are the implementation methods of center alignment?
    • Horizontal center:
      • inline element: text align: Center
      • block element: margin: auto
      • absolute element: left: 50% + margin left negative value
    • Vertical center:
      • inline element: the value of line height is equal to the value of height
      • absolute element: Top: 50% + margin top negative value
      • absolute element: transform(-50%, -50%)
      • absolute element: top,left,bottom,right = 0 + margin: auto

3. Graphic style

  • Inheritance of line height
    • Case 1: write a specific value, such as 30px, and inherit the value
    • Case 2: write ratio. For example, 2 / 1.5 inherits this ratio. The result is the latest font size multiplication ratio
    • Case 3: write percentage, such as 200%, inherit the calculated value (test site)

4. Responsive

  • What is rem?
    • rem is a unit of length
      • px, absolute length unit, most commonly used
      • em, relative length unit, not commonly used relative to the parent element
      • rem, relative length unit, relative to the root element, is often used in responsive layouts
  • Common solutions for responsive layout?
    • Media query to set the root element font size according to different screen widths
    • rem, based on the relative unit of the root element


  • CSS responsive vw/vh

    • Disadvantages of rem

      • "Ladder" property
       @media only screen and (max-width: 374px) {
                  /* iphone5 Or smaller, set font size in proportion to the width (320px) of iPhone 5 */
                  html {
                      font-size: 86px;
              @media only screen and (min-width: 375px) and (max-width: 413px) {
                  /* iphone6/7/8 And iphone x */
                  html {
                      font-size: 100px;
              @media only screen and (min-width: 414px) {
                  /* iphone6p Or larger, set the font size in proportion to the width (414px) of the iPhone 6p */
                  html {
                      font-size: 110px;
    • Web page viewport size

      • window.screen.height / / screen height
      • window.innerHeight / / Web page viewport height
      • document.body.clientHeight //body height
    • vw/vh

      • 1vh represents 1 / 100 of the web page viewport height
      • 1vw represents 1 / 100 of the width of the web page viewport
      • vmax means taking the maximum value of vh and vw; vmin means to take the minimum value of vh and vw
  • About CSS3 animation

    • It's not the focus of the interview, unless you're interviewing for a position specializing in animation

3, JS interview questions

1. What types can typeof judge

2. When to use = = = when to use==

3. Difference between value type and reference type

4. Handwritten deep copy

1. Variable type

  • Value type VS reference type

    • Value type

    • reference type

    • Common value types

      let a //undefinded
      const s = 'abc'
      const n = 100
      const b = true
      const s = Symbol('s')
    • Common reference types

      const obj = {x: 100}
      const arr = ['a', 'b', 'c']
      const n = null //Special reference type, pointer to null address
      function fn() {} //Special reference types are not used to store data, so there is no "copy and copy function"
  • typeof operator

  • Deep copy

2. Variable calculation

Tags: Javascript html5 html css

Posted on Thu, 16 Sep 2021 14:16:57 -0400 by dfego