您的位置：首页 > Web前端

[Web前端技术教学]网页布局-float及负margin技术的再认识-1

2016-12-06 10:41 806 查看

Demo-1:两个盒子左右浮动

XHTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页布局-float及负margin技术的再认识-1</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
.content {
float: left;
height: 400px;
width: 700px;
background-color: #999999;
}
.link {
background-color: #FF0000;
text-align: center;
float: right;
height: 400px;
width: 700px;
}
-->
</style>
</head>
<body>
<div class="content">content</div>
<div class="link">link</div>
</body>
</html>

效果图:

如果修改其中的XHTML代码如下:

<div class="link">link</div>
<div class="content">content</div>

效果如下:

规律小结:标准流的中的盒子左右浮动时,在XHTML代码中,靠前的盒子优先占有上行,靠后的盒子只能占有下行.当浏览器拉宽至1400时,变成一行.[b]如果浏览器宽度大于1400px,中间漏出空白区域,这是左右浮动的共性.[/b]

Demo-2:右面盒子采用左负margin

把上面的代码略微修改如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页布局-float及负margin技术的再认识-2</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
.content {
float: left;
height: 200px;
width: 700px;
background-color: #999999;
}
.link {
background-color: #FF0000;
text-align: center;
float: right;
height: 200px;
width: 700px;
margin-left: -650px;
}
-->
</style>
</head>
<body>
<div class="content">content</div>
<div class="link">link</div>
</body>
</html>

效果如下:

规律小结:link固定宽度覆盖到content.如果浏览器宽度变窄,content外漏的宽度小到700px-650px=50px时,link会换到下一行.

Demo-3:右面盒子采用右负margin

上述的.link选择器修改如下:

.link {
background-color: #FF0000;
text-align: center;
float: right;
height: 200px;
width: 700px;
margin-right: -650px;
}

最终效果:

规律小结:浏览器下面出现滚动条,浏览器加宽时,两个盒子中间空白加大,,浏览器减少宽度消除空白后,红盒子马上换行.两个盒子背景没有重叠部分.

Demo-4:左边盒子采用右负margin

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页布局-float及负margin技术的再认识-4</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
.content {
float: left;
height: 200px;
width: 700px;
background-color: #999999;
margin-right: -400px;
}
.link {
background-color: #FF0000;
text-align: center;
float: right;
height: 200px;
width: 700px;
}
-->
</style>
</head>
<body>
<div class="content">content</div>
<div class="link">link</div>
</body>
</html>

效果如下:

规律小结:浏览器宽度变窄时,灰色漏出部分尺寸小于700px-400px=300px时,红色部分换行.浏览器宽度变大时,灰色漏出部分尺寸大于700px-400px=300px时,红色覆盖灰色变成一行.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航