CSS查漏补缺

本文主要是对自己经常使用到的css的部分基础知识进行了查漏补缺，css3动画部分在实战中用得使用比较少，暂不作整理。

结构（位置）伪类选择器

1. :first-child：选取属于其父元素的首个元素的指定选择器。
2. :last-chiild：选取属于其父元素的最后一个元素的指定选择器。
3. :nth-child(n)：匹配其父元素的第n个子元素；
4. :nth-child(2n)：匹配其父元素的偶数元素；
5. :nth-child(2n-1)：匹配其父元素的奇数元素。
6. :nth-last-child(n)〉：从最后一个子元素开始计数，选择器匹配属于其元素的第N个子元素的每个元素。n可以是数字、关键词或公式。

属性选择器

选取标签带有某些特殊属性的选择器。

选择器	含义
E[attr]***	存在attr属性即可。
E[attr = val]***	属性值完全等于val。
E[attr *= val ]	属性值里包含val字符并且在"任意"位置。
E[attr ∧= val ]***	属性值里包含val字符并且在"开始"位置。
E[attr $= val ]***	属性值里包含val字符并且在"结束"位置。

文字阴影shadow

text-shadow：水平位置  垂直位置  模糊距离  阴影颜色

值	描述
h-shadow	必需。水平阴影的位置。
v-shadow	必需。垂直阴影的位置。
blur	可选。模糊的距离。
color	可选，阴影的颜色。

块级元素(block)

块级元素独自占据一行或者一整行，可以对其设置宽度（width）、高度(height)和对齐(padding、margin)等属性。

常见的块级元素：h1·h6、div、p、ol、ul、li等；
块级元素的特点：

1. 总是从新行开始；
2. 高度、宽度、内边距和外边距都可以控制；
3. 宽度默认是容器的100%；
4. 可以容纳内联元素和其他块元素。

行内元素(inline)

行内（内联）元素，仅仅**靠自身的字体大小和图片尺寸**来支撑结构，一般不可以对其设置宽度（width）、高度(height)和对齐(padding、margin)等属性。

常见的行内元素：text、a、b、strong、span等。

行内元素的特点：

1. 和相邻行内元素在一行上；
2. 高度和宽度无效，当水平方向的padding和margin可以设置，垂直方向无效；
3. 宽度默认是本身内容的宽度；
4. 只能容纳文本或行内元素（a除外）；

注意：1. 只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1.h2.h3,h4,h5.h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2.链接里面不能再放链接。

行内块元素（inline-block）

行内块元素兼有行内和块元素的特点。

常见的行内块元素：img，input和td等。

行内块元素的特点：

1. 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙;
2. 默认宽度就是它本身内容的宽度;
3. 高度,行高、外边距以及内边距都可以控制。

表格边框合并

border-collapse:collapse

相邻块元素垂直外边距的合并（也称外边距塌陷)

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。

多背景图片

叠放次序（z-index）

用于调整重叠定位元素的叠放次序。

1. 只有定位（相对、绝对和固定定位）才有此属性；
2. z-index默认值是0，取值越大，定位元素在层叠元素中越居上；
3. 如果取值相同，则根据书写顺序，后来居上。

三种定位模式总结

定位模式	是否脱标占位置	移动位置基准
相对定位relative	不脱标，占有位置	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置

定位模式转换

元素添加了绝对定位和固定定位之后，元素模式会发生转换，都转换为行内块模式。
因此，比如行内元素如果添加了绝对定位或者固定定位后，可以不用转换模式，直接给高度和宽度就可以了。

防止拖拽文本域（textarea）

textarea默认是可以让用户拖拽文本框让其放大和缩小的，为避免这种情况， 可以使用resize属性，resize：none

vertical-align垂直对齐

它只针对于行内元素或者行内块元素的垂直对齐。

去除图片底部测缝隙

图片或者表单等行内缺元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决方法：

1. 给img vertical-align:middle | top等等。让图片不要和基线对齐；
2. 给img添加display: block;转换为块级元素就不会存在问题了。

文字溢出时省略号标记

text-overflow :  ellipsis

注意：一定要首先强制一行内显示（white-space：nowrap），再次和overflow属性搭配使用。

整理结束，更多css使用技巧有待补充。