当前位置:网站首页>Summary of front-end interview questions (C, s, s) that front-end engineers need to understand (2)
Summary of front-end interview questions (C, s, s) that front-end engineers need to understand (2)
2020-11-06 20:48:00 【Tell me Zhan to hide】
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>
版权声明
本文为[Tell me Zhan to hide]所创,转载请带上原文链接,感谢
边栏推荐
- JNI-Thread中start方法的呼叫與run方法的回撥分析
- Staying up late summarizes the key points of report automation, data visualization and mining, which is different from what you think
- It's time for your financial report to change to a more advanced style -- financial analysis cockpit
- MongoDB与SQL常用语法对应表
- 游戏开发中的新手引导与事件管理系统
- What if the front end doesn't use spa? - Hacker News
- 嘉宾专访|2020 PostgreSQL亚洲大会阿里云数据库专场:曾文旌
- What are Devops
- 事务的本质和死锁的原理
- image operating system windows cannot be used on this platform
猜你喜欢
ES6 learning notes (4): easy to understand the new grammar of ES6
JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
GitHub: the foundation of the front end
GUI engine evaluation index
From overseas to China, rancher wants to do research on container cloud market
How to play sortable JS vuedraggable to realize nested drag function of forms
Contract trading system development | construction of smart contract trading platform
IPFs rudder filecoin landing at the same time, fil currency price broke a thousand
只有1个字节的文件实际占用多少磁盘空间
给字节的学姐讲如何准备“系统设计面试”
随机推荐
给字节的学姐讲如何准备“系统设计面试”
Analysis of serilog source code -- how to use it
Xmppmini project details: step by step from the principle of practical XMPP technology development 4. String decoding secrets and message package
In depth to uncover the bottom layer of garbage collection, this time let you understand her thoroughly
面试官: ShardingSphere 学一下吧
DRF JWT authentication module and self customization
es创建新的索引库并拷贝旧的索引库 实践亲测有效!
【自学unity2d传奇游戏开发】地图编辑器
(2) ASP.NET Core3.1 Ocelot routing
Top 5 Chinese cloud manufacturers in 2018: Alibaba cloud, Tencent cloud, AWS, telecom, Unicom
小游戏云开发入门
Helping financial technology innovation and development, atfx is at the forefront of the industry
Unity性能优化整理
Ronglian completed US $125 million f round financing
Even liver three all night, jvm77 high frequency interview questions detailed analysis, this?
Flink's datasource Trilogy 2: built in connector
electron 實現檔案下載管理器
游戏主题音乐对游戏的作用
ado.net和asp.net的关系
Network programming NiO: Bio and NiO