精通CSS 高级Web标准解决方案(第2版) 第3章 笔记

 

 

 

第3章

　　可视化格式模型

 

　　3个重要的CSS概念:浮动,定位,盒模型.

 

　　学习内容:

　　　　盒模型的复杂性和特点

　　　　如何以及为什么使用外边距叠加

　　　　绝对定位和相对定位之间的差异

　　　　浮动和清理是如何工作的

 

3.1 盒模型概述

　　

　　页面上每个元素被看作一个矩形框,这个框由元素的内容,内边矩,边框和外边距组成.

　　P.S. CSS2.1还包含outline属性，与border属性不同，轮廓绘制在元素框之上，所以它们不影响元素的大小或定位。IE7和更低版本不支持轮廓。

　　外边距可以为负值

　　

　　3.1.1 IE和盒模型

　　　　IE6及更低版本在混杂模式中使用了自己的非标准盒模式。width属性是内容，内边矩和边框的宽度总和。

　　　　P.S. CSS3的box-sizing属性可以定义要使用哪种盒模型，但是除了非常特殊的场合之外很少需要使用这个属性。

 

　　3.1.2 外边距叠加

　　　　P默认有顶，底外边距

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

　　　　当一个元素包含在另一个元素中时，它们的顶和/或底外边距也会发生叠加。

　　　　当一个空元素没有边框和内边矩，它的顶外边距和低外边距也会发生叠加，如果这个外边距碰到另一个元素的外边距，它还会发生叠加。

<div style="margin:20px 0;"></div>
    <div style="margin-top:20px; height:100px; background:#f00"></div>
    <p>I'm the paragraph,and i have the margin-top and the margin-bottom defalut</p>

 

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

 

3.2 定位概述

　　3.2.1 可视化格式模型

　　　　p,h1,div等元素常常称为块级元素，strong,span等元素称为行内元素，因为它们的内容显示在行中，即“行内框”。

　　　　可以使用display属性设置为block,让行内元素表现的像块级元素一样。

　　　　CSS中有3种基本的定位机制：普通流，浮动，绝对定位。

　　　　行内框在一行中水平排列，可以使用水平内边距，边框和外边距调整它们的水平间距。但是，垂直内边距，边框和外边距不影响行内框的高度。同样，在行内框上设置显式的高度或宽度也没有影响。由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框。但是，设置行高可以增加这个框的高度。因此，修改行内框尺寸的唯一方法是修改行高或者水平边框，内边距或外边距。

　　　　CSS 2.1允许把元素的display属性设置为inline-block,但是，框的内容仍然符合块级框的行为，例如能够显示地设置宽度，高度，垂直外边距和内边距。

　　　　匿名块框：

　　3.2.2 相对定位

　　　　相对于元素的起点移动，相对定位的元素要覆盖普通文本流的元素。使用相对定位时，无论是否移动，元素仍然占据原来的空间。

　　3.2.3 绝对定位

　　　　绝对定位使元素的位置与文档流无关，因此不占据空间。相对于距离最近的已定位的祖先元素。如果没有已定位的祖先元素，则它的位置是相对于初始包含块的。根据用户代理的不同，初始包含块可能是画布或HTML元素。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的叠放次序。

　　　　IE5.5，IE6.0 BUG：如果要相对于相对定位的框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸。如果没有，那么IE会错误地相对画布定位这个框。简单的解决方案是为相对定位的框设置宽度和高度。

　　　　固定定位是绝对定位的一种.差异是固定元素的包含块是视口.不过,IE6和更低版本不支持固定定位.IE7部分支持这个属性,但是实现中有很多BUG.

　　3.2.4 浮动

　　　　浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。

　　　　行框和清理

　　　　　　浮动元素旁边的行框被缩短，从而给浮动元素留出空间。浮动元素脱离了文档流，不影响周围的元素。但是，对元素进行清理实际上为前面的浮动元素留出了垂直空间。

　　　　清理浮动：

　　　　　　1，添加无意义的标记，例如div,br;

　　　　　　2,  浮动祖先容器，为避免下一个元素受到这个浮动元素的影响，常在页脚进行清理。

　　　　　　3，应用值为hidden或auto的overflow属性里有一有用的副作用，会自动清理包含的任何浮动元素

　　　　　　4，使用CSS生成的内容或JavaScript对浮动元素进行清理。使用CSS方法时，结合使用:after伪类

　　　　　　　　.clear:after {content: "."; height:0; visibility:hidden;display:block;clear:both; }

　　　　　　　　但是在IE6和更低版本中不起作用

I'm the image

One of the most impressive flights ever has to be landing at Male airport in the Maldives. As the plane descends, stretching before you is a sea of azure blue reefs and atolls. The engines ease off and the plane gently floats down, almost skimming the water before finally touching down. Male airport sits on it's own private Atoll so transfers to your hotel are either by speedboat or, if you're lucky, by sea plane. Beats descending into Heathrow airport and then fighting your way to the train or bus station any day.