1.行内元素、块级元素、行内块元素
行内块元素：inline-block; 可设置宽高和对齐方式。一行可以放好几个元素。
行内块元素常见的有 <input /> <img /> <td></td> 后面可以跟其他元素。
行内元素 ： 常见有<span></span>, <a></a>,<strong></strong>,<em></em>,<ins></ins>,
其不能更改宽和高，设置后无效，不能对其设置文本对齐，长用于控制页面中文本的样式。水平方向上padding,margin 可设置
宽高由内容决定。行内元素里面只能放行内元素。
块级元素： 单个元素独占一行，如 div ,h1-h6,p,ul,li 等。可以设置宽高对齐属性。
2.模式转换
display: block; 转换为块级元素
display：inline-block 转换为行内块元素
display：inline 转换为行内元素
可以为这些元素都设置background;
3.标签内的嵌套注意点
存放文字内的块级标签h1~h6，p, 不能让其他的块级标签如 div嵌套进去。
行内元素里面只能存放行内元素和文本。但<a></a>标签例外。
<a></a>标签里面可以嵌套块级标签div等
行级标签中可以嵌套 行级元素和行级块元素。
4. 易混淆的选择器
p.box{
} 表示的是class名为“box”的p标签元素样式。
p, .box{
} 表示p标签和 所有类名为（class名）“box” 的元素样式。
p .box {
} 表示p标签下所有后代中类名为box 的元素样式。
#box>p {
}表示id 为box 下直接后代p标签元素样式。
5.css样式优先级
#id 选择器权重0,1,0,0> .class 类选择器权重 0,0,1,0> 标签选择器0,0,0,1 > 继承选择器0,0,0,0 （不安进制算，按高低位比大小。比如：0,0,1,0 >0,0,0,10）
继承选择器
<head>
<style>
.father{
color:green;
}
p{
color:yellow;
}
</style>
</head>
<body>
<div class="father" >
<p>MM最棒！</p>
</div>
</body>
最后结果： 文本为黄色
子代总是优先选择自己的样式。
6.背景 background 设置
background-repeat: no repeat;/repeat-x;repeat-y;不平铺；延x方向平铺；延y方向平铺；
background-position: 3px,center; /* left,right,top,bottom 可设置其值 前面表示x方向，后表示y方向 */ 默认为左上方图像填充
background: rgba(r,g,b,a) a在0~1 之间，r,g,b在0~255之间。
background-color:
background-image: url(i.jpg);
简写： background：
在div 等标签中设置background 属性时，不影响其他如文字的排版等。
7.盒子
每个标签都可以看成一个盒子。与盒子有关的属性有
border/border-width ：边框大小。
border-color border-style:边框样式，实线(solid)，虚线（dashed），点线(dotted)。
在一个盒子中，可设置padding 来保证文字内容等于盒子保持一定距离。如：在链接中的文字，a 转化为行内块元素，设置行高（line-height），可让文字与盒子边框产生一定距离。
li标签 默认前面标签会有小黑点，list-style: none 取消小点
text-indent:2em 首行缩进两个字符。
但在l两个盒子中，如两个div 嵌套，此时若设置padding 的值，会让div盒子变大，可能把页面上的其他元素挤出去。
padding-left;padding-right;padding-top;padding-bottom;
同时设置border 边框的大小值 也会影响盒子的大小。+border-left +border-right;
8.当一张大图作为背景时，图像中心内容不在屏幕中心显示，可以调节 background-position: top center;
9.盒子必须指定宽度，才能 外边距 对其设置垂直居中对齐。margin:0 auto;
10.外边距该注意的地方：
问题的前提：父盒子无边框，两盒子嵌套。
两个盒子嵌套使用时，若父盒子无边框，想让两盒子间有一定间距。在父盒子中设定border或padding 值，产生的副作用是会“撑大盒子”；若在子盒子中设置 margin,则父盒子会产生“塌陷”，整体margin 移动；最直接的方法是在父盒子中设置 overflow：hidden;
合并问题： 两个相邻盒子 eg:一个设置 margin-bottom:100px; 一个设置margin-top:50px;则以最大的那个为准；即外间距维持在100px;
浮动：让多个块级元素一行显示。浮动是“脱标的”；不会超过内边距和边框的范围；标准流的盒子单独占一行。
浮动的对齐方式：如果子盒子有一个浮动，其余的子盒子都应该浮动。下面的盒子会“顶上去”。
浮动元素有默认的行内块显示转换。
一个盒子的内容 默认靠左上角起始。