Css的选择器与定位问题
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;}
