CSS中你不太了解的细节---（一）

1.常用选择器

1. id选择器 作用：根据元素的id属性值选中一个元素；语法：#id属性值{ }；例子：#box{ }。
2. 类(class)选择器 作用：根据元素的class属性值选中一组元素，可以同时为一个元素指定多个class属性，用空格隔开；语法：.class属性值{ }；例子：.box{ }。
3. 通配选择器 作用：选中页面中的所有元素 语法：* 。
4. 元素选择器 作用：根据标签名来选中指定的元素；语法：标签名{ }；例子：p{ }。
5. 选择器的权重：内联样式>id选择器>类和伪类选择器>元素选择器。如果优先级相同，此时优先使用靠下的样式。

2.复合选择器

1. 交集选择器 作用：选中同时符合多个条件的元素；语法：选择器1选择器2选择器n{ }；注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头。
2. 并集选择器 作用：同时选择多个选择器对应的元素；语法：选择器1，选择器2，选择器n{ }。
3. 子元素选择器 作用：选中指定父元素的指定子元素；语法：父元素>子元素{ }。
4. 后代元素选择器 作用：选中指定元素内的指定后代元素；语法：祖先 后代{ }。
5. 属性选择器 语法：

p[title]选择含有指定属性的元素
p[title=abc]选择含有指定属性和属性值的元素

3.伪类选择器

1. 伪类：不存在的类，特殊的类。
2. 伪类用来描述一个元素的特殊状态，比如：第一个子元素，被点击的元素、鼠标移入的元素。
3. 伪类一般情况下都是使用：开头。
4. :first-child 第一个子元素。
5. :last-child 最后一个子元素。
6. :nth-child( n) 第n个子元素。特殊值：2n 表示选中偶数位的元素；2n+1 表示选中奇数位的元素。
7. 以上这些伪类都是根据所有的子元素进行排序。而 first-of-type、last-of-type、nth-of-type 是在同类型元素中进行排序。
8. :not() 否定伪类：将符合条件的元素从选择器中去除。
9. :hover 用来表示鼠标移入的状态。
10. :active用来表示鼠标点击
11. 补充，伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）。伪元素使用::开头，比如::first-letter 表示第一个字母。

ul>li:nth-child(2n+1){
  color:red;
}

4.文档流

1. 网页是一个多层的结构，一层摞着一层。
2. 通过CSS可以分别为每一层来设置样式。
3. 作为用户来讲只能看到最顶上一层。
4. 这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。
5. 对于元素主要有两个状态：在文档流中、不在文档流中（脱离文档流）。
6. 元素在文档流中有什么特点。块元素：块元素会在网页中独占一行，默认宽度是父元素的全部，默认高度是被内容撑开（子元素）。行内元素：行内元素不会独占页面的一行，只占自身的大小，行内元素在页面中从左向右水平排列。如果一行之中不能容纳所有的行内元素，则元素会换到第二行继续自左向右排列。行内元素的默认宽度和高度总是被内容撑开。

5.盒模型、框模型

1. CSS将页面中的所有元素都设置为了一个矩形的盒子
2. 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。
3. 每个盒子都由以下几个部分组成：内容区(content)、内边距(padding)、边框(border)、外边距(margin)。
4. 内容区（content）：元素中的所有子元素和文本内容都在内容区中排列。内容区的大小由width和height两个属性来设置。
5. 边框（border）：边框属于盒子边缘，边框大小会影响整个盒子大小。需要至少设置三个样式：border-width、border-color、border-style。
6. border-width可以用来指定四个方向的边框的宽度。值的情况，四个值：上、右、下、左。border-color同理。
7. border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求。border:solid 10px orange。
8. 内边距（padding）内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上。
9. 一般盒子的可见框的大小，由内容区 内边距 边框共同决定。所以在计算盒子大小时，需要将这三个区域加到一起计算。
10. 外边距（margin）外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置。
11. 垂直外边距的重叠（折叠），相邻的垂直方向外边距会发生重叠现象。
12. 兄弟元素间的相邻垂直外边距会取两者之间的较大值。
13. 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）。
14. 行内元素的盒模型：行内元素不支持设置宽度和高度，行内元素可以设置padding、border、margin，垂直方向都不会影响页面的布局。
15. display 用来设置元素显示的类型。可选值：inline 将元素设置为行内元素；block 将元素设置为块元素；none 设置元素不在页面中显示。
16. visibility 用来设置元素的显示状态。可选值： visible 默认值，元素在页面中正常显示；hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置。