Summary of front-end interview questions (C, s, s) that front-end engineers need to understand (2)

5 Line code , Can let wechat small program on the shelf to their own APP in | Register and send it to Dajiang 、 Huawei 、 Cherry keyboard ！>>>

Several methods to realize the horizontal and vertical center of elements ：

<div id="wrap">
  <div class="box"></div>
</div>

1. Positioning method to achieve horizontal and vertical center

<style> *{
   
	margin: 0;
  padding: 0;
}
#wrap {
   
	width: 500px;
  height: 500px;
  background: grey;
  position: relative;
}
#wrap .box {
   
	width: 200px;
  height: 200px;
  background: pink;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
	margin: auto;
	position: absolute;
}
</style>

Positioning and transform Method to realize the horizontal and vertical center of elements

<style> *{
   
	margin: 0;
  padding: 0;
}
#wrap {
   
	width: 500px;
  height: 500px;
  background: grey;
  position: relative;
}
#wrap .box {
   
	width: 200px;
  height: 200px;
  background: pink;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
</style>

3. Latest version flex Achieve horizontal and vertical centering of elements

<style> *{
   
	margin: 0;
  padding: 0;
}
#wrap {
   
	width: 500px;
  height: 500px;
  background: grey;
  display: flex;
	justify-content: center;
	align-items: center;
}
#wrap .box {
   
	width: 200px;
  height: 200px;
  background: pink;
}
</style>

4. Use old version flex Realize the horizontal and vertical center of elements

<style> *{
   
	margin: 0;
  padding: 0;
}
#wrap {
   
	width: 500px;
  height: 500px;
  background: grey;
  display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
}
#wrap .box {
   
	width: 200px;
  height: 200px;
  background: pink;
}
</style>

In pure css Create a triangle

The main thing is to set the height and width to 0, Use borders to achieve triangle effect
html Code ：

<div id="box">
	</div>

css Code ：

<style> *{
   
	margin: 0;
  padding: 0;
}
#box {
   
	width: 0px;
	height: 0px;
	border: 100px solid ;
	border-top-color: red;
	border-right-color: blue;
	border-left-color: yellowgreen;
	border-bottom-color: deeppink;

}
</style>

From the above effect, you can change the triangle type to the corresponding border color according to your own needs , Unnecessary borders are set to transparent
As an example ： The left and top borders are set to red

#box {
   
	width: 0px;
	height: 0px;
	border: 100px solid ;
	border-top-color: red;
	border-right-color: transparent;
	border-left-color: red;
	border-bottom-color:transparent ;

}


How to realize mobile terminal rem adapter

html The font size of the root element sets the width of the screen area

<div id="box">
	</div>

<style> *{
   
	margin: 0;
  padding: 0;
}
#box {
   
	width: 1rem;
	height: 1rem;
background: red;

}
</style>

<script type="text/javascript"> window.onload = function () {
   
		//  Get screen area width 
		var width=document.documentElement.clientWidth

		//  obtain html
		var htmlNode = document.querySelector('html')

		//  Set font size 
		htmlNode.style.fontSize= width + 'px'
	}
</script>