posts - 110,  comments - 152,  trackbacks - 0

CSS的继承与层叠


看两个例子就明白了。
<省去一些显而易见的代码,表义为主.>
第一个例子:
body{color:red;}
<body>
段落1
<p>段落2</p>
</body>
这里面段落1,段落2字体颜色全部是红色.显然p继承了body的color样式。

第二个例子:
body{color:red;}
p{color:green;}
<body>
段落1
<p>段落2</p>
</body>
这里段落1是红色,而段落2是绿色。这里面是通过判断样式的特殊性来设定的样式。

判断样式特殊性的方法,可以参考这里。
通过上面的例子,得到一个通俗的理解。继承和java里面方法继承类似,子元素继承父元素;而层叠可以看成
java里面的方法重载,子元素和父元素定义了同一个样式,具体用那个通过选择器特殊性的高低和位置来确
定。


注意:虽然我用方法重载来类别css中的层叠,但是两者的判断依据是不一样的。并非子元素定义的样式就
一定会被使用。
看这个例子:
p{color:green;}
body{color:red;}
<body>
段落1
<p>段落2</p>
</body>
结果是段落1,段落2全是红色。 

css中的框模型


标准框模型:标准框模型通过内容区域+填充(padding)+边框(border)+空白边(margin)组成。
在标准css中,元素的width和height指定的时内容区域的宽度和高度。
padding指定的是内容区域到边框(border)的距离。通常而言的背景(background)指的是内容区域和填充所
组成的这个区域。空白边(margin)通常用来设置元素之间的间隔。

IE的框模型:这里的IE的狂模型指定的是IE5,IE6版本中怪异模式中指定的框模型。区别在于IE框模型中
Width和height指定的是内容区域+填充+边框组成的宽度和高度。这里就形成了有个问题,而解决这个问
题的办法就是不要给元素添加具有指定宽度的填充,而尝试填充或空白边添加到元素的父元素或子元素。
具体的可以看我写的示例。

注意一般而言:元素的填充,边框,空白边是可以选择是否存在的,一般默认其值为0。但是有些情况下元
素可能会被用户代理样式表设置它们。所以,可以通过*{ margin:0;padding:0;}来统一设定。

空白边叠加


就是当有空白边遇到一起的时候,空白边之间会发生一种叠加。叠加的结果会是空白边中值相对较大的保留
下来,而这种叠加可以发散在任何两个相邻的空白边之间,无论这个空白边属于那个元素,是否包含,是否
是同一个元素的。

块元素(block)和行内元素(inline 内联元素)


块元素:指那些默认情况下会换行显示的元素。
行内元素:那些默认的情况下显示方式类似于文本的元素。默认情况下是同行显示,直到总体内容的宽度大
于父元素的宽度时才换行显示。
其实还有一部分叫做:可变元素 这些元素到底属于块元素还是行内元素需要具体环境决定。
这里有一篇好的介绍文章可以参考:
《元素block element和内联元素inline element》地址如下:
http://hi.baidu.com/mazhifang/blog/item/42977ed0c662588ea1ec9c77.html
相应的元素决定了组成框的类型,而元素的display属性可以改变生成框的类型。
通过设置display=block,可以将一个行内元素表现的像块级元素一样。
而设置display=none,则表示该元素根本不是框,这样这个元素就不在占有文档中的空间。

CSS的定位机制

普通流(position:static):就是块级框从上到下一个接一个的排列,框之间的垂直距离由框的垂直空白边计算出来.
相对定位(position:relative):块级框相对于它在普通流中所处的位置进行相对的偏移。
注:在使用相对定位时,无论元素是否移动,它仍然占着原来的空间。因此,移动元素有可能会覆盖其他的
元素).2个方面:块框+行框(包裹行内框)
绝对定位(position:absolute):相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普
通中的位置.与之相反,绝对 定位使元素的位置与文档流无关,因此不占据空间.普通文档流中其他元素的布局就
像绝对定位的元素不存在 时一样.相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在
普通中的位置.与之相 反,绝对定位使元素的位置与文档流无关,因此不占据空间.普通文档流中其他元素的布局
就像绝对定位的元素不存在时一样.
我总结的:如何确定绝对定位的原始祖先? 父元素 被定位 由近及远
固定定位:(position:fixed)
它是绝对定位的一个子类别.差异在于固定元素的包含块是视口.这使我们能够创建总是出现在窗口中相同位 置的浮动元素.但是,这种定位方式各种浏览器的支持各有不同.变通的方法是通过javascript来控制,当然也可以是用css。
浮动:(position:float)
浮动模型可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘.因为浮动框不在文档的普通流中,
所以文档普通流中的块框表现得就像浮动框不存在一样.

关于示例可以看这里:CSS定位机制示例

清除浮动的几种方法

1.父框也浮动;
2.理由clear来做元素清除==>3.扩展:利用伪类after来清除浮动
4.利用Javascript来动态清除浮动
5.利用overflow属性设置auto或hidden来清除浮动
更全面的看下面的:
《CSS规范 闭合浮动元素介绍》
http://web.rdxx.com/CSS/2007/9/1322433557845.shtml

关于浮动的深入认识 
-------------
推荐顺序阅读

1CSS浮动原理
http://blog.csdn.net/fishsoul/archive/2007/09/20/1792776.aspx
2.CSS Float Theory: Things You Should Know
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ (EN)
http://hi.baidu.com/yan5201314/blog/item/9f5bbd0ecac641e536d122f5.html (CN)
3.IE6下浮动bug详解
http://hi.baidu.com/xzkcz/blog/item/d25b580fadaac4296059f30a.html


平凡而简单的人一个,无权无势也无牵无挂。一路厮杀,只进不退,死而后已,岂不爽哉!
收起对“车”日行千里的羡慕;收起对“马”左右逢缘的感叹;目标记在心里面,向前进。一次一步,一步一脚印,跬步千里。
这个角色很适合现在的


posted on 2007-12-20 22:38 过河卒 阅读(1911) 评论(1)  编辑  收藏 所属分类: W3C/Css/Html

只有注册用户登录后才能发表评论。


网站导航:
 
文章来自: http://www.blogjava.com/ponzmd/ (彭俊-过河卒) 转贴请声明!
访问统计: