• Coordinates: Guangzhou
  • Time: spring Recruitment in 2021
  1. Which of the following pseudo-classes can be used to set the effects under the button? D
A:hover
B:blur
C:focus
D:active
Copy the code

Not visited: Link, visited :visited, Hover: Hover, active link :active, Get focus: Focus and JQuery blur events

2. Add the following styles to the following div. What is the font color? pink

<body> <div class="div1"> <div class="div2" id="div2" style="color: red;" > test < / div > < / div > < / body > < style >. Div2 {color: pink! important; } #div2{ color: black; } .div1>.div2{ color: blue; } </style>Copy the code

Priority:! Important > Inline Style > ID selector > Class selector = Property selector = pseudo-class selector > tag selector = pseudo-element selector

  1. Which of the following is not a relative unit? A
A, pt B, EM C, REM D, pxCopy the code

Absolute units: in, pt, cm, mm, relative units: %, PX, REM, RM, VW, vH

4. In the following code, what is the print result of clicking on the d2 element? blue red

<body> <div> <div class="d1" onclick="console.log('red');" > <div class="d2" onclick="console.log('blue');" ></div> </div> </div> </body> <style> .d1{width: 100px; height: 100px; background-color: red; } .d2{width: 50px; height: 50px; background-color: blue; } </style>Copy the code

Bubbling events

5. What is the result of executing the following code? 7

   var data=6;
    function Data(){
        this.data=7;
    }
    Data.prototype.getData=function(){
        return this.data;
    }
    console.log(new Data().getData());
Copy the code

6. Which of the following descriptions about stacks and queues is correct? B

A) Stack fifO B) queue fifO C) queue fifO D) queue fifOCopy the code

7. Which of the following is true about HTTP status 500? A

A. The server encounters an unexpected condition that prevents it from processing the request. B. The server working as A network administrator or agent receives an invalid response from the upstream server when it tries to execute the requestCopy the code

Common HTTP status codes: 200 request success, 400 client request syntax error, 500 server internal error, unable to complete the request, 301 request resource permanently moved to the new URI

  1. Which of the following options does not belong to the HTTP Layer 7 protocol? D
A. application layer B. session layer C. Network layer D. control layerCopy the code

HTTP seven layer protocols: physical layer, data link layer, network layer, transport layer, session layer, presentation layer, and application layer

9. What is your understanding of the CSS box model?

CSS box models can be divided into two types: content-box and border-box. Under the standard box model, box-sizing: border-box; Can be converted to a weird box model.

Similarities:

  • Box models are made up of padding, margin, border and Content

Difference:

(1) Standard box model

  • Width =margin+padding+border+width
  • The size of the box is content first, automatically expanding, and child elements can spread over parent elements

(2) Weird box model

  • Width = margin + width (width refers to content + padding + border width)
  • The box model of the parent element is determined. The child element cannot expand the box model of the parent element, and its size cannot be changed by the content

10. Layout the page with Float and Flex (100px left and right, adaptive in the middle)

flex:

    <style>
        div{
            height: 100vh;
            line-height: 100vh;
            border:  1px solid brown;
            text-align: center;
        }
        .wrap{
            display: flex;
        }
       .left, .right{
           width: 100px;
       }
       .center{
           flex: 1;
       }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>
Copy the code

Float:

    <style>
        div{
            height: 100vh;
            line-height: 100vh;
            border:  1px solid brown;
            text-align: center;
        }
       .left{
           width: 100px;
           float: left;
       }
       .right{
        width: 100px;
        float: right;
       }
    </style>
</head>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>
Copy the code

11. Write the traversal results of the nodes in the following figure by using the first, middle and last traversal respectively

  • Sequential traversal: A-B-D-F-G-H-I-E-C
  • Middle order traversal: F-D-H-G-I-B-E-A-C
  • After traversal: H-I-F-G-D-E-B-C-A

12. How do I get the date of the last day of a month?

function getLastDay(year,month) { var date=new Date(year,month,0).getDate(); Return year+' year '+month+' date '; } the console. The log (getLastDay (2021, 2));Copy the code

As shown in figure:

13. Please briefly describe the response process of page resources after entering the URL in the browser.

  • The browser makes an HTTP request to the server
  • Perform DNS resolution to obtain the SERVER IP address
  • The client starts a random port and after three shakes (sym-ACK/SYN-ACK) accesses the server’s network card.
  • The browser can then send the actual request
  • The server receives the HTTP request, parses the path and parameters, and completes the response after processing in the background.
  • The browser receives the response from the server and starts parsing the HTML, DOM tree +CSS tree, and rendering the page.
  • The server closes the TCP connection

14. Programming problem