[2022 front-end interview] CSS handwritten interview questions summary (step up collection)

Updated: March 3, 2022

Write the answer together, but I hope everyone thinks about it before reading it. If you have a good suggestion, please correct it!

This article is dedicated to building a front-end interview question bank, and brothers are welcome to contribute!

outline

No key points are all key points!

CSS Handwritten Interview Questions

layout

1. Realization of two-column layout

Topic analysis : The general two-column layout refers to the fixed width of the left column and the adaptive width of the right column .

float layout

method one:

Assuming that the fixed width on the left is 100px, set the width on the left to 100px, and add left floating; set the width on the right to auto, and use margin-left to leave 100px, that is, set margin-left to 100px.

the code

.left {
    
    
  float: left;
  width: 100px;
	height: 100px;
  background: red;
}
.right {
    
    
  margin-left: 100px;
	height: 100px;
  width: auto;
  background: blue;
}

Effect

Method Two:

The above method takes advantage of margin-left to misplace the floating elements, resulting in visually normal.

This time, BFC can be used to solve the floating problem.

Assuming that the fixed width on the left side is 100px, set the width on the left side to 100px, and add left floating; set the element on the right side to overflow: hidden; in this way, the BFC is triggered on the right side, and the area of the BFC will not overlap with the floating element, so both sides are No overlap will occur.

the code

.left {
    
    
  float: left;
  width: 100px;
	height: 100px;
  background: red;
}
.right {
    
    
	height: 100px;
  overflow: hidden;
  background: blue;
}

Effect

Flex layout

Now the most popular is to use flex layout.

You need to add a parent element to the two child elements, set display: flex on the parent element, set the left element to a fixed width such as 100px, and set the right element to flex:1.

Change the color for distinction

the code

.father {
    
    
  display: flex;
  height: 100px;
}
.left {
    
    
  width: 100px;
  background: blue;
}
.right {
    
    
  flex: 1;
  background: yellow;
}

Effect

position

method one:

Using absolute positioning, set the parent element to relative positioning. The left element is set to absolute positioning, and the width is set to 100px, then the left element will be fixed to the left. Set the margin-left value of the right element to 100px.

the code

.father {
    
    
  position: relative;
  height: 100px;
}
.left {
    
    
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}
.right {
    
    
  margin-left: 100px;
	height: 100px;
  background: black;
}

Effect

Method Two:

Using absolute positioning, set the parent element to relative positioning. Set the width of the left element to 100px. This time, set the right element to absolute positioning to free up the occupied space on the left.

.father {
    
    
  position: relative;
  height: 100px;
}
.left {
    
    
  width: 100px;
	height:100px;
  background: yellow;
}
.right {
    
    
  position: absolute;
	height:100px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100px;
  background: red;
}

Effect

2. Realization of three-column layout

Topic Analysis : Three-column layout generally refers to a page with three columns in total, the left and right columns have fixed widths, and the middle adaptive layout

position

Using absolute positioning , set the left and right columns as absolute positioning, and set the value of the margin corresponding to the direction in the middle.

the code

.father {
    
    
  position: relative;
  height: 100px;
}

.left {
    
    
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
}

.right {
    
    
  position: absolute;
  right: 0;
	top: 0;
  width: 100px;
  height: 100px;
  background: blue;
}

.center {
    
    
  margin-left: 100px;
  margin-right: 100px;
  height: 100px;
  background: lightgreen;
}

Effect

Flex layout

Using the flex layout, the left and right columns are set to a fixed size, and the middle column is set to flex:1.

the code

.father {
    
    
  display: flex;
  height: 100px;
}

.left {
    
    
  width: 100px;
  background: blue;
}

.right {
    
    
  width: 100px;
  background: red;
}

.center {
    
    
  flex: 1;
  background: lightgreen;
}

Effect

float layout

Using floating, set the fixed size of the left and right columns, and set the floating in the corresponding direction. The middle column sets the margin values in the left and right directions.

Note that in this way, the dom in the middle column must be placed at the end. Set float first!

the code

.father {
    
    
  height: 100px;
}

.left {
    
    
  float: left;
  width: 100px;
  height: 100px;
  background: yellow;
}

.right {
    
    
  float: right;
  width: 100px;
  height: 100px;
  background: gold;
}

.center {
    
    
  height: 100px;
  margin-left: 100px;
  margin-right: 100px;
  background: blue;
}

Effect

holy grail layout

This is achieved using floats and negative margins.

To be honest, it's a bit convoluted

The parent element sets the left and right padding, the three columns are all set to float to the left, the middle column is placed at the front, and the width is set to the width of the parent element, so the latter two columns are squeezed to the next row. Move to the previous line, and then use relative positioning to position to both sides.

the code

.father {
    
    
  height: 100px;
	padding-left: 100px;
	padding-right: 100px;
}

.left {
    
    
  float: left;
	margin-left: -100%;
	position: relative;
	left: -100px;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
    
    
	position: relative;
	right: -100px;
  float: left;
	margin-left: -100px;
  width: 100px;
  height: 100px;
  background: gold;
}

.center {
    
    
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

Effect

Double wing layout

Double-flying wing layout. Compared with the holy grail layout, the double-flying wing layout is realized by the margin value of the middle column, not by the padding of the parent element.

Note that you need to wrap a layer around the center element so that you can use margin to reserve a place.

the code

.father {
    
    
  height: 100px;
}

.left {
    
    
  float: left;
  margin-left: -100%;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
    
    
  float: left;
  margin-left: -100px;
  width: 100px;
  height: 100px;
  background: gold;
}

.wrapper {
    
    
  float: left;
  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
    
    
  margin-left: 100px;
  margin-right: 100px;
  height: 100px;
}

Effect

3. Realization of horizontal and vertical centering

absolute positioning

method one

Using absolute positioning, first position the upper left corner of the element to the center of the page through top:50% and left:50%, and then adjust the center point of the element to the center of the page through translate.

the code

.parent {
    
        
	position: relative;
	width: 400px;
	height: 400px;
	background: red;
} 
	
.child {
    
        
	position: absolute;   
	background: lightgreen;
	width: 100px;
	height: 100px;
	left: 50%;    
	top: 50%;    
	transform: translate(-50%,-50%);
}

Effect

Method Two

Using absolute positioning, set the values of the four directions to 0, and set the margin to auto. Since the width and height are fixed, the corresponding direction is bisected, and the centering in the horizontal and vertical directions can be achieved.

This method is suitable for cases where the box has width and height

the code

.parent {
    
    
  position: relative;
	width: 400px;
	height: 400px;
	background: yellow;
}
 
.child {
    
    
  position: absolute;
	width: 100px;
	height: 100px;
	background: red;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Effect

method three

This method is suitable for cases where the width and height of the box are known

the code

.parent {
    
    
  position: relative;
	width: 400px;
	height: 400px;
	background: red;
}
 
.child {
    
    
  position: absolute;
	width: 100px;
	height: 100px;
	background: yellow;
    top: 50%;
    left: 50%;
    margin-top: -50px;     
    margin-left: -50px;
}

Effect

Flex layout

Using flex layout, set the vertical and horizontal center alignment of the container through align-items:center and justify-content:center, and its child elements can achieve vertical and horizontal centering.

the code

.parent {
    
    
  display: flex;
  justify-content:center;
  align-items:center;
	width: 400px;
	height: 400px;
	background: yellow;
}
 
.child {
    
    
	width: 100px;
	height: 100px;
	background: black;
}

Effect

draw graphics

Drawing graphics is definitely the most common CSS handwriting problem

1. Realize a triangle

An interesting phenomenon, set width and height to 0. Then set the border.

the code

div {
    
    
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orange blue red green;
}

Effect

Found that there are many triangles, in fact, these triangles are the border

Use border to draw a red triangle

div {
    
        
	width: 0;    
	height: 0;    
	border-bottom: 50px solid red;    
	border-right: 50px solid transparent;    
	border-left: 50px solid transparent;
}

Effect

2. Realize a sector

On the basis of drawing a triangle, add a rounded corner style, border-radius: 100%;

the code

div {
    
        
	width: 0;    
	height: 0;    
	border-bottom: 50px solid red;    
	border-right: 50px solid transparent;    
	border-left: 50px solid transparent;
	border-radius: 100%;
}

3. Realize a square with adaptive width and height

1. Use vw to achieve

the code

div {
    
    
  width: 10%;
  height: 10vw;
  background: black;
}

Effect

2. Use the margin/padding percentage of the element to be realized relative to the width of the parent element

the code

div {
    
    
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: red;
}

Effect

4. Realize a ladder

Use pseudo-elements to generate a rectangle

the code

.tab {
    
    
    width: 300px;
    height: 80px;
    position: relative;
    margin: 100px auto;
    font-size: 60px;
    text-align: center;
}
 
.tab::before {
    
    
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: red;
    transform: perspective(.5em) rotateX(5deg);
}

Effect

5. Draw a 0.5px line

Using transform: scale() , this method is used to define the 2D scaling transformation of the element:

transform: scale(0.5,0.5);

Using the meta viewport method

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

In this way, it can be scaled to 0.5 times of the original, and if it is 1px, it will become 0.5px. viewport is only for the mobile terminal, and the effect can only be seen on the mobile terminal

series of articles

Blog Description and Acknowledgments

Some of the information involved in the article comes from the Internet, which contains my own personal summary and opinions. The purpose of sharing is to build a community and strengthen myself.

If the referenced material is infringing, please contact me to delete it!

Thank you for your hard work , personal blog , GitHub learning , GitHub

Public account [Guizimo] , mini program [Zimoshuo]

If you feel that it is helpful to you, you might as well give me a thumbs up to encourage me, remember to collect good articles! Follow me and grow together!

The column it belongs to: front-end interview

Luckily I'm here, thanks for coming!