CSS(2)

 1. HTML标签一般分为块标签和行内标签两种类型。
 2. 常见的**块元素**有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
**块级元素的特点**
	-独占一行
	-高度，宽度，外边距以及内边距都可以控制。
	-宽度默认是容器(父级宽度)的100%
	-是一个容器及盒子，里面可以放行内或者块级元素
注意：
	-只有文字类的元素不使用块级元素，
	-<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别不能放<div>。
	-同理，还有<h1>~<h6>等都是文字类块级标签，里面不能放其他块级元素。
 3. 常见的**行内元素**有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
**行内元素的特点**
	-相邻行内元素在一行上，一行可以显示**多个**。
	-高度、宽度直接设置是无效的。
	-默认高度就是它本身内容的宽度。
	-行内元素只能容纳文本或其他行内元素。
注意
	-链接里面不能再放链接
	-特殊情况<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。
	
 4. 在行内元素中有几个特殊的标签——<img>\<input >、<td>，它们同时具有块元素和行内元素的特点，有些资料可能会称它们为**行内块元素**。
 **行内块元素的特点**
	-和相邻行内元素(行内块)在一行上，但是之间会有空白风险。一行可以显示多个
	-默认宽度就是它本身内容的宽度。
	-高度，行高，外边距以及内边距都可以控制。
 5. 元素显示模式转换 
	块转行内：display:inline;
	行内转块：display:block;（最多）
	转换为行内块：display: inline-block;
 6. 单行文字垂直居中--line-height=height
如果行高小于盒子高度，文字偏上；大于则偏下
 7. CSS的背景
 	背景颜色---background-color: 颜色值;
 默认的值是 transparent（透明的）
	背景图片---background-image : none | url (使用绝对/相对地址指定背景图像) ;
	背景平铺---background-repeat : repeat（默认平铺） | no-repeat | repeat-x （横向平铺）| repeat-y （纵向平铺）
	背景位置---background-position : x y
		length || position （方位名词）
		-如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left  top和top  left效果一致
		-如果只指定了一个方位名词，另一个值默认居中对齐。
		-如果position 后面是精确坐标， 那么第一个一定是 x ，第二个一定是y。
		-如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中。
		-精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
	背景图像固定---background-attachment:scroll (随对象内容滚动）| fixed（固定）
复合写法：
background:颜色	 图片地址 平铺 滚动 图片位置
背景半透明---background: rgba(0, 0, 0, 0.3);
	-最后一个参数是alpha 透明度  取值范围 0~1之间
	-我们习惯把0.3 的 0 省略掉  这样写 background: rgba(0, 0, 0, .3);
	-注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
	-CSSS3新增属性，是IE9+版本浏览器才支持的
 8. CSS的三大特性：
 **层叠性：**
 	样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
	样式不冲突，不会层叠。

**继承性：**
	子标签会继承父标签的某些样式，如文本颜色和字号。（子承父业）
	继承可以简化代码，降低CSS样式的复杂性
	子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
		(龙生龙，凤生凤，老鼠生的孩子会打洞）
行高的继承：font：12px/1.5
	子元素继承了父元素body的行高1.5，当前元素文字大小font-size的1.5倍
**优先级：**
	选择器相同，则执行层叠性
	选择器不同，就会出现优先级的问题。
		标签选择器				计算权重公式
		继承或者 *					0,0,0,0
		每个元素（标签选择器）		0,0,0,1
		每个类，伪类					0,0,1,0
		每个ID						0,1,0,0
		每个行内样式 style=""		1,0,0,0
		每个!important  最重要的		∞ 无穷大
-继承的权重是0，如果该元素没有直接选中，不管父元素权重有多高，子元素得到的权重都是0.

权重叠加：
	div ul  li   ------>      0,0,0,3
 	.nav ul li   ------>      0,0,1,2
	a:hover      -----—>      0,0,1,1
 	.nav a       ------>      0,0,1,1

9.CSS学习三大核心： css 盒子模型 、 浮动 、 定位  
	网页布局的核心本质：就是利用CSS摆盒子。
	盒子模型：盒子模型由元素的内容、边框（border）、content（内容）、内边距（padding）、和外边距（margin）组成。
	border : border-width || border-style （none：无边框  solid：单实线(最为常用的) dashed：虚线  dotted：点线）|| border-color 
复合写法：border: 1px solid red; （没有顺序要求)
border-top(上）/bottom（下）/ left（左）/right（右)-style:样式;

表格的细线边框：}
 通过css属性：table{ border-collapse:collapse;(表示相邻边框合并) }  

padding:
	padding-left	左内边距
	padding-right	右内边距
	padding-top		上内边距
	padding-bottom	下内边距
 复合写法：
 	1个值	padding：上下左右内边距;
	2个值	padding：上下内边距  左右内边距 ；
	3个值	padding：上内边距 左右内边距 下内边距；
	4个值	padding：上内边距 右内边距 下内边距 左内边距 ；
注意：
	内容和边框 有了距离，添加了内边距。
	padding影响盒子大小
解决方法：让width/height减去多出来的内边距的大小
（如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。）

margin:
复合写法: 跟 padding 完全相同。
块级盒子水平居中：
	-盒子必须指定宽度（width）
	-然后就给左右的外边距都设置为auto}
.header  { width: 960px; margin: 0 auto;}
常见的写法：
	margin-left: auto;   
	margin-right: auto;
	margin: auto;
	margin: 0 auto;
注意：
行内元素和行内块水平居中给其父元素添加text-align： center即可

外边距合并：
解决嵌套块元素垂直外边距的塌陷
	-可以为父元素定义上边框。
	-可以为父元素定义上内边距
	-可以为父元素添加 overflow： hidden。
	
清除元素的默认内外边距：}
* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}
（尽量只设置左右内外边距）

补充：
	无序列表:
		去掉|i前面的项目符号（小圆点）
		list-style：none；