您的位置：首页 > Web前端 > CSS

CSS(十二) 宽度布局实践

2017-10-08 16:32 183 查看

CSS定位 固定宽度布局-绝对定位法

需要对父标签进行设定，包括高度，还要对自己的宽度高度进行设置，因为他们都已经脱离了标准流

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位法</title>
<style type="text/css">
body{
text-align: center;
}

#head,#container,#content,#side,#foot{
margin:20px auto 20px auto;
padding:20px 0px 20px 0px;
border: 1px solid red;
}

#head,#container,#foot{
width: 900px;
}

#container{
position: relative;
height: 250px;
}

#content{
position: absolute;
width: 700px;
height: 20
4000
0px;
}

#side{
margin-left: 750px;
height: 100px;
}
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
<div id="content">content</div>
<div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
</html>




CSS定位 固定宽度布局-相对定位法

需要将原来定位的删除，然后进行左右浮动，并且清楚掉尾部的两边浮动，再重新设置模块的高度和宽度即可

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动法</title>
<style type="text/css">
body{
text-align: center;
}

#head,#container,#content,#side,#foot{
margin:20px auto 20px auto;
padding:20px 0px 20px 0px;
border: 1px solid red;
}

#head,#container,#foot{
width: 900px;
}

#container{
border:0px;
}

#content{
float:left;
width: 700px;
height: 200px;
}

#side{
float:right;
width: 180px;
margin-left: 10px;
height: 100px;
}

#foot{
clear: both;
}
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
<div id="content">content</div>
<div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
</html>




CSS定位 可变宽度布局-相对定位法

前面的方法，不能随着浏览器窗口的放大或者缩小而改变，所以，我们可以把如图所示的几个宽度的具体数值变成占这个窗口的百分比进行设定，此时页面就可以根据浏览器进行缩放了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航