<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百分比布局</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: #000000;
}
/*标准流,浮动:*/
/*width:表示相对于父盒子内容宽比值*/
/*height:表示相对于父盒子内容高比值*/
/*padding,margain:不管任何方向都是表示相对于父盒子内容宽比值*/
/*border:不能使用百分数*/
.box1{
/*父盒子使用px*/
width: 300px;
height: 400px;
padding: 50px;
border: 20px solid #000000;
}
.box1 p{
/*标准流和浮动*/
/*width:相对于父盒子内容宽比值*/
width: 50%;
/*height:表示相对于父盒子内容高比值*/
height: 20%;
/*padding,margain:不管任何方向都是表示相对于父盒子内容宽比值*/
padding: 10%;
margin: 10%;
background-color: red;
}
/*绝对定位:*/
/*width:表示相对于定位参考盒子(内容宽+padding)比值*/
/*height:表示相对于定位参考盒子(内容高+padding)比值*/
/*padding,margain:不管任何方向都是表示相对于定位参考盒子(内容宽+padding)比值*/
/*border:不能使用百分数*/
.box2{
/*父盒子使用px*/
width: 300px;
height: 400px;
padding: 50px;
border: 20px solid #000000;
position: relative;
}
.box2 p{
/*绝对定位*/
position: absolute;
left: 0;
top: 0;
/*width:表示相对于定位参考盒子(内容宽+padding)比值 (300+50*2)*50%=200px*/
width: 50%;
/*height:表示相对于定位参考盒子(内容高+padding)比值*/
height: 20%;
/*padding,margain:不管任何方向都是表示相对于定位参考盒子(内容宽+padding)比值*/
padding: 10%;
margin: 10%;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<p>son</p>
</div>
<div class="box2">
<p>son</p>
</div>
</body>
</html>
百分比布局
最新推荐文章于 2021-06-19 23:33:30 发布