说说标准系列文章3css可视化模型2Word文档格式.docx
《说说标准系列文章3css可视化模型2Word文档格式.docx》由会员分享，可在线阅读，更多相关《说说标准系列文章3css可视化模型2Word文档格式.docx（23页珍藏版）》请在冰豆网上搜索。
absolute;
1pxsolidred;
absolute<
/div>
relative<
截图：
可见，对于绝对定位的元素，浮动没有任何效果。
这也体现了浮动和绝对定位之间的一种平衡。
而且，用Firefox的Firebug查看，你会发现，对于绝对定位元素计算后的“float”值，是”none”，而不是”right”。
Chrome中则是right……
特值的含义
该属性指定框应当向左右移动或者不移动。
特性值有如下含义：
left
该元素产生一个向左浮动的块框。
内容在该框的右边排列，就是上一篇帖子中所说的文字环绕，起点是框的顶部（会受'
clear'
属性的影响）。
right
与left类似，框向右侧浮动，内容在该框的左侧排列，从顶部开始。
none
该框不浮动。
这个大家应该都比较清楚吧，不再浪费篇章举例了。
浮动细则
1.对于根元素的浮动，浏览器应该当作none
根元素无所谓是否浮动，没有实际意义。
2.左浮动框的左外边界（marginedge）不可以出现在它包含块左边界之左。
对于右浮动的元素也有类似规则
以上的话，看起来有点绕眼……
是这么个意思，左浮动元素的左margin最多紧贴包含块的左边界。
注意，是marginedge，不是borderedge也不是contentedge。
关于边界（edge）见：
说说标准——你真的了解盒子模型（boxmodel）吗？
styletype="
text/css"
.sub{
width:
100px;
background-color:
green;
margin:
020px;
}
/style>
overflow:
hidden;
divclass="
sub"
style="
float:
left;
left<
right<
示意图：
3.如果当前框是左浮动框，并且在源文档中存在更早生成的左浮动框，那么对于任意这些先前的框，要么当前框的左外边出现在先前框的右外边之右，要么它的顶部必须在先前框的底部之下。
对于向右浮动的框也有类似的规则。
也就是说，浮动元素的定位受先前生成的浮动框的影响。
后面的浮动元素，需要紧挨着先前同向浮动元素的margin边进行定位，如果空间不足，则折行，放置到它之前元素的下面。
例如：
200px;
10px;
left1<
left2<
left3<
如上图中，把left2当作当前元素，那么，它前面有left1生成的浮动框，所以，它会贴着left1的右margin边排列。
而到left3的时候，剩余的空间已经不能够放置它了，所以，折行放置。
4.左浮动框的右外边不可以出现在它右侧的任何右浮动框的左外边之右。
对于向右浮动的元素也有类似的规则。
注意，以上说的是右侧，不是下侧，此规则不包括左浮动框下面的右浮动框。
就是说，同一行中的左浮动元素和有浮动元素不能够有互相折叠的现象。
10px;
divid="
container"
200px;
以上两个浮动元素的包含块宽度为200px，无法在一行放置，所以，右浮动元素只好折行显示了。
宽度设置成300px之后，则可以放到一行。
5.浮动框的顶外边不能高于它包含块的顶部。
当一个浮动框发生在两个margin折叠的中间时，浮动元素的定位好像它有另一个空的块级父框位于常规流中。
那个空父框的定位规则在margin折叠一节有说明。
第一句好理解，说的是顶边不能超出包含块，跟左边右边不能超出一个道理。
后面的规则是说，当浮动框处于两个发生margin折叠的地方时，会被当作被包含在一个空的块框中，它上面和下面的margin会穿过它发生margin折叠，当它不存在。
div{
color:
white;
50px;
div>
A<
red;
O<
B<
以上代码中，3个div的包含块是初始包含块。
O处于A和B的中间，A和B在理论上应当发生margin折叠。
那么，发生了么？
看截图：
依此图看，确实是没问题的……
但是，IE中是这样么，各位看官可以自行查看，保你大吃一斤。
哈哈！
九：
浮动（Float）定位细则二
6.浮动框的顶边不可以高于源文档中先前元素产生的块框或浮动框的顶
例子最直接了：
10px0;
180px;
auto;
background:
white;
1pxsolidgold;
blue;
50px;
O、A、B都是浮动元素，O、A是做浮动元素，根据宽度计算，A应该处于O的下一行。
B是右浮动浮动元素。
按照标准，B浮动的时候，顶边不应高于A，因此，B不会放到O的右侧显示
如图：
如果让A和B换个位置：
这时候：
很神奇吧，别以为上面有位子浮动元素就会往上放。
7.浮动框的顶边不可以高于源文档中先前元素产生的包含一个框的任何行框的顶。
在前面的内容中说到过，浮动元素会缩短行框。
关于行框，请参见：
说说标准——CSS核心可视化格式模型（visualformattingmodel）之五：
常规流中的inlineformattingcontext。
例子:
400px;
border:
background-color:
green;
250px;
spanstyle="
1pxsolidyellow;
blublublublublublublublublublublublu<
/span>
依照标准来说，应该按照上图的方式放置right这个浮动元素。
但是，只有Firefox/Chrome/Safari/Opera/IE8（S）是这样的，在IE6/IE7/IE8（Q）中，是这样的：
看来，这条规则，IE遵守的不好啊……
大家注意这个兼容性问题。
8.左浮动框左边如果有另外一个左浮动框，它的右外边不可以出现在它包含块的右边之右。
（或者比较宽松的要求是：
一个左浮动不可以超出右边，除非它已经尽可能地靠左排列。
）对于向右浮动的元素也有类似的规则。
此条规则也是限定浮动元素的位置范围，不可超出包含块。
9.浮动框要放置得尽可能的高。
在符合所有规则的情况下，尽可能的向上放，注意6、7两条关于其顶边的规则。
10.左浮动框必须尽量靠左放置，右浮动框必须尽量靠右放置。
在更高的位置和更靠左或靠右的位置间，选择前者。
和第9条，可以算是浮动的大规则吧，尽量的向上向左/右放。
这几条规则中说到的其他元素，都和浮动元素处于相同的blockformattingcontext中。
总结
可见，浮动的规则却是很让人迷惑，但从这几条规则中你也不难发现，浮动的宗旨是，在不溢出包含块的情况下，尽量的靠上靠左/右放置，但是不能高于它前面生成的块框、浮动框和行框的顶。
十：
控制紧接浮动的排列-clear特性
向前两个帖子，都是讲的伟大的浮动：
它带给我们一个不属于常规流的世界，它不能超出它的包含块，它的位置跟在它之前的元素生成的框有关系（详见前面的浮动规则）……那么，它对处于它后面的元素有什么关系呢？
对于块框，会认为它不存在，行框会绕着它排列！
有没有方法使块框也可以在它后面排列，而不再当它不存在呢？
答案是肯定的。
W3C总是透着一种非常人性化的味道。
clear特性就是做的这件事。
我感觉，clear是对浮动框和常规流中框的一种关系上的平衡。
特性
该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。
’clear’特性不考虑它自身包含的浮动子元素和不处于同一个Blockformattingcontext中的浮动元素。
对于插入框，该属性适用于插入框所属的最后的块框。
间隙（Clearance）以元素margintop上方空白的方式被引入。
它用来把元素垂直（典型情况是向下）推过浮动框。
它是一个值。
clear特性值的作用
left/right/both：
生成框的间隙，是指设置足够的（空白区），以使元素的顶边框边界（topborderedge）放置到由源文档中较早元素生成的任何左浮动框/右浮动框/左右浮动框的底外边（bottomouteredge，即底margin边）之下。
none：
对考虑到浮动后的框的位置没有约束。
简单点儿说，就是设置了clear的元素的topborderedge要放在相关的浮动元素的bottommarginedge之下。
注意这两种元素接触边界的区别。
一个是borer，一个是margin。
一个直观的例子：
300px;
5pxsolidred;
float
clear:
5pxsolidyellow;
margin-top:
clearance
在浏览器里测试之，截图：
设置了clear的元素的margin-top是50px，没起作用，为什么呢？
注意，应该是设置了clear的元素的topborderedge，不是marginedge。
如果想让它们之间有50px的间距，怎么办？
看修改过的代码：
margin-bottom:
运行截图：
这点，各位童鞋还需注意。
浮动元素上的clear
为clear特性被赋予浮动元素时，它将导致浮动框定位规则的修正，另外一条限制（第10条）被追加：
浮动框区的上外边界（topmarginedge）必须低于前面所有左浮框的下外边界（在clear:
left时），或者右浮框区（clear:
right），或者两个框区（clear:
both）。
例子：
Container"
"
DIV1"
DIV2"
red;
clear:
rightfloat:
应该是这种效果：
但是，在IE6、IE7和IE8（Q）中，这个规则没有被遵守：
请大家注意这个兼容性问题。
尽量少在浮动元素上设置clear属性。
十一：
绝对定位
在前面的帖子中，我们已经讲了可视化模型中布局的两大方面：
1.常规流2.浮动，布局3大部分只剩下了绝对定位。
前面的帖子中也零星的提到过关于绝对定位的某些特性，但都不够细致系统。
绝对定位（Absolutepositioning）
相对包含块偏移定位
在绝对定位模型中，一个框明确地基于它的包含块偏移。
不是父元素，这点需注意。
要是人家问你，绝对定位相对于谁定位啊？
你很快乐的说：
它的父元素。
那就显得矬了--!
专业的说法，相对于包含快定位。
所以，绝对定位元素的定位，关键是包含块，什么是包含块？
见：
【分享】说说标准——CSS核心可视化格式模型（visualformattingmodel）之一：
包含块（containingblock）
完全脱离常规流
它完全脱离了常规流（对后继的兄弟节点没有影响）。
这一点又与浮动元素不同，好歹浮动元素会对后继的行框产生影响，而且，后面声明的绝对定位元素也不会受前面定义的绝对元素的影响。
可以这么理解，常规流中的元素，都在同一个层上，浮动是处于常规流之上的一个特殊层，可能会对常规流中的元素有影响。
但是绝对定位的元素不会，可以把每个绝对定位的框看做一个单独的图层，独来独往。
所以，说它完全脱离了常规流也不无道理。
注意一点，绝对元素定位的top和left值跟绝对元素未脱离常规流之前在常规流中位置有关。
看这个例子：
position:
absolute
height:
1pxsolidblue;
DIV中的普通文本元素<
left:
60px;
以上例子中，两个绝对定位元素都未声明其top特性，那么top就会取它在常规流中的位置（后面会讲到）。
中间的DIV在常规流中，影响了后面的绝对定位元素的位置，但是没有受到前面的绝对定位元素的影响。
实际截图：
绝对定位元素生成的包含块
一个绝对定位框会为它的常规流子元素和定位派生元素（不包含fiexed定位的元素）生成一个新的包含块。
不过，绝对定位元素的内容不会在其它框的周围排列。
至于，为何只为常规流中的子元素还有绝对定位元素生成包含块，就不大了解了……有知道的么？
分享一下……
注意，绝对定位框还会创建blockformattingcontexts。
在IE中则会触发hasLayout。
堆叠层次
它们可能会掩盖另一个框的内容，或者被另外一个框掩盖，这取决于互相重合的框的堆叠层次。
也就是我们前面说的三维的可视化模型，除了X轴，Y轴，还有Z轴。
固定定位（Fixedpositioning）
固定定位是绝对定位的一个子类。
唯一的区别是，对于固定定位框，它的包含块由可是窗口（viewport）创建。
对于连续媒介，固定定位框并不随着文档的滚动而移动。
从这个意义上说，它们类似于固定的背景图形。
对于页面媒介，固定定位框在每页里重复。
对于需要在每一页底部放置一个签名时，这个方法非常有用。
注意，在IE6里不支持Fixed定位，通常的做法是使用绝对定位，然后用JS控制绝对定位框的位置，来代替固定定位。
W3C官方给出一个使用固定定位布局的例子，为了看起来明显，我给所有的div加了个红色的边框，各位可以自行测试：
!
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.0//EN"
HTML>
HEAD>
TITLE>
AframedocumentwithCSS2<
/TITLE>
STYLEtype="
BODY{
8.5in
1pxsolidred;
/*Requiredforpercentageheightsbelow*/
#header{
fixed;
100%;
15%;
top:
0;
right:
bottom:
auto;
#sidebar{
10em;
#main{
#footer{
/STYLE>
/HEAD>
BODY>
DIVid="
header"
...<
/DIV>
sidebar"
main"
footer"
/BODY>
/HTML>
效果应该是（来自W3C）：
十二、'
display'
，'
position'
和
升级会员 