Css的选择器与定位问题
很多时候我都会问自己:每天早上叫醒你的是闹钟还是梦想?更多的时候我回答:是闹钟。那么,你呢?
对于我自己来讲,我总结了自己在css层叠样式中容易混淆的地方。首先是对于定位position这个属性。他有四个值:static(静态定位);fixed(固定定位);absolute(绝对定位);relative(相对定位)。 static是按正常方式定位;fixed,absolute都会脱离正常文档流。那么什么又是正常文档流呢:文本元素从上到下,从左到右依次排列,块级元素从上到下一次排列,内嵌元素从左到右一次排列,这就是正常文档流 。脱离正常文档流就是指元素不再按它原来的排列顺序排布,就像是float(浮动),它会对其周围元素的布局产生一定影响,而与float不同的是:fixed会把某个样式固定在你所定的位置,不会随页面的上下或左右移动而改变,而absolute是相对于它的父级定位,它会一直寻找有position的元素,如果没有,它会相对于body定位且会浮到元素的最上层;relative是相对于它自己的位置定位。Float(浮动)是把元素浮起来,它也会脱离正常文档流,所以在使用时要注意清除浮动,以下是浮动的几个基本行为:
- 当float不等于none引起元素浮动时,元素将被视为块级(block-level),等于设置display:block;
- 当浮动一个文本类型元素时,必须制定该元素的width(宽度)属性。如果不设置宽度,元素内容就会折叠到最小宽度。
- 浮动元素停留到包含它的父级元素的内容区域内,不会穿过padding区域。
- 浮动元素的margin是不会重合的。
在css中有三种隐藏方式:overflow:hidden;display:none;visibility:hidden;其实这三种用法用起来也很简单,只是要注意overflow要占位,二display不占位,visibility一般用在清除浮动中。
现在再给大家讲讲选择器的权重选择器问题,这个问题很多人都遇到过,有时一个标签中有许多子标签,当你给父级设置了属性,又给子级元素设置了属性,但你发现无效,这就是选择器的权重问题了。我们知道选择器有四类:内联优先集最高,然后是id选择器,接下来是类、伪类、属性选择器、最后才是元素、伪元素选择器。假如用a、b、c、d来表示他们的,那么
权重值
|
下面为大家举一些例子:
1 * {} /* a=0 b=0 c=0 d=0 -> 优先级= 0,0,0,0 */
2 li {} /* a=0 b=0 c=0 d=1 -> 优先级 = 0,0,0,1 */
3 li:first-line {} /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
4 ul li {} /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
5 ul ol+li {} /* a=0 b=0 c=0 d=3 -> 优先级 = 0,0,0,3 */
6 h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> 优先级 = 0,0,1,1 */
7 ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 优先级 = 0,0,1,3 */
8 li.red.level {} /* a=0 b=0 c=2 d=1 -> 优先级 = 0,0,2,1 */
9 #x34y {} /* a=0 b=1 c=0 d=0 -> 优先级 = 0,1,0,0 */
10 style="" /* a=1 b=0 c=0 d=0 -> 优先级 = 1,0,0,0 *
了解这些,你就不会再为权重的选择二犯愁了,因为a,b,c,d只是在各自位置数字的累加,而不会越级。在这上面,其实还漏掉了一项,那就是!important,important可以让所有的权重值变得可笑,因为css属性值添加了important后,前面所有的努力白费了,行内式的权重也高不过它,除非再声明一个加important的属性值来覆盖它(注意是由css属性值读取的顺序决定的)。
比如h1{height:100px !important;}要覆盖这个height值为200px的话,要在其后加上h1{height:200px !important;}