本篇内容介绍了“CSS长度单位em怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
本篇内容介绍了“CSS长度单位em怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
一、为什么使用em
em也是css中的一种单位，和px类似。很多人会疑惑为什么有了px之后还要使用em，而且em使用起来相对于px来讲比较麻烦。
em主要是应用于弹性布局，下面给出一个小栗子说明em的强大之处
<!DOCTYPEhtml><htmllang="en"><head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metaHttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.top{
height:80px;
background-color:black;
}
.main{
width:960px;
background-color:#ccc;
margin:0auto;
overflow:hidden;
}
.left{
width:30%;
height:100%;
background-color:aqua;
border:1pxsolidred;
float:left;
font-size:16px;
line-height:18px;
}
.right{
width:60%;
height:100%;
font-size:1em;
line-height:1.125em;
background-color:deeppink;
border:1pxsolidred;
float:right;
}
</style></head><body>
<pclass="top"></p>
<pclass="main">
<pclass="left">
<ul>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
<li>em测试用例，没有em的情况</li>
</ul>
</p>
<pclass="right">
<ul>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
<li>em测试用例有em的强大之处</li>
</ul>
</p>
</p></body></html>
这里模仿了一个网页的大致布局，给出使用em和px的区别。
“CSS长度单位em怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
--结束END--
本文标题: CSS长度单位em怎么使用
本文链接: https://lsjlt.com/news/93143.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0