当前位置:网站首页>前端工程师需要懂的前端面试题(c s s方面)总结(二)
前端工程师需要懂的前端面试题(c s s方面)总结(二)
2020-11-06 20:48:00 【叫我詹躲躲】
实现元素水平垂直居中的几种方法:
<div id="wrap">
<div class="box"></div>
</div>
1. 定位方法实现水平垂直居中
<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>
定位和transform方法实现元素水平垂直居中
<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. 最新版本的flex实现元素的水平垂直居中
<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. 使用老版本flex实现元素水平垂直居中
<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>
用纯css创建一个三角形
主要是把高度和宽度设置成为0,用边框来实现三角形效果
html代码:
<div id="box">
</div>
css代码:
<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>
![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1ODc1MTMxNDUyNTItYTIzMjk5ZDUtMzVjOC00ZmJkLTk3NmEtNDY3ODVhMzA4MDZmLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=247&margin=[object Object]&name=image.png&originHeight=494&originWidth=542&size=13252&status=done&style=none&width=271)
由上图效果可以根据自己需要三角形类型改成相应边框的颜色,不需要的边框设置成transparent
如例子:左边和上边的边框设置成红色
#box {
width: 0px;
height: 0px;
border: 100px solid ;
border-top-color: red;
border-right-color: transparent;
border-left-color: red;
border-bottom-color:transparent ;
}
![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1ODc1MTM0NDYwMzctZjE2Mzg4YWItMmJiNC00YjdkLTliN2UtYWI1YzEyYTA0OTRkLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=219&margin=[object Object]&name=image.png&originHeight=438&originWidth=506&size=10239&status=done&style=none&width=253)
如何实现移动端rem适配
html根元素的字体大小设置屏幕区域的宽
<div id="box">
</div>
<style> *{
margin: 0;
padding: 0;
}
#box {
width: 1rem;
height: 1rem;
background: red;
}
</style>
<script type="text/javascript"> window.onload = function () {
// 获取屏幕区域宽度
var width=document.documentElement.clientWidth
// 获取html
var htmlNode = document.querySelector('html')
// 设置字体大小
htmlNode.style.fontSize= width + 'px'
}
</script>
版权声明
本文为[叫我詹躲躲]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/3995971/blog/4558927
边栏推荐
- The practice of the architecture of Internet public opinion system
- How to encapsulate distributed locks more elegantly
- In depth understanding of the construction of Intelligent Recommendation System
- How long does it take you to work out an object-oriented programming interview question from Ali school?
- What is the difference between data scientists and machine learning engineers? - kdnuggets
- CCR炒币机器人:“比特币”数字货币的大佬,你不得不了解的知识
- 嘗試從零開始構建我的商城 (二) :使用JWT保護我們的資訊保安,完善Swagger配置
- A debate on whether flv should support hevc
- 钻石标准--Diamond Standard
- 一篇文章带你了解CSS对齐方式
猜你喜欢
教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化
一篇文章带你了解CSS 分页实例
Linked blocking Queue Analysis of blocking queue
大数据应用的重要性体现在方方面面
前端基础牢记的一些操作-Github仓库管理
一篇文章带你了解CSS 渐变知识
人工智能学什么课程?它将替代人类工作?
Grouping operation aligned with specified datum
CCR炒币机器人:“比特币”数字货币的大佬,你不得不了解的知识
[JMeter] two ways to realize interface Association: regular representation extractor and JSON extractor
随机推荐
Let the front-end siege division develop independently from the back-end: Mock.js
What problems can clean architecture solve? - jbogard
钻石标准--Diamond Standard
How long does it take you to work out an object-oriented programming interview question from Ali school?
全球疫情加速互联网企业转型,区块链会是解药吗?
Flink on paasta: yelp's new stream processing platform running on kubernetes
Every day we say we need to do performance optimization. What are we optimizing?
Can't be asked again! Reentrantlock source code, drawing a look together!
前端基础牢记的一些操作-Github仓库管理
DevOps是什么
Computer TCP / IP interview 10 even asked, how many can you withstand?
Troubleshooting and summary of JVM Metaspace memory overflow
Grouping operation aligned with specified datum
htmlcss
Face to face Manual Chapter 16: explanation and implementation of fair lock of code peasant association lock and reentrantlock
Vue 3 responsive Foundation
Save the file directly to Google drive and download it back ten times faster
(2)ASP.NET Core3.1 Ocelot路由
Summary of common algorithms of binary tree
What is the side effect free method? How to name it? - Mario