盒子显示模式和可见性，CSS 属性的继承。

一，三大类选择器

1.1基本选择器
标签名选择器
类名选择器
ID选择器
全局选择器 *
1.2组合选择器
① 后代选择器
selector1 selector2

② 子元素选择器
selector1>selector2

③ 并集选择器
selector1,selector2

④ 交集选择器
selector1selector2
1.3伪类选择器

:link	超链接未访问的状态
:visited	超链接已访问的状态
:hover	鼠标悬停在元素上
:active	鼠标在元素上，按键按下去

二、盒子显示模式和可见性

**2.1display属性**
值：
inline
inline-block
block
none (隐藏)
**2.2 visibility 属性**
值：
visible 显示
hidden  
**2.3盒子模型的组成**
内容，内边距，边框，外边距。

影响盒子大小的因素：
内容大小、内边距的大小、边框的宽度
外边距并不是盒子的一部分，所以外边距不影响元素的大小，影响元素的位置
2.4 盒子模型的内容区域
① 设置内容区域的宽高的 css 属性

width
max-width
min-width
height
max-height
min-height

② 内容区域默认宽度

overflow： 值： 
		  visible（默认，显示）
		  hidden（隐藏）
		  auto（如果内容溢出加滚动条）
		  scroll（加滚动条，不论内容是否溢出）
		  
overflow-x	设置水平方向溢出内容的显示方式，值同 overflow 一样
overflow-y	设置垂直方向溢出内容的显示方式，值同 overflow 一样

注意：

使用 overflow-x 或 overflow-y 设置一个方向上的溢出内容显示方式，另一方向自动加滚动条。

2.5盒子模型的内边距

padding-left	左内边距
padding-right	右内边距
padding-top		上内边距
padding-bottom	下内边距

padding	复合属性，同时设置四个方向的内边距
padding 
一个值： 设置4个方向的内边距一样padding 
二个值： 第一个值是上下内边距，第二个值是左右内边距padding 
三个值： 第一个值是上内边距，第二个值是左右内边距，第三个值是下内边距padding 
四个值： 四个值依次是 上内边距、又内边距、下内边距、左内边距

内边距规则：
1，padding的默认值是0，不能设置为负
2，行内元素设置上下边距，无法使盒子的占地位置变大，不建议设置。
2.6 盒子模型的边框
① 边框相关的 CSS 属性

border 同时设置四个方向的边框	复合属性
border-style	设置边框线风格 值: none、solid(实线)、dashed（虚线）、dotted(点线)、double(双实线)
border-width	边框宽度
border-color	边框颜色

border-left	设置左边框
border-left-style
border-left-width
border-left-color

border-right
border-right-style
border-right-width
border-right-color

border-top
...

border-bottom
....

② 背景位置和边框关系
1，背景颜色会在边框下面，一般边框设置为实线看不到，如果边框设置为虚线能看到边框下面的颜色。
2，背景图片从内边距区域开始显示，不会在边框上显示。
2.7外边距
① 设置外边距

margin-left
margin-right
margin-top
margin-bottom

margin 复合属性
       1个值	四个方向的外边距一起设置
       2个值	第一个值：上下外边距 第二个值：左右外边距
       3个值  第一个值：上外边距 第二个值：左右外边距 第三个值：下外边距
       4个值  依次是 上 右 下 左

设置元素的左外边距和上外边距会让自己的位置移动
设置右外边距或者下外边距影响的是后面元素的位置
子元素的前面或左边如果没有兄弟元素，左或上外边距就是与父元素内容边界距离
② 行内元素设置外边距
行内元素只允许设置左右的外边距，设置上下失效。
③ margin 特殊的值
margin 可以设置为 负值：

margin-left 为负值，元素向左位移
margin-top 为负值，元素会向上位移
margin-right 设置为负值，右边的元素会覆盖到当前元素上
margin-bottom 设置为负值，下边的元素会覆盖到当前元素上

**margin 的值可以是设置为 `auto
块级元素的左右外边距设置为auto，元素会在父元素中水平居中。
上下外边距无法设置auto。
④ margin 塌陷
什么情况下发生margin塌陷？
给某个父元素的第一个子元素设置上外边距，上外边距会作用在父元素上，该现象称之为 margin 塌陷
或者
给父元素的最后一个子元素设置下外边距，子元素的下外边距会作用在父元素上，也是 margin 塌陷
如何解决 margin 塌陷？
方案一： 给父元素添加边框

方案二： 给父元素设置 css 属性 overflow:hidden (把父元素设置为 BFC)
⑤ margin 合并

两个兄弟元素垂直排列
前面的兄弟元素如果设置了下外边距，后面兄弟元素设置了上外边距
两个元素之间的距离取 上面元素下外边距和下面元素上外边距中大的一个

3 CSS 属性的继承
① 可以继承的 css 属性
字体属性（font系列），文本属性（文本对齐，行高），字体颜色
② 不可以继承的 css 属性
宽高设置，内外边距，边框，背景。

注意：
 给 a 的父元素设置字体颜色和text-decoration 的时候，a 不会生效
 原因：
 a 有默认的 color 和 text-decoratoin 的设置，默认的样式设置权重比继承的样式大
直接对元素的样式设置 > 默认的样式设置 > 继承下来的样式设置

四、行内块元素的一些特性
4.1 文本属性会对行内元素和行内块元素起作用

行内元素和行内块元素可以被当做文本进行处理，如果在父元素那里设置文本属性，会对行内元素和行内块元素起作用

如何让一个行内块元素或行内元素水平居中对齐？
	给它的父元素设置 text-align:center;

如何让一个行内块元素在父元素中垂直居中？
	给父元素设置行高（行高=高度）
	给行内块元素设置 vertical-align: middle

如何让一个块级元素在父元素中水平居中对齐？
	给元素自己设置左右外边距为 auto

4.2 行内块或行内元素之间的空白
行内元素或行内块元素之间会出现空白，空白其实是代码中的换行符。

解决方案：

方案一：写代码的时候不换行，也没有空格

方案二：设置父元素字体大小为 0，子元素再单独设置字体大小