**********三种元素************************************************
块级（block）。宽高可设置，自动换行，独占一行。
div p ul li ol li dt table form
行内元素（inline）。设置高宽不管用，可以并排。
span em i a
行内块（inline-block）。设置高宽起作用，可并排
img input
转换方式是在head中写入样式{ display = inline-block }
***********四种属性***********************************************
尽量使用样式表。即在head中用style
1、去掉啊<a> anchor属性的下划线： text-decoration: none
2、文字纵向居中的方式：把行高设置成文字高度，line.height=文字高度
3、消除列表的序列符号：list-style: none
4、文字水平居中：text-align=center 。align通常用于盒子居中，如<table
align='center'></table>
***********n种选择器***********************************************
css3个特性：
层叠型
继承性。 父元素 > 子元素 > 孙元素
优先级。 优先级相同的样式，按照代码顺序执行，即结果显示后面的样式。
1、标签选择器
优先级1
标签名{ }
2、类选择器
优先级10
class="name"
.name{ }
3、id选择器
优先级100，id选择器能不用就不用，它和后台交换数据。
id="id"
#id{ }
4、*选择器
优先级0
*{ }
5、子代选择器
.father > .sun > .grandsun
<head>
</head>
<body>
</body>
6、后代选择器
.father div
后代包括了子代，即6比5的选择范围更大。代码格式也有区别
7、交集选择器
标签名.类名，如p.b，选择类名是b的标签<p>
8、结构伪类选择器
元素:first-child span:first-child{ }
元素:last-child span:last-child{ }
元素:nth-child span:nth-child{ }
span:nth-child(3){/*span里面的第3个*/
background-color: deeppink;
}
.father>div span:nth-child(3) {/*father这个class里面的div的里面的第3个
span*/
background-color: brown;
}
*/
/*一定找见 span父元素里的span孩子第几个 */
.father > div span:nth-of-type(2) {/*father这个类里面的div的里面的所有span
标签里面的第2个span*/
background-color: deeppink;
}
/*找的是span父元素的 所有元素的第几个 不关心这个元素是否span */
.father > div span:nth-child(4) {
background-color: orangered;
}
/*n 从0开始 2n偶数行 2n+1 奇数行*/
/* .a span:nth-of-type(2n) {
background-color: red;
}*/
/*后三个元素*/
.a span:nth-of-type(n+4) {
background-color: green;
}
/*前三个元素 切记 : -n + i !!!! 不能写成 i-n */
.a span:nth-of-type(-n+3) { /* 3-0 3 3-1 2 3-2 1 */
background-color: red;
}
***********盒子***********************************************
盒子的4四要素：margin，border线外面到其他盒子的距离
padding，border线里面到内容之间的距离
border，
内容区
Block Formatting Contexts（BFC）块级元素格式化上下文。让一个盒子对应一个
作用域，改动盒子位置时，优先改动内边距padding。
外边距重叠问题的解决办法：
一是，改内边距，再改盒子大小。
二是，设置一个用户看不见的边框。border-top 1px color white solid