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