htm盒子模型与定位

以下图片，详细清晰的讲明了盒子模型。

 

行内元素之间的水平距离

当两个行内元素并排紧邻时，它们之间的距离为margin-left和margin-right之和。

注意，对于行内元素，margin-top,margin-bottom无效果。

 

块级元素之间的竖直距离

两个块级元素之间的距离不是margin-bottom与margin-top总和，而是两者中的较大者。

 

盒子的浮动和定位

CSS 有三种基本的定位机制：普通流、浮动和定位。

 

浮动

浮动某元素，则要指定一个明确的宽度；否则，它们会尽可能地窄，没浮动前是100%。

浮动的框可以向左或向右移动，

如果它的外边缘碰到包含框或另一个浮动框的边框为止。

 

如果它的外边缘碰到非浮动框，则会换行到非浮动框的下面。

 

<style type="text/css">

#top{

border:thin solid #800000

}

#one{

border: thin solid red;

float:left;

}

#normal{

width:100px;

height:100px;

border:thin solid blue;

float:left

}

</style>

<div id="top">

<div id="normal">非浮动碰撞物</div>

<div id="one">阿大</div>

</div>

 

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

<div id="top">

<div id="normal">非浮动碰撞物</div>

<div id="one">阿大</div>

<div id="two">阿二</div>

</div>

阿二如果不浮动，就会占据阿大的位置，不过阿二的文本，会受到阿大的宽度影响。（浮动元素占据的空间，会对行内元素产生影响，从而形成文本环绕的效果）

 

如果浮动，则会紧挨在阿大旁边。

 

float 属性定义元素在哪个方向浮动。

以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS 中，任何元素都可以浮动。

 

对阿大、阿二都进行浮动，它们都脱离了标准流，宋词div马上占据了阿大和阿二的位置。

两个盒子有一定的空间把文字挤到一边，形成图文混排效果。（浮动元素占据的空间，会对行内元素产生影响，从而形成文本环绕的效果）

<div id="top">

<div id="normal">非浮动碰撞物</div>

<div id="one">阿大</div>

<div id="two">阿二</div>

<div id="text"><span>

谁道闲情抛弃久？每到春来，惆怅还依旧。日日花前常病酒，不辞镜里朱颜瘦。

河畔青芜堤上柳，为问新愁，何事年年有？独立小桥风满袖，平林新月人归后。

</span></div>

 

清除浮动

如果不想要文本div占据阿大阿二的位置而产生的文字环绕效果。可以对文本div使用.clear{ clear:both;}

注意：对clear属性的设置要放到文字所在的盒子里，而不是放到“浮动”的盒子里。

 

去掉文字div后，要解决高度自适应问题

去掉文字后，由于阿大和阿二都脱离了标准流，所以top DIV视阿大和阿二于无形。把高度收回。

 

解决方法是：在阿二后面加<div class=“clear”></div>，并对.clear｛clear:both;｝进行清除浮动。

 

定位

static （静态定位）

元素框正常生成。

relative （相对定位）

元素框偏移某个距离。它原本所占的空间仍霸占着。

absolute （绝对定位）

元素框从文档流完全删除，并相对于其包含块定位。（注意：包含块必须也是绝对定位/fixed）元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。

fixed （固定定位）

元素框的表现类似于将position 设置为absolute，但其包含块是视窗本身。（不支持IE6）

 

CSS 相对定位

对一个元素进行相对定位，它将以起点为参照，垂直或水平移动。

div{

border:thin solid gray;

}

div>div{

margin:10px;

width:80px;

}

#relative{

position:relative;

top:20px;

left:30px;

}

#top{

float:left

}

<div id="top">

<div>div1</div><div id="relative">div2</div><div>div3</div>

</div>

 注意: 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。注意，相对定位后，top div的宽度。因此，移动元素会导致它覆盖其它框。

 

绝对定位，元素不再保留原来占据的空间。