div+css网页布局设计新开端(6)

2019年8月24日14:27:52
评论

div+css网页布局设计新开端(6)

接着测试

<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>

div+css网页布局设计新开端(6)

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

div+css网页布局设计新开端(6)

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

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

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

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

简单的说,块元素你如果不指定宽度,他默认的宽度就100%,即浏览器一样宽 而且还自动在后面加个<br/>
所以两个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>

div+css网页布局设计新开端(6)

我们知道如果大框里有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>

div+css网页布局设计新开端(6)

如果想让他们水平排列,就得用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>

div+css网页布局设计新开端(6)

如果第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>

div+css网页布局设计新开端(6)

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

此时在看看火狐浏览器

div+css网页布局设计新开端(6)

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

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

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

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

企鹅博客
  • 本文由 发表于 2019年8月24日14:27:52
  • 转载请务必保留本文链接:https://www.qieseo.com/356517.html

发表评论