仓酷云

标题: 带来一篇一般流 CSS定位机制 [打印本页]

作者: 小女巫 时间: 2015-1-15 23:17
标题: 带来一篇一般流 CSS定位机制
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
破洛洛文章简介：因为没有找到本人以为完全的关于一般流、浮动和相对定位的中文文章，因而兴起勇气决意本人来写篇。为此大抵啃失落了CSS2.1里的8Boxmodel和9Visualformattingmodel。假话说，还真是看得有摇头年夜，呵呵~文档流，实在尺度里基本就没有这个词。假如把文档流直译
因为没有搜就任何本人以为完全的关于文档流、浮动和相对定位的中文文章，因而兴起勇气决意本人来写篇。为此啃失落了CSS2.1里的8Boxmodel和9Visualformattingmodel。假话说，还真是看得有摇头年夜，呵呵~
文档流，实在尺度里基本就没有这个词。假如把文档流直译为英文就是documentflow，但尺度里只要另外一个词，叫做一般流(normalflow)，大概称为惯例流。但仿佛人人更习气文档流的称号，由于良多中文翻译的书就是这么来的。好比《CSSMastery》，英文原书中至始至终都只要一般流normalflow这一词，历来没呈现过文档流documentflow。可是中文译本“一般流”和“文档流”倒是瓜代呈现的。
甚么是一般流？复杂说就是元素依照其在HTML中的地位按次决意排布的历程。而且这类历程遵守尺度的形貌。
为了从分歧角度申明，我收罗了一些大概冗杂、详细大概流畅的其别人给出的界说：

将窗体自上而下分红一行行，并在每行中按从左至右的按次排放元素，即为文档流。
Jennifer.Kyrnin@About.com:一般流是元素在多半情形下出现在web页面上的体例。一切HTML都在块框(blockboxes，块级元素)大概行内框(inlineboxes，行内元素)中。
RainboDesign:当扫瞄器入手下手衬着HTML文档，它从窗口的顶端入手下手，经由全部文档内容的过程当中，分派元素必要的空间。除非文档的尺寸被CSS出格的限制，不然扫瞄器垂直扩大文档来包容全体的内容。每一个新的块级元素衬着为新行。行内元素则依照按次被程度衬着直到以后行碰到了界限，然后换到下一行垂直衬着。这个历程被成为一般文档流。

可见，把流(flow)了解为流程，完整说的通。一般流便是一般情形下的元素排布和定位流程。
但实在在CSS2.1RC里，一般的实质是三种定位机制(Positioningschemes)之一，被界说为：

Normalflow.InCSS2.1,normalflowincludesblockformattingofblockboxes,inlineformattingofinlineboxes,relativepositioningofblockorinlineboxes,andpositioningofrun-inboxes.

这个历程包含了块格局化(blockformatting)，行内格局化(inlineformatting)，绝对定位(relativepositioning)，和run-inboxes的定位。仿佛和下面那些一模一样，可是把这些分化开来，仍旧是分歧的。
别的，9.4Normalflow下另有一段：

Boxesinthenormalflowbelongtoaformattingcontext,whichmaybeblockorinline,butnotbothsimultaneously.Blockboxesparticipateinablockformattingcontext.Inlineboxesparticipateinaninlineformattingcontext.

这是段形貌，不是界说。在一般流中的Box(框)属于一种formattingcontext(格局化高低文)，范例能够是block，大概是inline，但不克不及同时属于这二者。而且，Blockboxes(块框)在blockformattingcontext(块格局化高低文)里格局化，Inlineboxes(块内框)则在inlineformattingcontext(行内格局化高低文)里格局化。
我们晓得，任何被衬着的元素都属于一个box，而且不是block，就是inline。即便是未被任何元素包裹的文本，依据分歧的情形，也会属于匿名的blockboxes大概inlineboxes。以是下面的形貌，便是把一切的元素分别到对应的formattingcontext里。
组合下面的界说，而且临时先把formattingcontext看作是一种局限限制，那末详细讲，一般流就是如许的历程：

在对应的blockformattingcontext中，块级元素依照其在HTML中的按次，在其容器框里从左上角入手下手，从上到下垂直地顺次分派空间、堆砌(stack)，并独有一行，界限紧贴父容器。两相邻元素间的间隔由margin属性决意，在统一个blockformattingcontext中的垂直界限将被堆叠(collapse)。而且，除非创立一个新的blockformattingcontext，不然块级元素的宽度不受浮动元素的影响(这就是浮动元素能盖在块级元素下面的缘故原由)。
在对应的inlineformattingcontext中，行内元素沉着器的顶端入手下手，一个接一个地程度排布。程度添补、边框和边距对行内元素无效。但垂直的添补、边框和空缺边不影响其高度。一个程度行中的一切inlinebox构成了名为linebox的矩形地区。linebox的高度一直容下一切的inlinebox，并只与行高有关。linebox的宽度遭到父容器和浮动元素存在的影响(这就是文本围绕浮动元素)。假如linebox的宽度小于容器，linebox的程度排布就取决于text-align。假如linebox的宽度年夜于容器，则截断linebox并换行在新的linebox中从头排布元素(截断处不该用padding和margin值)。假如linebox没法截断，如单词太长大概指定不换行，则会溢出容器。
对这些blockbox和inlinebox举行绝对定位，即相对已排布的地位举行偏移。元素在个中保存本来所占用的空间。

说了一堆器材，实在就只是在说怎样排布元素罢了。那些都十分简单了解，除一个观点――formattingcontext。
甚么是formattingcontext？context老是注释为高低文情况，那末格局化高低文就应当是指格局化时的前后干系。
但是对此，尺度里没有更多的界说息争释。
固然mozilladevelopercenter上没有关于inlineformattingcontext的材料，可是却有关于blockformattingcontext的形貌：一个blockformattingcontext是web页面可视化CSS衬着的一个部分，是一块blockboxes排布和float元素互相感化的地区。
用本人的话简言之，那是一个感化局限。能够把它了解成是一个自力的容器，而且这个容器的里box的结构，与这个容器外的绝不干系。
上面的这些情形，城市创立一个新的blockformattingcontext：

根元素
浮动或相对定位的元素
display值为inline-blocks，table-cell或table-caption
overflow值为非visible

固然尺度里没有提到根元素会创立新的blockformattingcontext，可是mozilla提到了，而且这也注释了初始的一个高低文情况的创建。
这里有个创建(establishes)的观点，这个观点和创建容器块(containingblock)的观点相似。好比，A是B父元素，当B被衬着时其地位和巨细会参照一个容器块，这个容器块是由其父元素A创建的。是的，有点复杂成绩庞大化。固然本色上父元素就是子元素的容器，可是过程当中间却有个创建(establishes)的观点。而且这个创立的观点被使用于其他感化局限，包含blockformattingcontext。
想一想我们寻常在做的事变。当一个父元素由于子元素浮动而招致高度为0的时分，大概我们会习气的加上如许的划定规矩：overflow:hidden;zoom:1;。
overflow:hidden不恰是创立了一个新的blockformattingcontext吗？那末zoom:1是怎样回事？这不能不提到IE公有的hasLayout，一个和blockformattingcontext举动相仿的IE特产。关于hasLayout，本文不做会商。能够浏览那篇着名的Onhavinglayout，中文版由old9翻译过，可是链接仿佛临时挂失落了，以是能够看看蓝色幻想上转载的版本。
这就是为何浮动元素老是包容浮动元素的缘故原由――浮动元素创立了新的blockformattingcontext，其外部的结构不在和内部有关。好比外部的浮动扫除不会再影响到内部，而且外部的浮动关于内部而言也是不成见的。这也是为何《精晓CSS》会说“使用值为hidden或auto的overflow属性会主动地清算任何浮动元素”的缘故原由。同时，这也是为何有的时分必需用扫除浮动而不是设置overflow来使父容器包容浮动元素，由于“设置框的overflow属性会影响它的体现”。
举个实践傍边的罕见例子，好比垂直边距叠加成绩：

12345678910

复制代码

[color=#009900][color=#000000][b]<html[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<head[color=#000000][b]>[/b][/color][/b][/color][color=#000000][b]</head[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<body[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<div[/b][/color][color=#000066]id[/color]=[color=#ff0000]"A"[/color][color=#000066]style[/color]=[color=#ff0000]"background:gray;margin-top:20px;"[/color][color=#000000][b]>[/b][/color][/color][color=#009900][color=#000000][b]<div[/b][/color][color=#000066]id[/color]=[color=#ff0000]"B"[/color][color=#000066]style[/color]=[color=#ff0000]"margin-top:10px;"[/color][color=#000000][b]>[/b][/color][/color]我有10pxm-t[color=#009900][color=#000000][b]</div[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</div[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</body[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</html[color=#000000][b]>[/b][/color][/b][/color][/color]

复制代码

假如在古代的扫瞄器里运转，那末B的10px上边距将会和父元素A的20px上边距堆叠起来，从而看起来就仿佛B没有上边距一样。就像后面说的那样，统一个blockformattingcontext中的垂直界限将被堆叠。那末分歧blockformattingcontext呢？
这类情形，假如不想加边框(border:1pxsolidtransparent;)办理的话，那末就必要A创建一个新的blockformattingcontext将B包裹起来，那末A的上边距和B的上边距就绝不干系了。能够用浮动，也能够加overflow，这要看详细情形。

12345678910

复制代码

[color=#009900][color=#000000][b]<html[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<head[color=#000000][b]>[/b][/color][/b][/color][color=#000000][b]</head[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<body[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<div[/b][/color][color=#000066]id[/color]=[color=#ff0000]"A"[/color][color=#000066]style[/color]=[color=#ff0000]"background:gray;margin-top:20px;overflow:auto;"[/color][color=#000000][b]>[/b][/color][/color][color=#009900][color=#000000][b]<div[/b][/color][color=#000066]id[/color]=[color=#ff0000]"B"[/color][color=#000066]style[/color]=[color=#ff0000]"margin-top:10px;"[/color][color=#000000][b]>[/b][/color][/color]我有10pxm-t[color=#009900][color=#000000][b]</div[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</div[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</body[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</html[color=#000000][b]>[/b][/color][/b][/color][/color]

复制代码

再一个例子，转头看下下面历程里如许的一句：除非创立一个新的blockformattingcontext，不然块级元素的结构不受浮动元素的影响。这是形成元素堆叠的缘故原由。好比上面的代码：

12345678910111213

复制代码

[color=#009900][color=#000000][b]<html[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<head[color=#000000][b]>[/b][/color][/b][/color][color=#000000][b]</head[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<body[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<div[/b][/color][color=#000066]id[/color]=[color=#ff0000]"A"[/color][color=#000066]style[/color]=[color=#ff0000]"background:gray;overflow:auto;"[/color][color=#000000][b]>[/b][/color][/color][color=#009900][color=#000000][b]<div[/b][/color][color=#000066]id[/color]=[color=#ff0000]"B"[/color][color=#000066]style[/color]=[color=#ff0000]"background:green;margin:10px10px00;float:right;"[/color][color=#000000][b]>[/b][/color][/color]浮动元素m_10_10_0_0[color=#009900][color=#000000][b]</div[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<div[/b][/color][color=#000066]id[/color]=[color=#ff0000]"C"[/color][color=#000066]style[/color]=[color=#ff0000]"background:red;"[/color][color=#000000][b]>[/b][/color][/color]一般流块[color=#009900][color=#000000][b]</div[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</div[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</body[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</html[color=#000000][b]>[/b][/color][/b][/color][/color]

复制代码

一般流块C在容器A里排布的时分，其实不受浮动元素的影响，乃至当浮动元素B不存在。可是假如C创立了新的blockformattingcontext，那末，一般流块c就会像linebox一样遭到浮动元素存在的影响而减少。

12345678910111213

复制代码

[color=#009900][color=#000000][b]<html[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<head[color=#000000][b]>[/b][/color][/b][/color][color=#000000][b]</head[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<body[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<div[/b][/color][color=#000066]id[/color]=[color=#ff0000]"A"[/color][color=#000066]style[/color]=[color=#ff0000]"background:gray;overflow:auto;"[/color][color=#000000][b]>[/b][/color][/color][color=#009900][color=#000000][b]<div[/b][/color][color=#000066]id[/color]=[color=#ff0000]"B"[/color][color=#000066]style[/color]=[color=#ff0000]"background:green;margin:10px10px00;float:right;"[/color][color=#000000][b]>[/b][/color][/color]浮动元素m_10_10_0_0[color=#009900][color=#000000][b]</div[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]<div[/b][/color][color=#000066]id[/color]=[color=#ff0000]"C"[/color][color=#000066]style[/color]=[color=#ff0000]"background:red;overflow:auto;"[/color][color=#000000][b]>[/b][/color][/color]一般流块[color=#009900][color=#000000][b]</div[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</div[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</body[color=#000000][b]>[/b][/color][/b][/color][/color][color=#009900][color=#000000][b]</html[color=#000000][b]>[/b][/color][/b][/color][/color]

复制代码

关于浮动和blockformattingcontext，brunildo.org上有一份不错的参考。
说了这么多了，实在观点仍旧能够很复杂。一般流仅仅只是一种定位的机制。而flow自己在尺度里也能够作为一个动词，就好像按按次一个个的拿出HTML元素然后放到页面上一样平常。只是要注重一下formattingcontext的观点，出格是blockformattingcontext，由于其影响更年夜(包含边距堆叠、浮动扫除、元素堆叠等)。
关于更多blockformattingcontext和例子，能够参看CSS101:BlockFormattingContexts大概ControlBlockFormattingContext。

　　写到这里也就差未几了，因为程度所限，如文中有不妥的地方，请指导下，十分感激。感谢浏览
　　原创。原文：http://www.swordair.com/blog/2010/08/415，转载请保存。
</p>
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

作者: 灵魂腐蚀 时间: 2015-1-17 21:28
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 仓酷云 时间: 2015-1-26 23:04
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 深爱那片海 时间: 2015-2-5 06:59
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 小魔女 时间: 2015-2-11 08:16
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 飘灵儿 时间: 2015-3-2 02:55
可以使用 CSS 检查工具进行设计。

作者: 爱飞 时间: 2015-3-11 04:44
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 海妖 时间: 2015-3-17 22:12
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 再现理想 时间: 2015-3-25 10:10
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

欢迎光临仓酷云 (http://ckuyun.com/)