30 HTML + CSS interview questions (~ continuously updated)

kang 2021-09-15 09:45:20

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

  1. First, we need to set the width to 0
  2. Secondly, we can set the border
  3. 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
  4. 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 

image-20210907092226433.png

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 

image-20210907091642115.png

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 

image-20210907092942887.png

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

image-20210907094330740.png

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

image-20210907100522616.png

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

  1. Turn on BFC Elements of are not overwritten by floating elements
  2. Turn on BFC The parent-child margins of elements are not merged
  3. 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 :

  1. First draw three points and the largest box
  2. Use flex Layout , And use justify-content Allocate space for containers , full-justified space-between
  3. Then center vertically in the second setting
  4. 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

image-20210909090611369.png

  • Turn the picture into a block element display:block

image-20210909090928001.png

  • 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 

image-20210909091431776.png

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;
  1. Structurally : Elements will disappear completely on the page , Elements do not occupy space and cannot be clicked ;

  2. inheritance : The parent element sets display:none No matter how the child element is set, it cannot be displayed

  3. performance : Will cause the browser Redraw and rearrange , High performance consumption

  • opacity: 0;
  1. Structurally : The element disappears on the page , Elements occupy space You can click on the ;

  2. inheritance : The parent element sets opacity:0 No matter how the child element is set, it cannot be displayed ;

  3. performance : Rebuild layer , Low performance consumption

  • visibility:hidden;
  1. Structurally : The element disappears on the page , The space it occupies will remain ; Unable to click

  2. inheritance :visibility: hidden Will be inherited by child elements , But child elements can be set by visibility: visible; To unhide .

  3. 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
  1. Elemental margin,border,padding,height and width The properties of the influence element box model are set to 0

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

  1. Good to reduce web requests , Greatly improve the performance of the page ;

  2. Reduce picture bytes ;

  3. Solve the web designer's problem in image naming ;

  4. Easy to change style , Convenient maintenance .

inferior :

  1. Enough space shall be reserved for picture merging , Wide screen 、 The background is easy to break under the high-resolution screen ;

  2. Development is more troublesome , Measurement is cumbersome ;( You can use the style composer )

  3. 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
  1. add to 、 Delete visible dom

  2. The position of the elements changes

  3. The size of the element changes ( Margin 、 padding 、 The thickness of the border 、 Wide and high 、 Geometric properties )

  4. Page rendering initialization

  5. Browser window size changed

  6. 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

Please bring the original link to reprint ,thank
Similar articles

2021-09-15