div+css网页布局设计新开端（6）-css教程-PHP中文网

首页

web前端

css教程

div+css网页布局设计新开端（6）

黄舟

Dec 29, 2016 pm 02:32 PM

接着测试

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
margin-top:20px;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

登录后复制

这个IE6和火狐是一样的，注意绿色上面不是40px而是20px

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

下面讲讲文档流，知道流的概念，才好讲定位
CSS 有三种基本的定位机制：普通流、浮动和绝对定位
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

流就跟流水一样，从上到下，从左到右，就跟word文档一样你在文字中间插段文字，后面的文字会自动挤开，网页普通布局也是这样

先说说块的概念
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

简单的说，块元素你如果不指定宽度，他默认的宽度就100%，即浏览器一样宽而且还自动在后面加个

所以两个div你就算把宽度都设100px 也不会水平在一起第1个div会强迫第2个div换行，第2个div则会强迫第3个div换行。。。。
行内元素没有宽度高度，他就是一行，你直接css指定宽高无效的，但他的宽高只能随着内容而改变
块和行内元素，两者都可以变成对方，用display属性

下面说说float浮动

先弄个大框

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
background:green;
} 
</style> 
<head>
<body>
<div id="a"> </div>
</body>
</html>

登录后复制

我们知道如果大框里有2个div，那么这2个div不是不会水平排列的

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:1px;
background:green;
} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div class="div"></div>
</div>
</body>
</html>

登录后复制

如果想让他们水平排列，就得用float了

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:1px;
background:green;
float:left;
} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div class="div"></div>
</div>
</body>
</html>

登录后复制

如果第2个div不设置float会怎样？
<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:1px;
background:green;
float:left;
} 
#b{
width:100px;
height:100px;
border:soild;
margin:1px;
background:green;
} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
</div>
</body>
</html>

登录后复制

可以看到还是一样，但是中间间距是2px，说明两个div水平相距的外边距是不会重合的
垂直的会，具体还要实践来验证

此时在看看火狐浏览器

咋剩一个了？其实是两个div重合了
具体信哪个浏览器的，当然是以火狐为标准

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

如何理解这句？
可以把这个大框看做是一个机场，div是飞机
没有float的div就是停在地上的飞机，有float的div就是在空中的飞机
float的div是不会占用地上div的空间的，所以它们重合了，等于说一个在天上一个在地上，这就是为什么叫浮动，因为是浮在空中的div

以上就是div+css网页布局设计新开端（6）的内容，更多相关内容请关注PHP中文网（www.php.cn）！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn