【发布时间】：2021-08-11 23:38:54
【问题描述】：
/* CSS Document */
body {
/* background-color:#81C9AC; */
background-image:url(http://store6.up-00.com/2017-02/148773426400995.jpg);
background-repeat: no-repeat;
background-size:cover;
width:100%;
height:100%;
}
.theVeryTop5{
height: 15%;
width: 68.5%;
background-color:white;
opacity: 0.15;
left: 31.5%;
top: 4%;
}
#cands{
height: 5%;
width: 10%;
background-color:58B48F;
border: 2px solid #E8E8E8;
border-radius: 30%;
font-family:BankGothic Lt BT;
color:#FFFFFF;
font-size:2vw;
text-align: center;
}
.service{
left: 80%;
top: 5.5%;
}
.contact{
left: 80%;
top: 12.5%;
}
.testimonials{
height: 5.5%;
width: 18%;
background-color:#161412;
opacity: 0.95;
font-family:BankGothic Lt BT;
font-size:2vw;
text-align: center;
color:#FFFFFF;
left: 31.5%;
top: 19%;
}
.about{
font-family:BankGothic Lt BT;
color:white;
font-size:3vw;
left: 9.5%;
top: 40%;
text-align: justify;
}
.about2{
height: 40%;
width: 25%;
font-family:Century Gothic, sans-serif;
color:white;
font-size:1.2vw;
text-align: center;
left: 3%;
top: 50%;
}
div {
/*border-radius: 5px;*/
/*border: 2px solid black;*/
position: absolute;
}
.header {
height: 100%;
width: 31.50%;
background-color:#161412;
opacity: 0.95;
border: 1px solid #black;
left: 0%;
top: 0%;
}
.piano {
height:10%;
width:35%;
left: 50%;
top: 70%;
position: absolute;
}
.we{
height:35%;
width:16%;
left: 7%;
top: 5%;
position: absolute;
border-radius: 50%;
}
#social{
height: 5.5%;
width: 3%;
border-radius: 50%;
position: absolute;
}
.fbcircular{
left: 92.25%;
top: 24%;
}
.pcircular{
left: 92.25%;
top: 31%;
}
.ycircular{
left: 92.25%;
top: 38%;
}
label {
font-family: BankGothic Lt BT;
}
.bla{
font-family:Edwardian Script ITC;
color:#FFFFFF;
font-size:8vw;
text-align: center;
left: 50%;
top: 45%;
}
.Service{
font-family:DejaVu Sans Light;
color:#FFFFFF;
font-size:2vw;
text-align: center;
left: 70%;
top: 61%;
}
.call{
font-family:BankGothic Lt BT;
color:#FFFFFF;
font-size:2vw;
text-align: center;
left: 58%;
top: 85%;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- https://www.youtube.com/watch?v=0kX1wB8qil4 javascript-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="pianostyle.css"/>
<title>Untitled Document</title>
<style type="text/css">
<!--
.style2 {color: #E08249}
-->
</style>
</head>
<body>
<div class="header"\> </div>
<img src="http://store6.up-00.com/2017-02/148773426418566.png" class="we" />
<div class="about"> About </div>
<div class="about2"> Hello my name is <span class="style2">Bla Bla</span>. I'm a blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla . <br/>
</br>
Distinguished blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla </div>
<div class="theVeryTop5"></div>
<div id="cands" class="service"> services </div>
<div id="cands" class="contact"> contact </div>
<div class="testimonials"> "testimonials"</div>
<img id="social" class="fbcircular" src="http://store6.up-00.com/2017-02/148773426378573.jpg" alt="facebook" />
<img id="social" class="pcircular" src="http://store6.up-00.com/2017-02/14877342636672.png" />
<img id="social" class="ycircular"src="http://store6.up-00.com/2017-02/148773426391924.png" alt="yelp" />
<img class="piano" src="http://store6.up-00.com/2017-02/1487734263541.jpg" alt="piano image" />
<div class="bla">
Blaaa Blaaa
</div>
<div class="Service">
whatever service
</div>
<div class="call"> 000-0000-0000 </div>
</body>
</html>everything is in the place I want
你好， 这是我在这里的第一篇文章。
我一直在使用：position:absolute;和百分比。 "我不知道我还能如何控制元素的位置和大小"
它对我有用，我可以把很多东西放在我想要的地方。 但我想知道，如果它是正确的方式？
=============================================== ===========
我可以在字体大小中使用百分比吗？因此，当屏幕尺寸发生变化时，它会保持固定不变。
【问题讨论】：
标签： css position css-position