-Pre-interview test points

HTML interview questions

  • How to understand HTML semantics
  • By default, which HTML tags are block-level and which are inline?

CSS inspection knowledge point analysis:

  • layout
  • responsive
  • positioning
  • CSS3
  • Graphic style
  • animation

CSS Basic Interview

  • How is the width of the box model calculated?

  • Margin longitudinal overlap problem

  • Margin negative problem

  • BFC understanding and application

  • Float layout issues, as well as ClearFix

  • Flex picture dice

  • Absolute and relative

  • What are the ways of centering?

  • Line-height inheritance problem

  • What is REM?

  • How to implement responsiveness?

  • Animation on CSS

HTML and CSS take up about 1/4 of the interview time, which is no more than 45 minutes

1. If you understand HTML semantics

  • Add the codereadability
  • Make search engines easier to read (SEO)

2. Block elements & inline elements?

Block-level elements: display:block/table; Div H1 h2 table ULOL P and so on

Inline elements: display:inline/inline-block; Span, IMG, input button, etc

3. Width calculation of box model

  • offsetWidth= (content width + inside margin + border),There is noFrom the outside

Here is an example to calculate its offsetWidth:

div{
	with:100px;
	padding:10px
	border 1px solid #ccc;
	margin: 10px;
}
Copy the code

The offsetWidth of 122 px

Note: What if I make offsetWidth equal to 100px

div{
	with:100px;
	padding:10px
	border 1px solid #ccc;
	margin: 10px;
	box-sizing:border-box;
}
Copy the code

You can see how box-sizing works

Box – sizing – CSS (cascading style sheets (CSS) | MDN (mozilla.org)

4. How to easily implement a triangle

Implement the triangle idea:

  1. So first we need to set the width to 0
  2. Next we can set the border
  3. Because the width is 0, the border will be concave inwards, and form the effect of the picture above, below, left and right
  4. Finally, just set the three blocks to transparent color to achieve the desired effect (including removing the bottom border but missing the bottom part).
<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>How to implement a sector</title>
    <style>
        #triangle{
            width: 0;
            border-top: 100px solid red;
            border-bottom: 100px solid yellow;
            border-left: 100px solid green;
            border-right: 100px solid blue;
        }
    </style>
</head>
<body>
    <div id="triangle"></div>
</body>
</html>
Copy the code

Code implementation:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>How to implement a sector</title>
    <style>
        #triangle{
            width: 0;
            border-top: 100px solid # 000;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
        }
    </style>
</head>
<body>
    <div id="triangle"></div>
</body>
</html>
Copy the code

5. How to achieve a sector

The realization of the sector is the same as the realization of the triangle, but add more border rounded corners, followed by the unnecessary set to transparent color

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>How to implement a sector</title>
    <style>
        #triangle{
            width: 0;
            border-top: 100px solid red;
            border-bottom: 100px solid yellow;
            border-left: 100px solid green;
            border-right: 100px solid blue;
            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div id="triangle"></div>
</body>
</html>
Copy the code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>How to implement a sector</title>
    <style>
        #triangle{
            width: 0;
            border-top: 100px solid red;
            border-bottom: 100px solid transparent;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div id="triangle"></div>
</body>
</html>
Copy the code

6. Margin longitudinal overlap

So let’s take a piece of code for example what is the spacing between AAA and BBB?

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>Margin longitudinal overlap problem</title>
    <style>
        p{
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <p>aaa</p>
    <p></p>
    <p></p>
    <p></p>
    <p>bbb</p>
</body>
</html>
Copy the code

From aaa to BBB 15px + (10px + 15px)*3+10px = 100px

But the distance between AAA and BBB is actually 15px

Problems identified during the period include:

  • Margin-top and margin-bottom of adjacent elements overlap
  • Blank content<p> </p>

7. Set top left right bottom of margin to negative value.

What we need to know about this question:

  • Margin-top left is the translation element itself
  • Margin-right bottom pans other elements

Effect:

  • Margin-top and margin-left are negative values, and elements move up and left
  • Margin-right is a negative value, and the right element moves to the left, not affecting itself
  • Margin-bottom negative value, the bottom element moves up, not affecting itself

8. What is BFC? How to apply it?

  • Block formatting context

  • A separate render area where the rendering of the inner elements does not affect the boundary elements.

Then the common conditions for the formation of BFC are:

  • The float property is not None
  • Position is absolute or fixed
  • The display for the inline – block, table – cell, table – caption, flex, inline – flex
  • The overflow is not visible

Enable BFC features

  1. Elements with BFC enabled are not overwritten by floating elements
  2. Parent – child margins of elements with BFC enabled do not merge
  3. BFC enabled elements can contain floating child elements (resolves floating height collapses)

9. Clearfix by hand

.clearfix::after{
	content:' ';
	display:block;
	clear:both;
}
Copy the code

10. Flex layout implements a three-point palette

It’s worth reviewing common grammar to talk about this

  • Flex-direction Indicates the direction of the elastic layout. By default, row is horizontal, column is vertical, and column-reverse is vertical

  • Flex-wrap Elastic project switch, default is “nowRAP”, see the link CSS Flex-wrap properties (w3school.com.cn)

  • Precision-content: To allocate space between and around elements of an elastic container, remember the following seven:

justify-content: center;     /* center */

justify-content: flex-start; /* Start from the beginning of the line */

justify-content: flex-end;   /* From the end of the line */

justify-content: space-between;  /* The first element is placed at the beginning and the last element at the end */

justify-content: space-around;  /* Allocate the same space around each element */

justify-content: space-evenly;  /* Evenly arrange each element with equal spacing between each element */

justify-content: stretch;       /* Evenly sized elements of 'auto'-sized elements are stretched to fit the container size */
Copy the code
  • Align-self: aligns the currentgrid 或 flex In the lineThe elements of the
align-self: start;/* vertical */

align-self: center;/* Vertical center */

align-self: end;/* vertical */
Copy the code
  • Align-items: Align-self values on all direct child nodes are set to a group. The align-self property sets the alignment of the item on the cross axis in its containing block. It’s also start, Center, end. See the reference links: align the items – CSS (cascading style sheets (CSS) | MDN (mozilla.org)

Given the above properties it is easy to know how to implement three points of the dice

Ideas:

  1. First draw the three points and the largest box
  2. Use flex layout and justify-content to allocate space for the container, with space-between aligned at both ends
  3. So center it vertically in the second setting
  4. The third point is set vertically below
<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>Implement three points of the dice</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;

            display: flex;
            justify-content: space-between;
            /* flex-direction: row-reverse;  */
        }
        .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;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>
Copy the code

11. The box edge width is fixed and the right box is adaptive

1. Set left float, right box width=100% margin-left= left box width

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .left{
            width: 100px;
            height: 100vh;
            background-color: aqua;
            float: left;
        }
        .right{
            width: 100%;
            height: 100vh;
            margin-left: 100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>
Copy the code

2. Left box float left, right box float right, set width:calc(100%- left box width)

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .left{
            width: 100px;
            height: 100vh;
            background-color: aqua;
            float: left;
        }
        .right{
            float: right;
            width: calc(100% - 100px);
            height: 100vh;
            background-color: brown;
        }
    </style>
</head>
<body>
        <div class="left"></div>
        <div class="right"></div>
</body>
</html>
Copy the code

3. The parent container is flex layout, the left child container is fixed width, the right child container is flex:1

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .father{
            display: flex;
        }
        .left{
            width: 100px;
            height: 100vh;
            background-color: aqua;
        }
        .right{
            flex: 1;
            height: 100vh;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
</body>
</html>
Copy the code

12. What is the definition of absolute and relative?

  • Relative basisIts positioning
  • Absolute according to the mostLocate elements near one layer(with positioning) positioning
  • Fixed: according to theviewportpositioning
  • sticky

13. What are the implementation methods of center alignment?

1. Horizontal center

  • Inline /inline-block elements: text-align:center
  • Block: margin: 0, auto
  • Absolute element: left: 50% + margin-left minus half of the element width
  • Absolute: left,right=0 + margin: 0 auto
  • Absolut element: left:50% + Transform: Translate (-50%,0)
  • Absolute: default parent display:flex; justify-content:center;

2. Center vertically

  • Inline element: line-height equals height
  • Absolute: top:50% + margin-top Minus half of the element height
  • Absolute: top,bottom=0 + margin auto 0;
  • Absolute :top,bottom=0 + margin:auto 0;
  • Flex: default parent display:flex; align-items: center;
  • Display: table-cell; display: table-cell; vertical-align:middle

14. How to inherit line-height

  • Write a specific value, such as 30px, and inherit the value
  • Write ratio, such as 2/1.5, inherits the ratio
  • Write percentage, such as 200%, then inherit the calculated value (考 试)
.father{
	font-size:20px;
	line-hight:200%;
}
.child{
/* How much is the line height of the child? * /
}
Copy the code

Obviously the child is evaluated from the parent element’s value 20px * 200% = 40px

15. How to use CSS to achieve single-line multi-line text overflow processing

1. Single-line text overflow

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>Implement single-line and multi-line text overflow</title>
    <style>
        .box{
            width: 100px;
            white-space: nowrap;/* Do not change careers */
            overflow: hidden;/* Hide */ if it exceeds
            text-overflow: ellipsis;/* If it exceeds the limit, it will be marked */
        }
    </style>
</head>
<body>
    <div class="box">
        ukdkasldaskajhas83182903812iewsa213sjansn
    </div>
</body>
</html>
Copy the code

2. Multi-line text overflow

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>Implement single-line and multi-line text overflow</title>
    <style>
        .box{
            width: 100px;
            display: -webkit-box;/* Display objects as elastic stretchable box models */
            -webkit-box-orient: vertical;/* align */ 
            -webkit-line-clamp:3;/* go to 3 lines */
            overflow: hidden;/* Hide */ if it exceeds
            word-break: break-all;/* Cast */
        }
    </style>
</head>
<body>
    <div class="box">
        ukdkasldaskajhas831829038238901237982199312iewsa213sjansn
    </div>
</body>
</html>
Copy the code

16. The method of eliminating the gap at the bottom of the picture

The first thing we need to know is what is picture gap

  • Change the image to a block level element display:block

  • Font-size :0
<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>Eliminate gaps between image bottom lines</title>
    <style>
        .father{
            font-size: 0;
        }
        img{
            /* display: block; * /
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="./1579713706279534.jpg" alt="">
        <img src="./1579713706279534.jpg" alt="">
    </div>
</body>
</html>
Copy the code

There are two other ways to do it first of all if the picture is large, one on top and one on the bottom

  • Img {vertical-align:bottom; }
  • Box {line-height: 0; }

17. What is responsive design? The principle?

A website is compatible with multiple terminals, rather than making a specific version for each terminal

The basic principle is to detect different device screen sizes through media query to do processing.

The page header must have a meta declaration viewPort

<meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Copy the code

18. What is REM and the difference between PX, EM and REM?

  • Px pixels. The absolute unit, pixel px, is relative to the screen resolution of the monitor
  • Em, a unit of relative length, relative to the parent element, not often used
Font-size is the font size corresponding to the parent element, while width and height are the font size relative to themselvesCopy the code
  • Rem, the font size relative to the HTML of the root element, is often used for responsive layouts
Font-size, width, and height are always relative to the root font sizeCopy the code

19. What are common options for responsive layouts?

  • Media-query: sets the font size of the root element depending on the screen
  • Rem, based on the relative units of the root element
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        @media only screen and(min-width:375px)and(max-width:413px) {/* iPhone 6/7/8 and iPhone X */
            html{
                font-size: 100px; }}@media only screen and(min-width:414px) {/* iPhone 6 or larger */
            html{
                font-size: 110px; }}body{
            font-size: 0.16 rem;
        }
        #div1{
            width: 1rem;
            height: 1rem;
            background: rgb(211.211.211);
        }
    </style>
</head>
<body>
    <div id="div1">
        this is div
    </div>
</body>
</html>
Copy the code

20. What’s the difference between Transition and animation?

  • Transition: Used for transition effects, no frame concept, only start and end states, low performance overhead
  • Animate: Used for animation, frame concept, can be repeatedly triggered and have intermediate states, high performance overhead, active trigger

21. Will-change property (new to CSS3)

Improve page scrolling, animation and other rendering performance will-change

​ scroll-position;

​ opacity;

​ transfrom

​ left,top;

22. Use an element to show and hide?

  • display:none;

  1. Structurally: Elements disappear completely on the page, take up no space and are unclickable;

  2. Inheritance: Parent set display: None Child elements can’t be displayed no matter how you set them

  3. Performance: The browser will be redrawn and rearranged, resulting in high performance consumption

  • opacity: 0;

  1. Structurally: elements disappear on the page and occupy space that can be clicked;

  2. Any setting of opacity:0 for the parent element cannot be displayed;

  3. Performance: Reconstruction layer, low performance consumption

  • visibility:hidden;

  1. Structurally: when an element disappears, the space it occupies remains; Unable to click on

  2. Inheritance :visibility: hidden inherits quilt elements, but child elements can be set to visibility: visible; To unhide.

  3. Performance: it only causes browser redraw, with relatively little performance cost

  • Set height, width and other box model properties to 0

  1. The margin,border, padding,height, and width of the elements affect the box model properties set to 0

  2. If an element has child elements or content, you should also set overflow: Hidden to hide the child elements

23. Selector priority

! Important > Inline Style > ID selector > Class selector > Label selector > Wildcard > Inheritance

Weight algorithm :(0,0,0,0) — >

The first 0 corresponds to the number of important,

The second zero corresponds to the number of ID selectors,

The number of class selectors corresponding to the third zero,

The fourth zero corresponds to the number of tag selectors,

This adds up to the weight of the current selector.

Compare: Start with the first 0. If the first 0 is large, the selector has a high weight. If the first 0 is the same, compare the second, and so on.

‘nth-child ‘selects the child of the parent element. This child element does not specify an exact type, but is valid only if both conditions are met

One is a child, and the other is a child that happens to be in that position

“Nth-of-type” selects a child of a parent element, and that child element is of the specified type.

<style>
ul>li:nth-of-type(1) {color:red
}
</style>

<body>
<ul>
	<p>p</p>
	<li>1</li>// This is red<li>2</li>
</ul>
<body>
Copy the code

24. What is CSS Sprites? Its advantages and disadvantages?

The CSS Sprite combines a bunch of small images into one large image

Best:

  1. Very good to reduce the page request, greatly improve the performance of the page;

  2. Reduce image bytes;

  3. Solve the web designers in the picture naming trouble;

  4. Easy to replace style, easy to maintain.

Bad:

  1. Sufficient space should be reserved for image merging. Background fracture is easy to occur under widescreen and high resolution screens.

  2. Development more troublesome, cumbersome measurement; (Style generator can be used)

  3. Maintenance headaches, small background changes can affect the entire image, resulting in byte increases and CSS changes.

What is a CSS Hack?

To solve the different browser interpretation of CSS, different browsers to make different CSS style Settings is called CSS Hack.

26. This section describes the understanding of the browser kernel

The browser kernel has two parts: rendering engine and JS engine.

Rendering engine: Converts code into pages for output to the browser interface.

Javascript engine: Parses and executes javascript to achieve dynamic web pages.

At the beginning, rendering engines and Js engines were not clearly distinguished, but as Js engines became more and more independent, the kernel tended to refer only to rendering engines.

29. Describe the design ideas of progressive enhancement and elegant degradation

Progressive enhancement (from top to bottom) : Build the page for the lower version browser to ensure the most basic functions, and then improve the effect, interaction and additional functions for the advanced browser to achieve a better user experience.

Graceful downgrading (bottom up) : Build full functionality from the start and then make it compatible with older browsers.

30. The difference between redrawing and rearranging

Rearrangement: When a part of the render tree must be updated and the node size changes, the browser invalidates the affected part of the render tree and reconstructs the render tree. In short, a change in geometry results in a change in page layout.

Redraw: The browser action that is triggered when the appearance of an element is changed. The browser redraws the element based on its new attributes to give it a new appearance. This is when non-geometric information changes to the page layout, such as changing the background color of an element, the text color, the border color, and so on

  • Causes a reorder operation

  1. Add and remove visible DOM

  2. The position of the element changes

  3. Element size changes (geometric attributes such as margins, inner margins, border thickness, width, height, etc.)

  4. Page render initialization

  5. Browser window size changed

  6. Gets some properties. When some attributes are fetched, the browser also triggers reordering to get the correct value, which causes a queue refresh. Therefore, these values should be cached when used multiple times.

  • Properties that cause a rearrangement
width height padding margin
display border-width border top
position font-size float text-align
overflow-y font-weight overflow left
font-family line-height vertical-align right
clear white-space bottom min-height
offsetTop offsetLeft offsetWidth offsetHeight
scrollTop scrollLeft scrollWidth scrollHeight
clientTop clientLeft clientWidth clientHeight
getComputedStyle() (currentStyle in IE)
  • Lead to redraw

All of the following styles cause redrawing

color border-style visibility background
text-decoration background-image background-position background-repeat
outline-color outline outline-style border-radius
outline-width box-shadow background-size

~ Continuously updated