6 CSS复合选择器
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
6.1 后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
6.2 子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
6.3 并集选择器
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
6.4 交集选择器
6.5 伪类选择器
6.5 复合选择器总结
7 CSS的元素显示模型
7.1 块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。
块级元素的特点：
① 比较霸道，自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。
注意：
l 文字类的元素内不能使用块级元素
l <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
l 同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
7.2 行内元素
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
注意：
l 链接里面不能再放链接
l 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全
7.3 行内块元素
在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
7.4 元素显示模式总结
7.5 元素显示模式转换
l 转换为块元素：display:block;
l 转换为行内元素：display:inline;
l 转换为行内块：display: inline-block;
8 CSS的背景
通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
8.1 背景颜色
background-color 属性定义了元素的背景颜色。
一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。
8.2 背景图片
background-image 属性描述了元素的背景图像。
background-image : none | url (url)
注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。
8.3 背景平铺
如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。
8.3 背景图片位置
利用 background-position 属性可以改变图片在背景中的位置。
1. 参数是方位名词
l 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
l 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2. 参数是精确单位
l 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
l 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3. 参数是混合单位
l 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
8.3 背景图像固定（背景附着）
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
8.3 背景复合写法
没有特定的书写顺序,一般习惯约定顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
8.4 背景半透明
background: rgba(0, 0, 0, 0.3);
9 CSS的三大特性
CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。
9.1 优先级
10 CSS盒子模型
盒子模型组成：
它包括：边框、外边距、内边距、和实际内容
10.1 边框（border）
边框样式 border-style 可以设置如下值：
l none：没有边框即忽略所有边框的宽度（默认值）
l solid：边框为单实线(最为常用的)
l dashed：边框为虚线
l dotted：边框为点线
边框简写：
border: 1px solid red; 没有顺序
边框分开写法：
border-top: 1px solid red; /* 只设定上边框， 其余同理 */
表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
border-collapse:collapse;
l collapse 单词是合并的意思
l border-collapse: collapse; 表示相邻边框合并在一起
10.2 内边距（padding）
padding 属性用于设置内边距，即边框与内容之间的距离。
padding 属性（简写属性）可以有一到四个值。
10.3 外边距（margin）
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。
.header{ width:960px; margin:0 auto;}
常见的写法，以下三种都可以：
l margin-left: auto; margin-right: auto;
l margin: auto;
l margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可
外边距合并
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况:
1. 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有
上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的
较大者这种现象被称为相邻块元素垂直外边距的合并。
2. 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。
清除内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
圆角边框
border-radius:~px;
盒子阴影
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
文字阴影
在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。
语法：
text-shadow: h-shadow v-shadow blur color;
