I am participating in the 2022 Spring Recruitment series – experience review, click here for more details.
How to understand HTML semantics
This question we mainly divided into two aspects of the answer: people and machines (search engines)
- For people: make code more readable and easier to maintain
- Machine friendly: Being more search engine friendly is good for SEO
Block-level elements and inline elements
What are the features of block-level elements and inline elements, and how do they convert to each other
2.1 Block-level elements
- Common block-level elements are div, P, h1, h2… Ul ol etc.
- Block-level elements occupy a single line and can declare their width and height
- Display: Block converts elements to block-level elements
2.2 Inline elements
- Common inline elements are span A input button
- Inline elements appear on a row, not a new line. You cannot declare width and height directly. To declare width and height requires converting the element to an inline or inline block element.
- Display: Inline converts an element to an inline element
2.3 Inline block elements
- Width and height can be declared without automatic line wrapping
- Display: Inline-block converts an element to an inline block element
3. Width calculation of box model
May I ask what is the offsetWidth of the following P label?
So this question is how do you calculate the value of offsetWidth
OffsetWidth = width+border+padding
So the answer to the above question is 222px
3.1 extensions
How do I make offsetWidth 200px?
Box-sizing :border-box
The box-sizing attribute defines how the total height and width of an element should be calculated, excluding margin. Its default value is content-box, the standard box model, which computes the padding and border of the element into the final drawn element’s total width or height. Border-box, IE box model, will include the padding and border of the element within the width or height of the element.
What is the difference between the IE box model and the standard box model? The answer is always the same.
Fourth, margin related
4.1 Margin longitudinal overlap
Look at the code below, what is the distance between div1 and div2
In the presence of longitudinal margin, overlap will occur, and the larger value is taken as the final longitudinal distance, rather than stacking.
4.2 Margin negative value
- When margin-right is negative, it does not move itself and the right element moves to the left by the corresponding game distance
- When margin-left is negative, the element itself moves the corresponding distance to the left
- When margin-bottom is negative, it will not move by itself, and the bottom side element will move up the corresponding game distance
- When margin-top is negative, the element itself moves up the corresponding distance
Five, the landing
What is a BFC, and how do you form a BFC? What problem does the BFC solve?
BFC,Block Format Context,Block level formatting Context. A separate rendering area is formed, and the rendering of internal elements does not affect elements outside the boundaries
Conditions for the formation of BFC
- Overflow is not visible
- Display is flex or inline-block, etc
- Position is absolute or fixed
- Float is not none
Problems solved by BFC
- Vertical margin collapse problem
- Float out of the document flow, the parent element height collapse problem
Grail layout and twin wings layout
Both of these layouts are used on the PC side, mainly for the two sides of the fixed, adaptive layout in the middle, the content in the middle is more important.
Margin/float/margin/margin/margin/float/margin/margin/margin
The following is a code implementation of both layouts
6.1 Layout of the Grail
The basic effect
Code implementation:
6.2 Dual-wing layout
The basic effect
Code implementation:
Write ClearFix by hand
This is a trivial question to examine, but let’s go through it here
The code is as follows:
Implement a three-point die with Flex
This question focuses on the use of flex layout and its related properties.
Implementation effect
The following code
Nine, horizontal and vertical center
This question examines the application of CSS, which can be implemented from both horizontal and vertical perspectives
9.1 Center the inline element horizontally
- Text-align :center
- Vertical center means that the value of line-height is equal to the value of height
9.2 The horizontal disposal of block elements is centered
Center the red area below horizontally and vertically
- The first margin:0 auto can achieve horizontal center
- The second absolute position +margin is negative, in which case the width and height must be given
This method must have the width and height of the element you want to center when used. Margin-left and margin-top values are minus half of the width and height respectively
- Margin :auto; In this case the width and height must be given
- The fourth is absolute positioning + Transform, which can deal with the situation of variable width and height
- The fifth is Flex, which can handle variable width and height situations
- The sixth is grid, which can handle variable width and height cases
Of course, there are many more in the middle, but that’s all you need to say in an interview.
10, Line-height inheritance problem
What is the line height of div?
The answer is 40 px
If the value of line height is a percentage, the result of the calculation is inherited. If the value of line height is a percentage, the result of the calculation is inherited. When the value of line-height is proportional, for example, line-height:1.5; , then its row height is 14*1.5 = 21px
Eleven, rem
Companies with mobile requirements will ask you if you have basic mobile development skills. What is REM, the difference between EM and PX, and how does responsive layout work
- Rem is a unit of relative length, set relative to the root element
- Em is also a unit of relative length, which is difficult to control and rarely used when relative to the font size within the current element
- Px is an absolute unit of length
The most common type of responsive layout is media-Query, which sets the font size of the root element based on the screen size, and then uses REM to implement a responsive layout.
However, REM has a disadvantage. The disadvantage of REM is that it has a ladder type. If there are many different sizes, it is necessary to set many different ranges from low to high.
In order to solve this problem, we can use VH/VW
- One hundredth of the height of the VH viewport
- Vw one hundredth of the width of the viewport
You can also use these two units to achieve a responsive layout.
12. Left fixed width and right adaptive layout
In fact, this layout is the same as the above layout question, but now this layout is more common in some document projects, such as vUE official documents, Vuepress documents and so on are used in this layout, we usually organize and plan our own website or project, can also use this layout.
There are six ways to implement this layout, divided into three non-strict modes and three strict modes.
Non-strict mode is when the left width changes, we also need to adjust other styles to get the right adaptive. In strict mode, we just change the width on the left, and the right will adapt. The first three are non-strict mode implementations, and the last three are strict mode implementations.
The HTML code
The first method: float+calc
Second method: inline-block+calc
Third way: Absolute position +padding
Fourth way: Flex
Fifth way: table
Sixth way: Grid
Clear float related
In the previous we have said floating and clear floating problems, here again take out to write again, because recently in sorting out the interview questions found that the frequency of this problem is quite high, so I plan to comb again here.
13.1 Why Do I Want to Clear floats
There are two main reasons
- Margin collapse in vertical direction
- Parent element height collapse problem after float child element leaves document flow
Just answer these two questions, mainly to solve these two questions. The same is true of the BFC. This question can also be answered in conjunction with the BFC.
13.2 What are the Methods for clearing floating information? And the pros and cons of each
- Parent element fixed width and height
Advantages: Simple, no compatibility issues
Disadvantages: Cannot be used when child element height is not fixed
- Add new elements
This is done by adding a meaningless tag, which then adds a CSS property that clears the float clear:both
Advantages: Simple, no compatibility issues
Disadvantages: code is not elegant, not conducive to later maintenance
- Using pseudo-elements
Advantages: CSS alone
Disadvantages: Compatibility issue, only support IE8 or non-IE browsers
- Triggers the parent element BFC
Advantages: Only using CSS, good compatibility
Cons: Some attributes affect other styles, such as Overflow: Hidden, which makes it easy to crop element content
What are the methods of CSS to improve page performance
- Short for property Settings
For example, to set the top, bottom, left and right margin of an element, you can simply write margin: 10px 12px 23px 34px;
The goal is to reduce the size of the package that ends up packing the code
- Let’s get rid of the units after 0
Margin: 0px 10px;
Margin: 0 10px;
The goal is also to reduce the size of the package that ends up packing the code
- Use CSS instead of images
For example, you can use CSS to draw triangles instead of arrows
The goal is to reduce HTTP requests
- Replace individual images with CSS Sprite images
The goal is to reduce HTTP requests and save bandwidth
conclusion
Actually, I have been in the use of learning method, the interview will go out to face every month a few times, the size of the interview experience too many, however, the investigation of the HTML/CSS related interview questions is not actually frequently, according to one hour of interview time, this part of the knowledge of the time is ten minutes, not more than 15 minutes, and investigation is also very difficult. Therefore, to sum up the fourteen interview questions, it should not be a problem to deal with the investigation of this part of knowledge, at least we have met too many beyond this scope, of course, there are, such as CSS3 animation and some new attributes, some companies also have investigation, but the frequency is not high. So I won’t repeat it. All the opinions above are my own.
Follow-up will also arrange JS junior senior interview questions collection, I hope we pay attention to progress together. This article brought you help, hope a thumbs up, thank you very much.
In addition, I will open an issue on Github every day to do an interview question. I hope like-minded friends can join in and share and learn together.
Making the address