css 中 position属性的深入学习

1. CSS
中position:absolute的定位到底是相当于body，还是父级元素的问题

结论如下：

position:absolute是相对于他的包含块中第一个有position:absolute或者position:relative属性的父级元素，如果都没有，就是相对于body。

（这个细节困扰我蛮久）

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

2.css控制一个ul标签下的指定li标签样式

ul li:first-child{margin-left:0;}  第一个
ul li:last-child{margin-left:0;}   最后一个
ul li:nth-child(5){margin-left:0;} 指定第几个
ul li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
ul li:nth-child(odd){background:orange;}   基数
ul li:nth-child(even){background:orange;}  偶数ul li:first-child{margin-left:0;}
 第一个
ul li:last-child{margin-left:0;}   最后一个
ul li:nth-child(5){margin-left:0;} 指定第几个
ul li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
ul li:nth-child(odd){background:orange;}   基数
ul li:nth-child(even){background:orange;}  偶数

3.通过使用text-overflow和white-space属性来使文本在一行内显示，超出则加省略号;

CSS：需要加上宽度(width:100px)、超出隐藏（overflow:hidden;）、强制在同一行显示（white-space: nowrap;）、省略号（text-overflow:ellipsis;）;

p{width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

4. css3 自定义滚动条样式：

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  

::-webkit-scrollbar  

{  

    width: 16px;  

    height: 16px;  

    background-color: #F5F5F5;  

}  

  

/*定义滚动条轨道 内阴影+圆角*/  

::-webkit-scrollbar-track  

{  

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  

    border-radius: 10px;  

    background-color: #F5F5F5;  

}  

  

/*定义滑块 内阴影+圆角*/  

::-webkit-scrollbar-thumb  

{  

    border-radius: 10px;  

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  

    background-color: #555;  

}  

适用于-webkit- 内核的伪类：

滚动条组成

::-webkit-scrollbar 滚动条整体部分

::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）

::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）

::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。

::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处

::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

引用：
http://blog.csdn.net/hanshileiai/article/details/40398177#