<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*测试top百分比*/
.box {
background: #66e6ff;
position: absolute;
top: 0;
left: 0;
width: 1000px;
height: 500px;
/*padding: 100px;*/
}
.pox {
background: #f0f;
width: 30%;
position: absolute;
top: 10%;
right: 10%;
z-index: 99999;
}
/*测试margin百分比*/
.box1 {
margin: 600px 0;
background: #ccc;
border: 1px solid #ccc;
width: 1000px;
height: 500px;
}
.pox1 {
background: #f0f;
width: 30%;
height: 10%;
margin-top: 10%;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="box">
<div class="pox">
测试position的百分比：
position的left的百分比是根据父元素的宽度来取值的,如果父元素有paddding,则根据width+padding
position的top的百分比是根据父元素的高度来取值的,如果父元素有paddding,则根据height+padding
</div>
</div>
<div class="box1">
<div class="pox1">
测试margin的百分比：
margin的值是百分百的时候，其值是基于父元素的宽度来计算的，并非是自身的宽度，
padding 百分比的取值也是一样的,
width的高度百分比是按其父元素的宽度来计算的
height的高度百分比是按其父元素的高度来计算的
</div>
</div>
</body>
</html>
测试position和margin的百分比
猜你喜欢
转载自blog.csdn.net/qq_41111677/article/details/108267693
今日推荐
周排行