网页的流式布局

来源:互联网 发布:传智播客python就业班 编辑:程序博客网 时间:2024/05/14 06:38

网页的流式布局简单来讲就是网页能够随着浏览器视口大小缩放,这要求在设置元素宽高时多使用百分比.

<!-- 当盒子的宽度是百分比来指定时,很多情况下要设置min-width和maxWidth IE7+兼容-->




<!doctype = html>
<html>
<head>
<meta charset="UTF-8"/>
<style type = "text/css">
div{
width: 80%;
height:200px;
border:3px solid black;
background:red ;
margin:0 auto;
max-width:800px;
min-width:400px;
box-sizing:boder-box;

<!-- 规定盒子的宽度为边框的宽度,这样设置border后不会影响整体宽度 -->
}


</style>
<title>流式布局</title>
</head>
<body>
<div>版心</div>
</body>
</html>

0 0
原创粉丝点击