30 HTML + CSS interview questions (~ continuously updated)

- Pre interview test site

HTML Interview questions

How to understand HTML semantic
By default , Which? HTML Tags are block level elements 、 Which are inline elements ？

CSS Investigate knowledge points and analyze ：

Layout
Response type
location
CSS3
Graphic style
Animation

CSS Basic interview

How to calculate the width of the box model ？
margin The problem of vertical overlap
margin Negative value problem
BFC Understanding and Application
float Layout issues , as well as clearfix
flex Draw dice
absolute and relative
What are the ways of centering ？
line-height The question of inheritance
rem What is it? ？
How to achieve responsive ?
About css Animation

html and css The time in the interview is not long 45 Minutes takes up about 1/4 Time for , Let's start with the positive ~

1. If you understand HTML semantic

Add the code Readability
Make search engines easier to read （SEO）

2. Blocky element & Inline elements ？

Block-level elements ：display:block/table; Yes div h1 h2 table ulol p etc.

Inline elements ：display:inline/inline-block; Yes span img input button etc.

3. Box model width calculation

offsetWidth = ( Content width + padding + Frame ), nothing Margin

The following is an example to calculate its offsetWidth ：

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

Its offsetWidth by 122px

Be careful : If you allow offsetWidth be equal to 100px How to do

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

You can see box-sizing Specific usage of

box-sizing - CSS（ Cascading style sheets ） | MDN (mozilla.org)

4. How to simply implement a triangle

Realizing triangle idea ：

First, we need to set the width to 0
Secondly, we can set the border
Because the width is 0, The border will be concave inside , And form the effect as shown in the figure, up, down, left and right
Finally, as long as the three pieces are set to transparent color, the desired effect can be achieved （ The lower frame is removed, but the lower part is missing ）

<!DOCTYPE html>
<html lang="en">
<head>
<title> How to implement a fan </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 code

Code implementation ：

<!DOCTYPE html>
<html lang="en">
<head>
<title> How to implement a fan </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 code

5. How to implement a fan

Implementing a sector is the same as implementing a triangle , Nothing more than adding a border fillet , Secondly, set the unnecessary to transparent color

<!DOCTYPE html>
<html lang="en">
<head>
<title> How to implement a fan </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 code

<!DOCTYPE html>
<html lang="en">
<head>
<title> How to implement a fan </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 code

6. margin The problem of vertical overlap

Let's take a piece of code as an example aaa To bbb What's the distance between them ？

<!DOCTYPE html>
<html lang="en">
<head>
<title>margin The problem of vertical overlap </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 code

Logically speaking ：aaa To bbb Between 15px + (10px + 15px )*3+10px = 100px

But in fact aaa To bbb The distance between is ：15px

The problems found during this period are ：

Of adjacent elements margin-top and margin-bottom There is overlap
Of blank content <p> </p>

7. Yes margin Of top left right bottom Set to negative , What effect ？

To talk about this, we need to know ：

margin-top left Is to translate the element itself
margin-right bottom Translate other elements

effect :

margin-top and margin-left negative , Element up 、 Move to the left
margin-right negative , The right element moves left , It's not affected by itself
margin-bottom negative , The lower element moves up , It's not affected by itself

8. What is? BFC？ How to apply ？

Block formatting context （block formatting context）
A separate rendering area , The rendering of internal elements does not affect the elements with boundaries .

Then form BFC The common conditions of ：

float Property is not none
position by absolute or fixed
display by inline-block, table-cell,table-caption,flex,inline-flex
overflow Not for visible

Turn on BFC Characteristic function

Turn on BFC Elements of are not overwritten by floating elements
Turn on BFC The parent-child margins of elements are not merged
Turn on BFC Can contain floating child elements （ Solve the floating height collapse ）

9. Handwriting clearfix( Remove the floating )

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

10. flex The layout realizes the chromaticity of three points

To talk about this, it is necessary to review the common grammar

flex-direction The direction of the elastic layout defaults to row horizontal direction , The relative level is row-reverse, Vertical is column, The vertical opposite is column-reverse
flex-wrap Flexible project transfer , The default is “nowrap”, See the reference link for details CSS flex-wrap attribute (w3school.com.cn)
justify-content: How to allocate the space between and around the elements of the elastic container , Remember the following 7 Just one ：

justify-content: center; /* center alignment */
justify-content: flex-start; /* Arrange from beginning of line */
justify-content: flex-end; /* Start at the end of the line */
justify-content: space-between; /* Evenly arrange the first element of each element and place it at the starting point , End element placed at end */
justify-content: space-around; /* To arrange each element evenly, with the same space around each element */
justify-content: space-evenly; /* Arrange each element evenly, and the spacing between each element is equal */
justify-content: stretch; /* Arrange each element evenly 'auto'-sized Will be stretched to fit the size of the container */
 Copy code

align-self： Will align the current grid or flex In line The elements of

align-self: start;/* Vertical */
align-self: center;/* Vertical center */
align-self: end;/* Vertical */
 Copy code

align-items： On all direct child nodes align-self Value is set to a group . align-self Property sets the alignment of the item in its containing block in the direction of the cross axis . It's also start,center,end Three attributes . See the reference link for details ：align-items - CSS（ Cascading style sheets ） | MDN (mozilla.org)

Knowing the above properties, we can easily know how to realize the three-point boson

Ideas ：

First draw three points and the largest box
Use flex Layout , And use justify-content Allocate space for containers , full-justified space-between
Then center vertically in the second setting
The third point is set vertically

<!DOCTYPE html>
<html lang="en">
<head>
<title> Realize the three-point boson </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 code

11. Realize the fixed width of the box edge , Right box

1. Left set left float , Right box width=100% margin-left= The width of the box on the left

<!DOCTYPE html>
<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 code

2. The left box floats left , Right box right float , Set up width:calc(100%- Left box width )

<!DOCTYPE html>
<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 code

3. The parent container is flex Layout , The sub container on the left has a fixed width , The sub container on the right is set to flex:1

<!DOCTYPE html>
<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 code

12. absolute and relative According to what positioning ？

relative basis Self positioning
absolute Most basis Near one level positioning element （ There's a place ） location
fixed: according to viewport location
sticky

13. What are the implementations of center alignment ？

1. Horizontal center

inline/inline-block Elements ：text-align:center
block Elements ：margin：0,auto
absolute Elements ：left: 50% + margin-left Negative half the element width
absolute Elements ：left,right=0 + margin: 0 auto
absolut Elements : left:50% + transform: translate(-50%,0)
absolute Elements : Default parent element display:flex;justify-content:center;

2. Vertical center

inline Elements ：line-height The value is equal to the height value
absolute Elements ：top:50% + margin-top Negative half the element height
absolute Elements ：top,bottom=0 + margin auto 0;
absolute Elements :top,bottom=0 + margin:auto 0;
elastic flex: Default parent element display:flex; align-items: center;
Cell table-cell Elements ： Parent element display: table-cell; vertical-align:middle

14. line-height How to inherit

Write specific values , Such as 30px, Then inherit and change the value
Write the scale , Such as 2/1.5, Then inherit the proportion
Write percentage , Such as 200%, Then inherit the calculated value ( Examination site )

.father{
font-size:20px;
line-hight:200%;
}
.child{
/* ask child Of line-height How many? ?*/
}
 Copy code

obviously child Calculated based on the value of the parent element 20px * 200% = 40px

15. How to use CSS Realize single line and multi line text overflow processing

1. Single line text overflow

<!DOCTYPE html>
<html lang="en">
<head>
<title> Realize single line and multi line text overflow </title>
<style> .box{ width: 100px; white-space: nowrap;/* Don't change careers */ overflow: hidden;/* Beyond, hide */ text-overflow: ellipsis;/* If it exceeds, dot */ } </style>
</head>
<body>
<div class="box">
ukdkasldaskajhas83182903812iewsa213sjansn
</div>
</body>
</html>
 Copy code

2. Multi line text overflow

<!DOCTYPE html>
<html lang="en">
<head>
<title> Realize single line and multi line text overflow </title>
<style> .box{ width: 100px; display: -webkit-box;/* Display the object as an elastic expansion box model */ -webkit-box-orient: vertical;/* Arrange in turn direction */ -webkit-line-clamp:3;/* turn 3 That's ok */ overflow: hidden;/* Beyond, hide */ word-break: break-all;/* Coercive transformation */ } </style>
</head>
<body>
<div class="box">
ukdkasldaskajhas831829038238901237982199312iewsa213sjansn
</div>
</body>
</html>
 Copy code

16. How to eliminate the gap at the bottom of the picture

First, we need to know what a picture gap is

Turn the picture into a block element display:block

The parent element font-size:0

<!DOCTYPE html>
<html lang="en">
<head>
<title> Eliminate the gap between the bottom lines of the picture </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 code

There are two other ways. First, when the picture is large , One above and one below , Not one by one

Align the bottom line of the picture ：img{vertical-align:bottom;}
The height is small enough - Move the baseline position up ：.box{line-height: 0;}

17. What is responsive design ？ principle ？

A website can be compatible with multiple terminals , Instead of making a specific version for each terminal

The basic principle is to detect the screen size of different devices through media query .

The page header must have meta Statement viewport

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

18. rem What is it and px,em,rem The difference between ？

px Pixels . Absolute units , Pixels px It is equivalent to the resolution of the display screen
em, Relative length unit , Relative to the parent element , Not commonly used

font-size Is the font size of the parent element ,
and width and height Is the font size relative to itself
 Copy code

rem, Relative to the root element html Font size of , Often used in responsive layouts

font-size、width and height Always relative to the root font size
 Copy code

19. Common solutions for responsive layout ？

media-query, Set the root element according to different screens font-size
rem, Based on the relative unit of the root element

<!DOCTYPE html>
<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 a bigger size */ html{ font-size: 110px; } } body{ font-size: 0.16rem; } #div1{ width: 1rem; height: 1rem; background: rgb(211, 211, 211); } </style>
</head>
<body>
<div id="div1">
this is div
</div>
</body>
</html>
 Copy code

20. transition and animation What's the difference ？

transition: Used for transition effects , No frame concept , Only start and end states , Low performance overhead
animate： For animation , There is the concept of frame , It can be triggered repeatedly and has an intermediate state , High performance overhead , Active trigger

21. will-change attribute （CSS3 New characteristics ）

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 will disappear completely on the page , Elements do not occupy space and cannot be clicked ;
inheritance : The parent element sets display:none No matter how the child element is set, it cannot be displayed
performance : Will cause the browser Redraw and rearrange , High performance consumption

opacity: 0;

Structurally : The element disappears on the page , Elements occupy space You can click on the ;
inheritance : The parent element sets opacity:0 No matter how the child element is set, it cannot be displayed ;
performance : Rebuild layer , Low performance consumption

visibility:hidden;

Structurally : The element disappears on the page , The space it occupies will remain ; Unable to click
inheritance :visibility: hidden Will be inherited by child elements , But child elements can be set by visibility: visible; To unhide .
performance : It will only cause the browser Repaint , The performance consumption is relatively small

Set up height,width The properties of the ISOBOX model are 0

Elemental margin,border,padding,height and width The properties of the influence element box model are set to 0
If there is a child element or content within an element , It should also be set to overflow:hidden To hide its children

23. Selector priority

! important> Inline style >id Selectors > Class selectors > tag chooser > wildcard > Inherit

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

The first One individual 0 The corresponding is important The number of ,

The first Two individual 0 The corresponding is id Selectors The number of ,

The first 3、 ... and individual 0 Corresponding Class selectors The number of ,

The first Four individual 0 The corresponding is tag chooser The number of ,

Together, it is the weight of the current selector .

Compare : Let's start with the first one 0 Start comparing , If the first one 0 Big , Then it means that the weight of this selector is high , If the first one is the same , Compare the second , By analogy .

'nth-child" Select the child element of the parent element , This child element does not specify the exact type , The effect can be achieved only when two conditions are met at the same time

The first is Subelement , The second is the sub element Just in that position

"nth-of-type" The choice is The child element of a parent element , And this 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>// Here is red
<li>2</li>
</ul>
<body>
 Copy code

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

CSS Sprite Sprite chart Integrate a bunch of small pictures into a big picture

optimal ：

Good to reduce web requests , Greatly improve the performance of the page ;
Reduce picture bytes ;
Solve the web designer's problem in image naming ;
Easy to change style , Convenient maintenance .

inferior ：

Enough space shall be reserved for picture merging , Wide screen 、 The background is easy to break under the high-resolution screen ;
Development is more troublesome , Measurement is cumbersome ;（ You can use the style composer )
Maintenance trouble , A few changes to the background may affect the whole picture , Make the bytes increase and change css.

25. What do you mean CSS Hack？

Solve the problem of each browser css Explain the different measures taken , difference Different browsers Make Different CSS style The setting of is called CSs Hack.

26. Introduce the understanding of the browser kernel

The browser kernel is divided into two parts : Rendering engine and JS engine .

Rendering engine : Convert the code into a page and output it to the browser interface .

JS engine : Parsing and execution javascript To achieve the dynamic effect of the web .

Starting with the rendering engine and Js Engines are not clearly distinguished , later Js The engine is becoming more and more unique , The kernel tends to refer only to the rendering engine .

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

Progressive enhancement （ From the top down ）: Build a page for a lower version browser , Guarantee the most basic functions , And then for the advanced browser effect 、 Interactive and other improved and additional functions , Achieve a better user experience .

graceful degradation （ From bottom to top ）: Build full functionality from the beginning , Then it is compatible with lower versions of browsers .

30. The difference between redrawing and rearranging

rearrangement ： When a part of the rendering tree has to be updated and the size of the nodes has changed , Browsers invalidate the affected parts of the rendering tree , And reconstruct the rendering tree . In short , happen Geometric information changes Cause page layout changes .

Repaint ： It's browser behavior triggered when the appearance of an element is changed , The browser redraws the element based on its new attributes , Give the element a new look . That is to say Changes in non geometric information Cause page layout changes , For example, change the of an element Background color 、 Text color 、 Border color wait

Trigger a rearrangement operation

add to 、 Delete visible dom
The position of the elements changes
The size of the element changes ( Margin 、 padding 、 The thickness of the border 、 Wide and high 、 Geometric properties )
Page rendering initialization
Browser window size changed
Get some properties . When getting some properties , The browser also triggers a rearrangement to get the correct value , It causes the queue to refresh . therefore , These values should be cached when used multiple times .

Some properties that cause 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)`

Cause redrawing

The following styles will 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

~ Ongoing update