30 HTML+CSS Interview Questions (~ Constantly updated)

-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:

So first we need to set the width to 0
Next we can set the border
Because the width is 0, the border will be concave inwards, and form the effect of the picture above, below, left and right
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

Elements with BFC enabled are not overwritten by floating elements
Parent – child margins of elements with BFC enabled do not merge
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:

First draw the three points and the largest box
Use flex layout and justify-content to allocate space for the container, with space-between aligned at both ends
So center it vertically in the second setting
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;

Structurally: Elements disappear completely on the page, take up no space and are unclickable;
Inheritance: Parent set display: None Child elements can’t be displayed no matter how you set them
Performance: The browser will be redrawn and rearranged, resulting in high performance consumption

opacity: 0;

Structurally: elements disappear on the page and occupy space that can be clicked;
Any setting of opacity:0 for the parent element cannot be displayed;
Performance: Reconstruction layer, low performance consumption

visibility:hidden;

Structurally: when an element disappears, the space it occupies remains; Unable to click on
Inheritance :visibility: hidden inherits quilt elements, but child elements can be set to visibility: visible; To unhide.
Performance: it only causes browser redraw, with relatively little performance cost

Set height, width and other box model properties to 0

The margin,border, padding,height, and width of the elements affect the box model properties set to 0
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:

Very good to reduce the page request, greatly improve the performance of the page;
Reduce image bytes;
Solve the web designers in the picture naming trouble;
Easy to replace style, easy to maintain.

Bad:

Sufficient space should be reserved for image merging. Background fracture is easy to occur under widescreen and high resolution screens.
Development more troublesome, cumbersome measurement; (Style generator can be used)
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

Add and remove visible DOM
The position of the element changes
Element size changes (geometric attributes such as margins, inner margins, border thickness, width, height, etc.)
Page render initialization
Browser window size changed
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