Css的选择器与定位问题

Css的选择器与定位问题

 

　　很多时候我都会问自己：每天早上叫醒你的是闹钟还是梦想？更多的时候我回答：是闹钟。那么，你呢？

　　对于我自己来讲，我总结了自己在css层叠样式中容易混淆的地方。首先是对于定位position这个属性。他有四个值：static（静态定位）；fixed（固定定位）；absolute（绝对定位）；relative（相对定位）。 static是按正常方式定位；fixed，absolute都会脱离正常文档流。那么什么又是正常文档流呢：文本元素从上到下，从左到右依次排列，块级元素从上到下一次排列，内嵌元素从左到右一次排列，这就是正常文档流 。脱离正常文档流就是指元素不再按它原来的排列顺序排布，就像是float（浮动），它会对其周围元素的布局产生一定影响，而与float不同的是：fixed会把某个样式固定在你所定的位置，不会随页面的上下或左右移动而改变，而absolute是相对于它的父级定位，它会一直寻找有position的元素，如果没有，它会相对于body定位且会浮到元素的最上层；relative是相对于它自己的位置定位。Float（浮动）是把元素浮起来，它也会脱离正常文档流，所以在使用时要注意清除浮动，以下是浮动的几个基本行为：

1. 当float不等于none引起元素浮动时，元素将被视为块级（block-level），等于设置display：block；
2. 当浮动一个文本类型元素时，必须制定该元素的width（宽度）属性。如果不设置宽度，元素内容就会折叠到最小宽度。
3. 浮动元素停留到包含它的父级元素的内容区域内，不会穿过padding区域。
4. 浮动元素的margin是不会重合的。

      在css中有三种隐藏方式：overflow：hidden；display：none；visibility：hidden；其实这三种用法用起来也很简单，只是要注意overflow要占位，二display不占位，visibility一般用在清除浮动中。

　　现在再给大家讲讲选择器的权重选择器问题，这个问题很多人都遇到过，有时一个标签中有许多子标签，当你给父级设置了属性，又给子级元素设置了属性，但你发现无效，这就是选择器的权重问题了。我们知道选择器有四类：内联优先集最高，然后是id选择器，接下来是类、伪类、属性选择器、最后才是元素、伪元素选择器。假如用a、b、c、d来表示他们的，那么

 

权重值   a b c d 内联 1 0 0 0 Id 0 1 0 0 类、伪类、属性选择器 0 0 1 0 元素、伪元素 0 0 0 1

　　下面为大家举一些例子：

     　　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;}

转载于:https://www.cnblogs.com/wsy19940622/p/4542277.html