您所在的位置： &
关于CSS的position属性的讨论
关于CSS的position属性的讨论
虽然笔者CSS水平很水，但是水不是不学好的理由。最近寒冬大哥针对面试发了一点“闹骚”，我们来看看他的微博是怎么说的呢？
面试的时候问个css的position属性能刷掉一半的人这是啥情况&&其实这问题我本来打算的是可以顺着一路扯到
normal flow、containing block、bfc、margin collapse，base line，writing mode，bidi，
这样一路问下去的，奈何第一个问题（亲我真的只问了position有哪些取值和行为啊）就悲剧了&&
position属性常用的取值static、relative以及absolute和它们的基本行为是每个前端都应该掌握的。这包括relative和absolute的定位原点。
fixed旧版本IE不支持，但是一个对技术有热情的工程师也是应该了解的。
有过研究工程师可以知道absolute的containing block计算方式跟正常流不同，当然如果没读过标准的话，表述方式不一定是这样。
对CSS布局有深入研究的工程师会知道position跟display、margin collapse、overflow、float这些特性相互叠加后的行为。
说句老实话，在状态好的情况下，若是被问到这个题，我还能和他说道说道（很浅的那种），在状态一般的情况下，我估计自己也直接悲剧了，那造成这个的是什么原因呢？
答案毫无疑问的是我CSS水平是很水的，当项目经验不够的情况下，看书是不能记住一些东西的，所以还是需要项目实践。
于是抱着我水我自豪的态度，我来试试他这道题水到底有多深，居然会刷掉一半的人。
这个题若是单纯提出position的几个属性，倒没什么问题，但我们来看看他的发散：
normal flow（一般流）
containing block（包含块）
bfc（我深刻的意识到我一定见过他，但可耻的忘的一干二净了！）
margin collapse（搞不懂啊，应该是float引起的元素坍塌吧？）
base line （基线对齐）
后面的就完全没有印象了，完了我想说，大哥我们能说中文吗。。。至少给点解释吧，对于css菜鸟来说看题目都很吃力的。。。。（掩面而泣）
仔细阅读题目并加以分析后，你会发现他这潭水是很深的，这道题快5分钟可结束，慢可问上半个小时，而且问完了CSS都可以忽略不计了。。。
为什么这么说呢？
① position主要用于页面布局，对css布局熟悉的朋友能很好的运用他布局，甚至抛弃float那个魔鬼（昨天我做了一道面试题就不用float布局，因为float本身是不用于布局的，这么做的大哥，我不知道对不对，但我认为既然float不应该用于布局，我们便应该下意识的少用）。
② 在他发散过程中由将块级元素与行内元素提到了，甚至细分到了行内元素的垂直对齐方式，更有可能发散到line-height上面，不可谓不深啊！
③ 在以上能做好的都已经不错了，然后这道题更是可以细致到各种应用细节，比如在IE7一下浏览器使用relative的z-index会有什么问题，比如在布局上你会使用float吗，float为什么会引起元素坍塌，你如何解决元素坍塌......
然后的然后，他这道题真的发散开了就很大了，对于我这种水货来说，看不懂啊，于是便只能在自己理解的方面做下说明，于是我们开始吧！
基本视觉格式化
凡是不能一蹴而就，我们一步步来，先了解点基础的东西吧
我们在使用CSS过程中会发现很多&怪异&的现象，如果我们掌握了CSS中视觉表现模型是如何工作的了，那么是不是会更加接近真理呢？
CSS假定每个元素都有一个基本框，这个矩形框便是我们所说的元素框（在CSS3出现后圆形、团原型也不是不可能哦）
各个元素框中心有一个内容区（content area），这个内容区域会有以下属性：内边距，外边距，边框。我这里又引用下其他大哥的图吧：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/wyfs01/M00/09/F7/wKioOVGZ1TvRufcKAAAokcNg97Q954.jpg" alt="" />
498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/wyfs01/M00/09/F2/wKioJlGZ1Tvyzz16AABcv7tUQCo455.jpg" alt="" />
因为每个元素都相对于其它包含块摆放，所以包含块就是一个元素的&布局上下文&，
&&&&&&&&&&&&&&&&&&&&&&&&&&&刀狂剑痴叶小钗&&&&&&&&
在这个例子里面，p的包含块便是div（包含块由最近的块级元素担当），所以p元素依赖于div布局，div依赖于body，行内元素摆放于包含块没什么关系。
块级元素很霸道，会独占一行作为自己的王国，一般一个元素的width被定义为从做内边距到右内边距的距离（IE6对盒模型解释有误）。margin、padding、width、height可以确定文档布局。
多数情况下文档高宽我们不太关心，宽度一般会铺满浏览器，高度会自己延生。
水平格式化
&style=&width:&200&padding:&10&margin:&20&&&&&&刀狂剑痴叶小钗&
本来p元素宽度是200，但是由于padding问题宽度就变为220了，外边距再延生40，所以整个宽度就是260了，这样便隐式的增加了width的值！
但是，其右边距却不是20，因为CSS还有一个规则：正常流块级元素的margin，width，padding，border之和必须等于包含块的内容区域，所以右边距会被重置为auto。
所以我们要将一个元素居中会这样设置
&style=&margin:&0&&&
在宽度确定的情况下，做外边距与右外边距的值会被设置为相等的值（IE6忽视之，他会将之设置为0）。
由于margin可以被设置为负值，所以整个情况又会变得比较复杂，因为按照我们上面的规则，width便有可能超过其包含块！！！
&style=&&margin:&20px&&width:&300&background:&&padding:&10&&&&&&&style=&&&background-color:&O&&&&&&&&&&刀狂剑痴叶小钗&&&style=&&margin:&20px&&width:&300&background:&&padding:&10&&&&&&&style=&&&background-color:&O&margin:&0&-20&&&&&&&&&&刀狂剑痴叶小钗&&
498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/wyfs01/M00/09/F7/wKioOVGZ1TvResJvAAA9wtm-xeQ490.jpg" alt="" />
所以，我们平时操作负边距时候，其实是增加了高宽，若是高宽确定的情况下，那边是其他几个属性被增加了，带来了元素移动的错觉。
垂直格式化
块级元素的高度默认由其内容决定，我们可以为元素显示设置高度，但是这样的话，元素框便不会自动增加了。
在水平情况下设置auto后，会取相同的值，当在垂直情况下，情况有所不同，margin: auto 0;这种情况下，上下外边距会被重置为0，元素框失去了外边距（定位元素有所不同）。
&style=&&margin:&20px&&width:&300&height:&200&background:&&padding:&10&position:&&&&&&&&style=&&&background-color:&O&width:&130&height:&20&margin:&&position:&&&&&&&&&&&&刀狂剑痴叶小钗&&
498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/wyfs01/M01/09/F7/wKioOVGZ1TuS_LmvAABYcH21sLQ868.jpg" alt="" />
外边距合并
外边距合并的问题大家都知道，上下外边距会发生合并现象，但是有种情况会让事情变得比较复杂：
&xmlns=&http://www.w3.org/1999/xhtml&&&&&&&&&&&&&&&&type=&text/css&&&&&&&&&&&body&{&background:&#ECECEC;&}&&&&&&&&&&.outer&{&background:&&border:&1px&solid&#CCCCCC;&width:&300&}&&&&&&&&&&.inner&{&margin:&10&padding:&8&background:&none&repeat&scroll&0&0&#1C87D5;&color:&}&&&&&&&&&&&&&&&&&class=&outer&&&&&&&&&&&&class=&inner&&&&&&&&&&&&&&&来个测试走&&&&&&&&&&&
498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/wyfs01/M01/09/F2/wKioJlGZ1Tvw6sVEAAAWFw7-7qY089.jpg" alt="" />
若是我们将代码做一点改变：&将外层元素border&去掉；那么。。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/wyfs01/M00/09/F2/wKioJlGZ1TvSZCPIAAAVGuTDTS4360.jpg" alt="" />
他这种合并方法就彻底让我傻眼了。。。。。
行内元素的布局比块级元素要复杂，我们使用块级元素布局，所以会比较重视，但是往往忽略行内元素的布局，这是会吃亏的。。。我们来看一个例子：
&style=&margin:&20px&&width:&300&height:&200&background:&&padding:&10&&&&&&&&style=&&border:&1px&dashed&&&&&&&&&&&刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗&&&&&&&
498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/wyfs01/M01/09/F7/wKioOVGZ1TuDJmjdAAA1NIoUGlk060.jpg" alt="" style="font-family: 'Courier New', font-size: 12" />
行内元素和块级元素表现有很多不同，以上只是一个开始，我们来捋一捋，行内元素都有些什么东东：
匿名文本：&未被包含在行内元素的字符串&&em框：&em框在字体中定义，也被称为字符狂&&内容区：&内容区可以是元素中各个字符的em框串在一起构成的框，也可以由元素中字符字形描述的框。&&行间距：&font-size与line-height之差/2便是行间距&&行内框：&通过向内容区增加行间距来描述，对于非替换元素行内框刚好等于line-height&&行框：&这是包含该行中出现的行内框的最高点和最低点的最小框，意思是行框上边界要高于最高行内框，最低也要大于最低的行内框&
所以说行内元素坑坑爹呢，他的东西多着呢。。。
行内格式化
所有元素都有一个line-height属性，这个值会显著的影响行内元素显示，行高由其组成元素和其他内容（如文本）高度确定。
注意：line-height实际只影响行内元素和其他行内内容，不会影响到块级元素（至少不直接影响）
首先，对于行内元素来说，font-size确定了内容区的高度，如果一个元素的font-size是15px，那么内容区高度便是15px，因为所有元素的em框都是15px。
如果一个行内元素的font-size为15px，line-height为21px，相差的6px便是行间距，由此行内框形成：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/wyfs01/M00/09/F7/wKioOVGZ1TvwgQ40AAAjEAi0LAQ587.jpg" alt="" />
但是有一个场景又会让整个发展变得扑朔迷离：
&style=&line-height:&12&font-size:&12&margin:&20px&&&background:&&&&&&&刀狂剑痴叶小钗&style=&&font-size:&24&刀狂剑痴叶小钗刀狂剑痴叶小钗&&
498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/wyfs01/M00/09/F2/wKioJlGZ1TvzoZs7AAASQRjAyfY437.jpg" alt="" />
对于匿名文本来说，内容高度没有变化，半间距为0，但是对于span来说，line-height减去font-size后我们得到的半间距为-6，所以其行内框依旧是12px，内容区却大了出来。
vertical-align
margin的方式不能垂直对齐，行内元素便提供了vertical-align属性：
top&将元素行内框的顶端与包含该元素的行框的顶端对齐&&bottom&将元素行内框的低端与包含该元素的行框的底端对齐&&text-top&将元素行内框的顶端与父元素内容区的顶端对齐&&text-bottom&将元素行内框的底端与父元素内容区的底端对齐&&middle&将元素行内框的垂直中点与父元素基线上0.5ex处一点对齐&
补充知识（）
498)this.width=498;' onmousewheel = 'javascript:return big(this)' title="英语本子的各条线" src="/wyfs01/M01/09/F2/wKioJlGZ1Tvi3gkOAAAnYntU0zs455.jpg" alt="英语本子的各条线" />
浮动和定位
经过以上的知识，我们知道了，所有文档元素都有一个框！被称为元素框，它描述了一个元素在文档布局中所占空间大小，所以框与框之间是会互相影响的。
接下来我们进入本文重点，浮动与定位，以现在的布局来说，说白了就是浮动和定位，所以掌握了他们就是掌握了布局。
float是个奇怪的东东，他最开始的提出是用作让图片浮动，以便文字能围绕着图片书写，仅此而已！
所以我们来看看float这个让人又爱又恨的家伙都干了些什么？？？
浮动元素会以莫种方式从文档的正常流中删除，他是他还是对文档布局有一定影响
我们使用float浮动做了很多其本职工作以外的事情，于是我们会混淆，我们会回看不清float真正的面目。浮动真正的意义在哪里呢？要知道这个问题的答案很简单，假设现在CSS中没有浮动(float)属性，那么会变成一个什么样子。我们会发现，目前流行采用浮动方法实现的无论是分栏布局，还是列表排列我们都可以用其他一些CSS属性（不考虑table）代替实现，唯一一个实现不了的就是&文字环绕图片&，我是想不出来能有什么方法可以让文字环绕图片显示。好，这个替代不了的作用才是float真正的意义所在
看看以上说法，他这个是非常有意义的，我们回过头来一看，好像确实是这么回事的，float真的干了很多不该干的事情呢，所以我们的布局才有那么多莫名其妙的BUG。
float的内幕
在详细了解他之前，我们看一看包含块（containing block），浮动元素的包含块是最接近的块级祖先元素：
dssd&&style=&&float:&&&&ssd&
img的包含块就是最近的p标签，然后浮动元素会生成一个块级框（inline元素也会），其实我们可以认为float就是不带方向性的inline-block（事实上这是非常错误的认识）。
浮动元素的摆放有许多规则
① 浮动元素不能超过包含块的边距
② 浮动元素的左右外边距必须是源文档中之前出现的左浮动元素的右外边距（这句话我不太理解，我们下来看看）
③ 左浮动元素不会出现在右浮动元素的右边
④ 浮动元素的顶端不能比其父元素的内顶端还高
⑤ 浮动元素的顶端不能比之前所有浮动元素或者块级元素的顶端更高
⑥ 源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含块元素所生成框的任何行高还高
⑦ .......
后面还有几个规则呢，我这里都不想写了，说实话我看着这么多规则第一映像就不想用这个属性了。。。
float我们都&比较&熟悉，所以对他的表现一般还是抓得准的，因为我们认为其实带方向的inline-block，于是我们来看看浮动的破坏性。
inline boxes
行内元素会生成一个叫行内框的东西，前面我们已经知道了
在containing boxes中，一个个inline boxes组成了line boxs(行框)，这是浮动影响布局的关键box类型
content area 内容区是一种围绕文字看不见的box，大小就是font-size
在张鑫旭大哥的博客中有两张很有意思的图，我这里拿来主义搞来看看
498)this.width=498;' onmousewheel = 'javascript:return big(this)' title="默认图文line boxes示意 &&
张鑫旭-鑫空间-鑫生活" src="/wyfs01/M00/09/F7/wKioOVGZ1TvDM5EwAABf3rJZNUE424.jpg" alt="" />
498)this.width=498;' onmousewheel = 'javascript:return big(this)' title="浮动属性图片与文字的排列 &&
张鑫旭-鑫空间-鑫生活" src="/wyfs01/M01/09/F7/wKioOVGZ1TzBhf60AAA5VH7NCXo665.jpg" alt="浮动图文布局 &&
张鑫旭-鑫空间-鑫生活" />
按照此图的研究，得出了以下结果：
图片为一个inline boxes，文字也是inline boxes，行高（line boxes）是由其内部最高的inline boxes高度决定的所以行高这里便是图片的高度
此时图片与文字是同一box类型的元素，在同一行上，所以这里他们是对齐的
但是，float图片后会有意想不到的变化
我们看到第二张图，float破坏了图片的inline boxes，图片的inline boxes米有了！当图片失去inline boxes特性时就无法与inline boxes文字在一起了，他们已经不是一个家庭的人了。。图片于是靠边站了（float带给元素的是降级啊）在CSS中所有高度都是由CSS模型产生的：box盒模型，line box 模型（line-height），inline boxes直接受控于line-height真正的高度则是由每行的inline boxes组成的line boxes，而每行的line boxes高度垂直堆叠形成了containing box的高度所以，没了inline boxes的意思就是没了高度，就跟男人没有鸟是一个道理的。float就恰恰干了这种事情。。。。直接把人家的inline boxes给搞了，让别人没了高度
所以，float可以让文字围绕着图片，因为图片没有了高度，但是他是有宽度的哟，元素没有了高度就会造成另一个事实：父级块级元素高度塌陷！我们想想块级元素里面都没有高度了，他塌陷是非常合理的啊！所以我们又会搞很多事情来清除浮动带来的高度塌陷。所以我们一伙布局可以尽量的少使用float，让他干他本质的事情吧，因为想做太监的人也不多。。。
Position登场
最后，标题的主角终于登场了，写到这里我其实都没什么想说了，也不太说得出来了。。。。这就是舍本逐末吧！
首先position有几个属性呢？这个问题我承认有一点白痴。
其实对于position来说，他的东西是很简单的，用来用去就那么几个场景，操作的是块级元素，很单一的。所以我们来看看本篇开始提出的问题
① relative与absolute的定位原点，无图无真相，为了解决这个问题，我们写个例子
&!DOCTYPE&html&&xmlns=&http://www.w3.org/1999/xhtml&&&&&&&&&&&&&&&&&&&&&*&{&margin:&0;&padding:&0;&}&&&&&&&&&&&&&&&&&&&&&块级元素&&&&&&style=&margin:&20px&&width:&300&height:&200&background:&&padding:&10&&&&&&&&&position:&&&&&&&&&&&&style=&background-color:&O&width:&130&height:&20&margin:&&position:&&&&&&&&&&&&&&&刀狂剑痴叶小钗&&&&&&&&&&&&&&&&&&&&&&&&&&&&行内元素&&style=&line-height:&12&font-size:&12&margin:&20px&&&background:&&position:&&&&&&&刀狂剑痴叶小钗&style=&&font-size:&24&刀狂剑痴叶小钗刀狂剑痴叶小钗&&&&style=&&position:&&dssd&&style=&&float:&&&&ssd&&&&&
498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/wyfs01/M01/09/F2/wKioJlGZ1TyRJ72LAAAu9_6HZLU954.jpg" alt="" />
可以看到，在不指定left与top的情况下，其默认是按照一般流的方式布局的。事实上我刚刚那句话是错的！
对于absolute定位的元素，在默认情况下，他之前的对他没有任何影响，但是他之后的东西我们可以看到，事实上会覆盖他的位置的，其实也不是覆盖他的位置了，说明他的原点就在那里只不过他就跟float元素似的没有了高度，最后连宽也没有了。。。
② IE6中的fixed属性，对于这个东东我还确实没有做过处理，但是应该是使用js控制的，他这个就有个效果上的问题，肯定会发生抖动的。
但是经过资料查询发现IE6下用CSS也可以实现的
解决方案：CSS表达式应该避免，因为会很大的托坏效率，所以还是建议使用js
1.将body元素中添加_background-attachment: _background-image:url(about:blank);这两个属性，由于这个问题只在可耻的IE6下，所以就针对IE6写个hack。
2.将需要用固定定位的元素中加上_position: _top:expression(offsetParent.scrollTop); _left:expression(offsetParent.scrollLeft);这个3个属性。
3._top:expression((offsetParent.scrollTop)+50); 这样后面的数字就是你需要的设置的距离。
这个问题，我个人认为意义真不大，因为我最近的公司直接抛弃IE8了何况IE6呢，中国的这些大爷还真不能太娇惯了。。。
PS:一件可耻的事情就是，这种情况下margin:可以实现垂直居中的目的。。
&style=&margin:&20px&&width:&300&height:&200&background:&&padding:&10&&&&&position:&&&&&&&&style=&background-color:&O&top:&0;&bottom:&0;&height:&20&margin:&auto&0;&&&&&&&&&position:&&&&&&&&&&&垂直居中&&&&&&&
498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/wyfs01/M00/09/F2/wKioJlGZ1TyBF3NmAAANaPS68rM230.jpg" alt="" />
③ BFC（可耻的我最后发现我没有将他。。。）
什么是BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同一个BFC内的元素有效。
可悲的就是就算读者这个解释我依旧不知道他是干什么的。。。。这里我可耻的给跪了。。。留待以后解决吧。
我发现自己是标题党！前前后后扯了这么远，居然最后也没有对题目做出正面回答，原因是什么这里我不说了，你懂的（见第一段话）！
不正面回答其实原因有几个，第一是我还真没完全理解题目要问什么，第二就是对于发散的那些名词我可耻的也不是全懂。。。
所以我若是去面试铁定悲剧，所以CSS还是需要好好的大力的学习啊！！！！！
原文链接：
【责任编辑： TEL：（010）】
关于的更多文章
IE浏览器不支持很多CSS属性是出了名的，即便在支持的部分中，也
本次的专刊为大家提供了Oracle最新推出的Java SE 8详细的开发教程，从解读到探究Java 8最新
总结一下Java I/O文件读写基本类相关知识和概念。对于
今天是被国际上众多科技公司和软件企业承认的业内人士
互联网一大真理便是，有痛点的地方就有机会。现在最想
信息安全风险评估理论研究日趋成熟，相关资料比较充分，但有关评估实际工作的参考资料很少。本书以信息安全风险评估实践为基础，
51CTO旗下网站【总结】CSS努力学习ing2
CSS中,一个独立盒子模型由content(内容),border(边框),padding(内边距),margin(外边距)组成.
一个盒子实际所占用的宽度(或高度)是由"内容+内边距+边框+外边距"组成的.在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小.事实上所有的网页元素本质上都是以盒子的形式存在的.在人的眼中,一个网页上有各种内容,包括文本,图像等,而在浏览器看来,就是许多盒子排列在一起或者相互嵌套.
边框(border)
border的属性主要有3个,分别式color(颜色),width(粗细),style(样式).
border-color指定border的颜色.
border-width指定border的粗细,可以设置为thin,medium,thick和&length&,其中&length&表示具体的数值,例如5px和0.1in等.width的默认值为"medium",一般浏览器将其解析为2px宽
border-style
指定border的样式,可以设为none,hidden,dotted,dashed,solid,等,其中none和hidden都不显示border,二者效果完全相同,只是运用在表格中时,hidden可以解决边框冲突.
内边距(padding)
用于控制内容与边框之间的距离.当盒子设置了背景图像后,默认情况下背景图像覆盖的范围是padding和内容组成的范围,并以padding的左上角为基准点平铺背景图像.
外边距(margin)
指的是元素与元素之间的距离,可以看到边框在默认情况下会定位于浏览器窗口的左上角,但是没有紧贴着浏览器窗口的边框,这是因为body本身也是一个盒子.body这个盒子的宽度不是由其内部的内容决定的,而是由浏览器窗口决定的.
&&&&width:150
&&&&height:150
&&&&border:10px
&&&&background:
&&&&padding-left:10
&&&&margin-top:10
宽为150px,高为150px,四个黑色的实心边框,背景为蓝色.内容距离左边框为10px.,盒子距离body上边框为10px.
DOM是documen object
model的缩写,即"文档对象模型".一个网页的所有元素组织在一起,就构成了一棵"DOM树".
块级元素(block level)
它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满.
&div&(division)就是一个区块容器标记,相当于一个容器.声明时只需要对&div&进行相应的控制,其中的各标记元素都会随之改变,ul也是块级元素,不同在于ul是一个具有特殊含义的块级元素,具有一定逻辑语义,而div是一个通用的块级元素,用它可以容纳各种元素,方便排版.
行内元素(inline)
对于文字这类元素,各个字母之间横向排列,到最右端自动折行.
&span&与&div&标记作为容器标记而被广泛应用在HTML语言中,区别在于&div&是块级元素.它包含的元素会自动换行.&span&是行内元素,在它的前后不会换行,&span&没有结构上的意义,纯粹是应用样式,当其它行内元素都不合适时,就可以使用&span&元素.
span{width:30
hight:30background:}
span.left{margin-left:20background:}
span.right{margin-right
:30background:}
&span&蓝色&span
class="right"&黄色&/span&&span
class="left"&红色&/span&蓝色&\span&
中间相隔50px.
如果不是行内元素,而是竖直排列的块级元素,情况会有所不同,两个块级元素之间的距离不是margin-bottom与margin-top的总和,而是两者中的较大者.这种现象称为margin的"塌陷"现象,意思是说较小的margin塌陷到了较大的margin中.
div{width:50hight:30border:1px
style="margin-bottom:10"&块元素1&/div&
style="margin-top:5"&块元素2&/div&
盒子1与盒子2的上下距离为10px
嵌套盒子之间的margin
当一个&div&块包含另一个&div&块中时,便形成了典型的父子关系,其中子块的margin将以父块的content为参考.
div.father{width:50hight:30border:1px
div.son{width:20hight:20border:1px
margin-top:2margin-left:3px}
class="father"&&div
class="son"&&/div&&/div&
子盒子距离父盒子上边框为2px,左边框为3px.倘若子元素的margin的值超过了父元素的高度,IE浏览器会将父元素的heigh自动扩大,而firefox则不会.
将margin设置为负数
span.left{margin-left:20background:}
span.right{margin-right
:-25background:}
class="right"&黄色&/span&&span
class="left"&红色&/span&
右边的块会移动到左边的块上方,形成重叠的位置关系.
当块之间式父子关系时,通过设置子块的margin参数为负数,可以将子块从父块中分离出来.
div{width:50height:50border:1px
margin-left:50}
div.son{width:20height:20border:1px
margin-left:-10}
class="son"&&/div&&/div&
子div飘出父div的左边框10px距离.标准文档流简称为"标准流",所谓标准流,就是指在不使用其它的与排列和定位相关的特殊CSS规则时,各种元素的排列规则.
盒子的浮动
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界.而在竖直方向和兄弟元素依次排列,不能并排.CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来确定.
body{margin:15font-family:Afont-size:12}
.father{background:#ffff99;border:1px
solid #111111;padding:5}
div{padding:10margin:15border:1px dashed
#111111;background-color:#90}
.father p{border:1px
dashed #111111;background-color:#ff90}
class="father"&&div
class="son1"&BOX1&/div&
class="son2"&BOX2&/div&
class="son3"&BOX3&/div&
class="clera"&&/div&
&p&文字&/p&&/div&&/body&
如果.son1{float:}
标准流中的BOX2文字在围绕着BOX1排列,而此时BOX1的宽度不再伸展,而只能容纳下内容最小宽度..此时BOX1已经脱离标准流,标准流中的BOX2会顶到原来BOX1的位置,而文字会围绕BOX1排列.
如果.son1{float:}
.son2{float:} .son3{float:}
文字的左右两侧同时围绕着浮动的盒子.
clear属性清除浮动的影响.left清除左边,right清除右边both同时清除左右两边影响.
一个div的范围是由它里面的标准流内容决定的,与里面的浮动内容无关.如果要使父div的范围包含浮动盒子.必须添加以下代码.
.clear{margin:0;padding:0;border:0;clear:}
父div内添加&div
class="clear"&&/div&
这个div因为没有浮动,所以为标准流,加之清除左右影响,此时父div就以此div进行排版.
盒子的定位
在CSS中有一个非常重要的属性position 有四个属性值.
static(静态定位)
static为默认值,也就是该盒子按照标准流(包括浮动方式)进行布局.
relative(相对定位)
使用相当定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对与它在原本的标准位置偏移指定的距离,相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它
body{margin:20font-family:"宋体";font-size:12}
#father{background-color:#a0c8border:1px
dashed #000000;padding:15}
div{background-color:#ff0border:1px dashed
#000000;padding:10}
#block1{position:bottom:30right:30}
#block2{position:top:30left:30}
id="father"&&div
id="block1"&&/div&&div
id="block2"&&/div&&/div&
使用相对定位的盒子,会相对于它在原本的位置,通过偏移指定的距离,到达新的位置.
使用相对定位的盒子仍在标准流中,它对父块和兄弟盒子没有任何影响.它旁边的盒子仍然以为它还在原来的位置.
absolute(绝对定位)
盒子的位置以它的包含框为基准进行偏移.绝对定位的盒子从标准流中脱离.这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样.
body{margin:20font-family:"宋体";font-size:12}
#father{background-color:#a0c8border:1px
dashed #000000;padding:15}
div{background-color:#ff0border:1px dashed
#000000;padding:10}
#block1{position:top:0right:0}
&body&&div
id="father"&&div
id="block1"&&/div&&/div&
绝对定位的盒子以它的最近的一个"已经定位"的"祖先元素"为基准进行偏移.如果没有已经定位的祖先元素,那么浏览器窗口为基准进行定位.
在#father中加入position:relative 祖先#father
div已经设置position属性.并且符合最近要求.
补充IE6中有一个错误.以上使用右边框定位,如果换成用左边框来定位,错误的位置和正确的位置相差了父div的padding的宽度.这是IE6中的固有错误,解决方法就是给父div(定位的基准盒子)增加一条CSS样式.
height:1%;
body{margin:0} #outerBox{width:200height:100margin:10px
background:}
#innerBox{position:top:70width:100height:50background:}
id="outerBox"&&div
id="innerBox"&&/div&&/div&
外面的盒子没有设置position属性,内部的盒子设置了绝对定位,但是只在竖直方向指定了偏移量,没有指定水平方向的偏移量.那么水平方向它仍然会保持原来应该在的位置.这个性质可以用于需要使某个元素脱离标准流,而仍然希望它保持在原来的位置的情况.
fixed(固定定位)
它和绝对定位类似,只是以浏览器窗口为基准进行定位,也就是当拖动浏览器窗口的滚动条时,依然保持对象位置不变.IE6不支持固定定位
z-index空间位置
用于调整定位时重叠块的上下位置,与它的名称一样,想象页面为x-y轴,垂直于页面的方向为z轴,z-index值大的页面位于其值小的上方.z-index属性的值为整数,可以是正数也可以是负数.当块被设置了position属性时,该值便可设置各块之间的重叠高低关系.默认的z-index值为0,当两个块的z-index值一样时,将保持原有的高低覆盖关系.
盒子的display属性
style="display:inline"&box1&/div&&div
style="display:inline"&box2&/div&块级变行内
style="display:block"&box3&/div&&span
style="display:block"&box&/div&行内变块级
style="display:none"&box&/div&&span
style="display:none"&box&/span&元素隐藏消失
设置字体 通过font-family属性来控制.
font-family:Arial,"Times New Roman";
同时声明两个字体名称,其意告诉浏览器首先在访问者的计算机中寻找Arial字体.如果该访问者的计算机中没有Arial字体,就寻找Times
New Roman.如果这两种字体都没有,则使用浏览器的默认字体.
同时声明多种字体,字体之间用逗号分隔开.另外,一些字体的名称中间会出现空格,例如上面的Times New
Roman,这时需要用双引号将其引起来,使浏览器知道这是一种字体.
字体大小 通过font-size属性来设置. font-size:12
代码中的px是一个长度单位,表示在浏览器上1个像素的大小.因为不同访问者的显示器的分辨率不同,而且每个像素的实际大小也不同,所以px称为相对单位,也就是相对于1个像素的比例.
以下5种单位称为绝对长度单位,它们不会随显示器的变化而变化.
in(英寸),cm(厘米),mm(毫米),pt(印刷的点数,一般显示器中1pt相对于1/72inch),pc(1pc=12pt)
此为还有两个比较特殊的长度单位:em和ex.它们与px类似,也是相对长度单位.1em表示的长度式其父元素中字母m的标准宽度,1ex则表示字母x的标准高度.当父元素的字体大小变化时.使用这两个单位的子元素的大小会同比例变化.font-size:3
font-size:200%; 表示文字的大小为原来的两倍.
line-height的值表示两行文字之间基线的距离.也就是每行文字的高度.如果给文字加上下划线,下划线的位置就是文字的基线.
line-height:18 行高为18px line-height:1.5; 行高为字体大小的比值.
字体 大小 行高,组合在一条CSS规则中 font:12px/18px A 注意:字体与行高用斜线隔开
设置颜色 颜色统一采用RGB格式,也就是"红绿蓝"三原色模式.比如"#FFFFFF"
就是十六进制的表示方法,前两位为红色分量,中间两位是绿色分量,最后两位为蓝色分量.color:#FFFFFF;
字体加粗 font-weight: 正常 font-weight:
text-decorations属性实现.underline(下划线),overline(顶划线),line-through(删除线)
对齐 text-align 属性实现 justify(两端对齐),
段首缩进 text-indent属性设置 直接将缩进距离作为数据即可.对于中文网页.设置2em
如果要使方框中的文字竖直方向居中对齐,就要使用CSS用于竖直对齐的属性vertical-align
在目前浏览器中,只能用于表格单元格中的对象竖直方向对齐,而对于一般块级元素,无效.
CSS图像样式
作为单独的图片,虽然它本身的很多属性都可以直接在HTML中进行调整,但是通过CSS统一管理,不但可以更加精确地调整图片的各种属性,还可以实现很多特殊的效果.例如:
img{border:1 margin:10px 10px 10px
0padding:5float:}
在CSS中可以设置图像的高度和宽度,同样是使用盒子模型中统一的height和width属性,
设置时可以使用具体长度如100px,也可以使用相对比例如70%
设置背景图片 background-image:url(bg.gif);
在默认情况下,图像会自动向水平和竖直两个方向平铺.如果不希望平铺,或者只希望沿着一个方向平铺,可以使用background-repeat属性控制
&&&&沿水平和竖直两个方向平铺(默认值)
&&&&no-repeat
不平铺,即只显示一次
repeat-x&&&&只沿水平方向平铺&&&&&&&&&&&&&&&&&&&&repeat-y&&&&
只沿竖直方向平铺
如:background-repeat:repeat-x; 背景图片只沿着水平方向平铺.
同时设置背景图像和背景颜色
这样背景图像覆盖的地方就显示背景图像,没有覆盖的地方就按照设置的背景颜色显示
背景样式属性的简写&&&&background:
#FFFFFF url(bg.gif) repeat-x;
标题的图像替换
由于文字的显示字体依赖于访问者的计算机系统情况,因此在使用字体的时候要特别谨慎,防止使用大多数浏览器没有的字体.为了美观的要求,需要使用图像来代替文本,然而从另外的角度考虑,为了便于搜索引擎理解和收录网站,也为了以后维护的考虑,把图像直接以&img&标记的方式嵌入到网页中也不是一个好办法.因此,一些CSS设计师发明了"图像替换"的方法来解决这个问题.其核心思想是使HTML中的文字仍以文本形式存在,便于维护页面的内容和结构完整性,然后通过CSS使文字不显示在页面上,而使图片以背景图像的形式出现,这样访问者看到的就是美观的图像了.
有种方法就是在标题标记内部,加入一对空的&span&&/span&标记
这对标记没有实际的语义作用,仅作为一个CSS"钩子",用于设置背景图像.
&h1&&span&文字&/span&&/h1&
样式设置如下:
h1{background:url(bg.gif) no-
height:60}
span{display:}
但是由于这种方法是通过display属性把文字隐藏起来,会导致"非屏幕浏览器"包括为盲人设计的阅读器无法正确的读取网页文字.
为了避免这种情况的出现,还可以通过对span元素使用绝对定位,将图像覆盖在文字的上面,这样即使关闭了CSS仍然可以看到文本标题,这个方法的缺陷式,标题图像不能使用透明的图像,否则会露出文字.
图像投影效果
滑动门技术
.shadow{float:background:url(bottom-right.gif)
div{background:url(top-left.gif) no- padding:0 6px 6px
.shadow img{border:1px
solid #000; padding:4}
class="shadow"&&div&&img
src="image.gif"/&&/div&&/div&
GIF格式阴影图像的效果比较差,而如果使用Alpha透明的PNG格式阴影图像,无论页面什么背景颜色,都可以很好的显示阴影效果.
IE6并不支持PNG格式的Alpha透明,直到IE7才支持.如果要在IE6中也显示柔边的阴影效果,就需要用到IE专用的一套CSS滤镜了,这些滤镜都不是CSS规范中定义的,只是IE6自己扩展的,因此一般情况下,做网页都不使用它们.
条件注释 &!- -[if gte ie
6]& &![endif]- -&
起作用是当浏览器是IE,并且在IE6以上,就会有效.
超链接特效
在HTML语言中,超链接是标记&a&来实现的,链接地址则是利用&a&标记的href属性实现.
&&&&超链接的普通样式,即正常浏览状态的样式
a:visited&&&&被点击过的超链接的样式
a:hover&&&&鼠标指针经过超链接上时的样式
a:active&&&&在超链接上单击时,即"当前激活"时,
对于这4个伪类别,要注意它们的声明顺序.例如,为了使平常状态超链接取消下划线,而在鼠标指针经过时出现下划线,可以如下设置:
a:link, a:visited
{text-decoration:}
a:hover, a:active
{text-decoration:}
但是如果交换上面两行代码的顺序,对鼠标指针经过时的设置将不会产生效果.这里是由于前面讲过的"层叠"的原有,上面的CSS规则具有相同的特殊性,因此后面的规则将覆盖前面的规则,要按照上面的顺序来进行设置.
设置的都是链接在没有鼠标经过时的效果.区别在于:一个a标记没有设置跳转地址(即href属性)时,如果设置a:link则无效,而设置a则仍然有效.在实际工作中,经常使用:
a, a:visited
{text-decoration:}
当前激活状态a:active
一般被显示的情况非常少,因此很少使用.因为当浏览者单击一个超链接后,焦点很容易就会从这个链接上转移到其它地方,例如新打开的窗口等,此时该超链接就不再是"当前激活"状态了.因此,通常无需设置a:active的样式.
CSS控制鼠标指针
cursor属性可以在任何标记里使用,从而可以改变各种页面元素的鼠标指针效果. 如:
&&&&pointer通常显示为手的形状,
鼠标指针经过超链接时的形状.
传统的HTML语言提供了项目列表的基本功能,包括顺序式列表的&ol&标记和无顺序列表的&ul&标记等.当引入CSS后,项目列表被赋予了很多新的属性,甚至超越它最初设计时的功能.
ul{list-style-type:}
li.special{list-style-type:circle}
&ul&&li&奥迪&/li&&li
class="special"&宝马&/li&&li&奔驰&/li&&/ul&
disc实心圆 circle空心圆
square正方形decimal数字upper-alpha大写字母lower-alpha小写
list-style-image:url(image.jpg);
项目符号显示为任意图片
list-style-type:&&&&
不显示项目符号
特别说明的是display:语句,通过该语句,超链接被设置成了块元素.当鼠标指针进入该块的任何部分时都会被激活,而不是仅在文字上方时才被激活.但是在IE6中,虽然把链接设置成了块级元素,但是仍然只有在鼠标指针经过文字时,才能触发鼠标经过效果.解决办法:
a{height:1}
这样可强制浏览器重新计算响应鼠标指针的范围,从而得到正确的结果.
&table&用于定义整个表格,&tr&定义一行,&td&定义一个单元格.&caption&定义表格大标题.
&th&,它是table header
的缩写,即表头的意思.在表格中主要用于行或者列的名称.实际上&th&和&td&是很相似的,主要是可以分别对它们进行设置样式.
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。