CSS学习.1(child,display,position)

1. 
   伪类中的first child：
   在CSS中，如果采用这样的selector: p:first-child，那么其后面的部分只会对html代码中所有sibling中最靠前的p起作用。
   而如果采用这样的selector: p:nth-child(n)，那么在同级的p标签中，第n个标签会受到CSS的影响。
   例如这样的代码：

   p:first-child {
       font-family: cursive;
   }
   p:nth-child(2){
       font-family: Tahoma;
   }
   p:nth-child(3){
       color: #CC0000;
   }
   p:nth-child(4){
       background-color: #00FF00;
   }
   p:nth-child(5){
       font-size: 22px;
   }
   

   从上到下依次对同级的第一至第五p标签产生作用。
   以上例子来源于codecademy的CSS学习第17讲。
   注意，这里的第几个child是正对所有同级的标签来讲的，即如果在一个body下面依次是h1,h2,h3,p,p,p，那么h1是first-child，h2是第二个child，h3是第三个，后面三个p依次是第4，5，6个。

2. CSS里的display属性：
   display常用的有四种可能的值：block,inline-block,inline,none。block使其对应的html中的元素呈一个框状并且独占一行，inline-block使其呈一个框状但可以同其他的元素使用同一行，inline使其不用维持框状只需包围所有内容即可并且同其他元素共用一行，最后none当然就是不显示了。
3. 元素之间的margin,border,padding关系：
   
   margin是元素与元素之间的空隙，margin越大，元素之间的空隙就越大padding则表示内容和边界之间的距离，而border就是元素的边界啦。
4. 在CSS中可以设置margin属性，其值可以为：auto
   auto就是让浏览子自动调整margin的大小，一般情况下会让其于左右元素的距离相同，当display设置为block的时候，就可以产生居中的效果了。也可以分别是这margin的值，margin-top，margin-left,margin-right,margin-bottom。也可以一次全部设置，例如margin: 1px 2px 3px 4px;其顺序是top,right,bottom,left。
   对于padding的设置也是相同的道理，这里就不再赘述了。
   注意，以上的值，即距离，可以为负值，产生的效果就是content向反方向移动，会出现超出边界的情况。
5. CSS中的float属性：
   float可是设置top,right,bottom,left，这时他们会靠向对应的一边。当有很多个标签都被float定义时，浏览器会自动安排它们分开而不会让靠向相同一边的元素相互重叠。
   而clear属性也能让元素不与其他元素重叠，例如clear:left能让该元素挪到其右边元素的左边，而clear:both就是让该元素不与左右两边的元素重叠（一般情况下就是挪到他们的下方）。
6. CSS中的position属性：
   在这里介绍cnblog上面的一篇文章，CSS之Position详解这里也就不再赘述了。

作者：michaelxi007 发表于2013-11-24 23:14:18 原文链接

阅读：22 评论：0 查看评论