e媒网络

一切皆可能 e媒网络 http://www.eMay.net

博客园 首页 新随笔 联系 订阅 管理

demo-1:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>满屏等比例缩放测试</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
html, body, #container {
	width: 100%;
	height: 100%;
}
#container {
	background-color: #CCC;
	position:relative;
}
#incontainer {
	background-color: blue;
	position:absolute;
	width: 90%;
	height: 90%;
	top:5%;
	left:5%;
}
#inincontainer {
	background-color: red;
	position:absolute;
	width: 90%;
	height: 90%;
	top:5%;
	left:5%;
}
</style>
</head>
<body>
<div id="container">
  <div id="incontainer">
  <div id="inincontainer">
   </div>
   </div>
</div>
</body>
</html>

 demo-2:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>满屏等比例缩放测试</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
html, body, #container {
	width: 100%;
	height: 100%;
}
#container {
	background-color: #grey;
	
}
#incontainer {
	position:relative;
	width: 90%;
	height: 90%;
	margin-left:5%;
	/*margin-right:5%;*/
	top:5%;
	background-color: blue;
}
#inincontainer {
	position:relative;
	width: 90%;
	height: 90%;
	margin-left:5%;
	/*margin-right:5%;*/
	top:5%;
	background-color: pink;
}
</style>
</head>
<body>
<div id="container">
  <div id="incontainer">
  <div id="inincontainer">
   </div>
   </div>
</div>
</body>
</html>

 demo-3:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>满屏等比例缩放测试</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
html, body, #container {
	width: 100%;
	height: 100%;
}
#container {
	background-color: #grey;
	
}
#incontainer {
	position:relative;
	width: 90%;
	height: 90%;
	margin-left:5%;
	top:5%;
	background-color: blue;
}
#inincontainer {
	position:relative;
	width: 30%;
	height: 30%;
	left:50%;
	top:50%;
	background-color: pink;
}
</style>
</head>
<body>
<div id="container">
  <div id="incontainer">
  <div id="inincontainer">
   </div>
   </div>
</div>
</body>
</html>

 demo-4:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>满屏等比例缩放测试</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
html, body, #container {
	width: 100%;
	height: 100%;
}
#container {
	background-color: #grey;	
}
#incontainer {
	padding:3.12% 5% 3.12% 5%;
	width: 90%;
	height: 90%;
	background-color: blue;
}
#inincontainer {
    padding:3.12% 5% 3.12% 5%;
	width: 90%;
	height: 90%;
	background-color: pink;
}
</style>
</head>
<body>
<div id="container">
  <div id="incontainer">
  <div id="inincontainer">
   </div>
   </div>
</div>
</body>
</html>

 小结:

1.border宽度使用百分比,没有效果,故不要使用.

2.padding-top,padding-bottom 使用百分比,以父盒子宽度为基准,所以为了达到满屏,数值需要修订.比如上述的padding值得3.12是一个修订值.

posted on 2019-04-05 12:43  e媒网络技术团队  阅读(217)  评论(0编辑  收藏  举报