Front-end interview questions (personally think dry goods***)

1. The difference between scrollWidth, clientWidth, and offsetWidth
(1) scrollWidth: the width of the actual content of the object, without the border width, will increase as the content of the object exceeds the visible area.
(2) clientWidth: The width of the visible area of ​​the object's content, excluding the scroll bar, etc., will change with the change of the object's display size.
(3) OffsetWidth: The actual width of the object as a whole, the contours of the scroll bar, etc., will change with the change of the display size of the object.

2. How to make Chrome support text smaller than 12px?

.size {
    
    
 font-size:10px;
 -webkit-transform:scale(0.8);
 display:block;
}

<div class="size">我是十号字</div>

3. Write the easiest way to remove duplicates

//es6的new Set()方式
let array=[1,2,3,4,5,6,2,3];
[...new Set(array)]

4. Congruent comparison of array objects

'abc' === 'abc' // true
1 === 1 // true
[1,2,3] === [1,2,3] // false
{
    
    a: 1} === {
    
    a: 1} // false
{
    
    } === {
    
    } // false

5. What does var boo = '22' + 3-'1' output

var boo = '22' + 3 - '1'
console.log(boo) // 222
console.log(typeof boo) // number

6. What attributes can be set for box-sizing in css?
(1) The width and height of content-box are respectively applied to the content box of the element. Draw the inner margins and borders of the element outside the width and height
(2) border-box Any inner margins and borders specified for the element will be drawn within the set width and height
(3) Inherit specifies that it should be drawn from the parent The element inherits the value of the box-sizing attribute

~~Continue to update later~