HTML05流式布局
2020-07-25 本文已影响0人
Amanda妍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>流式布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html, body{
width: 100%;
height: 100%;
}
.one{
width: 80%;
height: 50%;
margin: 0 auto;
background-color: salmon;
overflow: hidden;
}
.two{
width: 50%;
height: 30%;
background-color: orange;
margin-left: 25%;
margin-top: 25%;
padding-right: 10%;
/*padding-left: 10%;*/
}
</style>
</head>
<body>
<!--流式布局的关键点 也叫做百分比布局
1、宽高可以设置百分比 参考的是父级的宽度和高度
2、padding和margin设置百分比 参考的都是父级的宽度
3、注意 ：被参考的父级标签 父级一定要有确定的宽高
-->
<div class="one">
<div class="two">
</div>
</div>
</body>
</html>
