CSS盒模型 及 定位position

1.     标准W3C盒子模型：DOCTYPE 声明

内容区域(content)不包括其他部分，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但会增加元素框的总占有尺寸。

 

①IE早期版本的盒子模型(IE6及以下)：在混杂模式中使用自己的非标准盒模型

内容区域(content)包括内边距(padding)和border(边框)两部分，这种模型如果已经设置好了width或height，增加border或padding会减少内容区域的尺寸。

在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

②外边距叠加：

当两个或更多垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。

   margin-bottom和margin-top（一个元素在另一个元素上方或空元素与另一个元素）

margin-top和margin-top（一个元素是另一个元素的父元素）

都会发生叠加。

 注意：只有普通文件流中块框的垂直外边距才会发生叠加。行内框、浮动框或绝对定位框之间的外边距不会发生叠加。

2. 定位：

①可视化格式模型：

块级元素：块框，如：p、 h1和 div。块框从上到下垂直排列，框之间的垂直距离由框的垂直外边距计算得到。

 

行内元素：行内框，如：strong和span。行内框在一行中水平排列。设置显式的高度和宽度对行内框无影响，可使用水平内边距、边框和外边距调整它们的水平间距，但垂直内边距、边框和外边距不影响行内框的高度。一行形成的水平框称行框，其高度总是足以容纳它包含的所有行内框。但是，设置行高可增加框的高度。

修改行内框尺寸的唯一方法：修改行高或水平内边距、边框和外边距

 

display属性可改变生成的框的类型，如设为block(该元素就会表现得像块框一样)，

设为none(没有框，即不占用文档空间)，设为inline-block(CSS2.1  Firefox3.0及以上,IE8及以上,Safari和Opera的最新版都支持)可让元素像行内框一样水平地依次排列，但框的内容仍然符合块级框的行为。

 

CSS有3种基本的定位机制：普通流(相对定位属于普通流，相对于在普通流中的初始位置定位)、浮动和绝对定位。

普通流中元素框的位置由元素在HTML中的位置决定。

position: 默认值static：块框和行内框

②相对定位

给某元素设置position: relative ,该元素先出现在它所在位置，然后通过设置left和top属性，让它“相对于“它的起点运动。元素仍占据原来的空间，实际被看作普通流定位模型的一部分。

③绝对定位(IE6,IE5.5有bug，要确保相对定位的框已设置了尺寸)

给某元素设置position: absolute, 该元素相对于距离它最近的那个已定位的祖先元素移动，如果该元素没有已定位的祖先元素，那么它就相对于初始包含块(画布或HTML元素)移动。

绝对定位元素脱离了文档流：普通流中其它元素的布局就像绝对定位的元素不存在一样。

它们可以覆盖页面上的其它元素。可设置z-index控制框的叠放顺序。

④固定定位(IE7有bug IE6及以下不支持)

给某元素设置position: fixed, 是绝对定位的一种，固定元素的包含框是视口(viewport)

使我们能够创建总是出现在窗口中相同位置的浮动元素，如博客中的评论板块。

⑤浮动

浮动定位模型：脱离文档流，会覆盖文档流中的其它元素。

行框和清理：当普通框的文本内容(行框)受到浮动元素影响，会移动以流出空间，即浮动元素旁边的行框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框：可以借此创建浮动框使文本围绕图像。

要阻止行框围绕浮动框的行为，需要给包含这些行框的元素应用clear属性

Clear属性值: left、right、both或none，对元素进行清理实际上是为上面的浮动元素留出了垂直空间

清理的实际实现方式：

1：清理浮动前的效果

.news{       background-color:gray;       border:solid 1px black;       font-size:12px;}.news  img{    float:left;}.news p{    float:right;       background:#eee;} <div class="news">容器DIV             <img src="p1.png" />                 <p>              当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />              当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />              当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />              当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />       </p>                                  </div>    

效果图：因为img和p设置为float，脱离了文档流，容器div表现得像文档中跟没有这两个元素一样，因此图片和文字段落不在容器里面。

 

2：清理浮动后的效果

方法①：添加少量额外代码：

.news{       background-color:gray;       border:solid 1px black;       font-size:12px;}.news  img{    float:left;}.news p{    float:right;       background:#eee;}.news.clear{       clear:both;} <div class="news">容器DIV             <img src="p1.png" />                 <p>        当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />        当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />        当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />        当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />       </p>    <br class="clear" />  <!--清理元素必须是块级元素，行内元素无效，在容器的最后-->                       </div>    

效果图：在段落下面添加一个空元素，并清理它，可以迫使容器div包围浮动元素。

常常现有元素可以应用clear，但是有时候不得不添加不必要的代码。

这样可以迫使容器包含浮动元素的原因：

可以将容器div设置成float:left达到相同的效果，但这样后续的布局也要清理，且浮动太多元素，布局变得复杂。

方法②：利用值为hidden或auto的overflow属性的副作用：自动清理包含的任何浮动元素。该方法不需添加额外代码，但会影响元素的表现形式：如产生滚动条(auto)或截断(hidden)内容。

.news{       background-color:gray;       border:solid 1px black;       font-size:12px;       overflow:auto(hidden);}.news img{    float:left;}.news p{    float:right;       background:#eee;}

方法③：使用CSS生成的内容(借助于after伪类)或JavaScript对浮动元素进行清理（主流浏览器都有效）。

这两种方法基本概念相同，都不直接向标记添加进行清理的元素，而是将它动态地添加到页面中。

.news{       background-color:gray;       border:solid 1px black;       font-size:12px;}.news  img{    float:left;}.newsp{    float:right;       background:#eee;}.clear:after{     /*在容器div的末尾添加新的内容*/       content:".";  /*添加内容：不引人注意的字符 "." */       height:0;     /*不占垂直空间*/    visibility:hidden;    /*在页面上不可见*/       display:block;  /*因为在元素的垂直顶边距上为浮动元素留出空间，所以块框才有效*/       clear:both;}

注意：IE6及更低版本不起作用。

<divclass="news clear">容器DIV     

       <img src="p1.png" />          

       <p>

        当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />

        当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />

        当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />

        当普通流元素中的文本围绕浮动元素时，观察清理浮动后的效果<br />

       </p>      

</div>