每天一句：99分和100分的区别是在于，满分只有100分。
一、元素类型
根据CSS现实分类，XHTML可以分为: 块状元素、行内元素、行内块元素、可变元素;
二、块元素block
> 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域;
> 常用元素有div/dl/dt/dd/ol/ul/fieldset/h1~h6/form/hr/colgroup/col/table/tr/td....;
> 默认情况下，块状元素都会占据一行;
> 块状元素都可以定义自己本身的宽度和高度;
> 块状元素一般为其他元素的容器，可以容纳其他元素，也是比喻为盒子;
三、行内元素inline(内联元素)
> 常见的内联元素a/span/i/em/strong/b/del...;
> 内联元素的边线形式是始终以行内逐个进行显示;
> 内联元素没有自己的形状，不能定义宽度和高度，只能根据内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状;
> 内联元素也会遵守盒模型基本规则，如可以定义padding/border/margin/background等属性，但个别属性不能正常显示;(padding-left/padding-right可以使用);
四、行内块元素inline-block(内联块元素)
> 常见元素img/input；
> 行内块元素，是行内逐个显示；
> 行内块元素，还可以设置宽度和高度；
五、元素类型转换
> display: block; 块状元素: 类似在元素后面添加换行符，也就是说其他元素不能再其后面并列显示;
> display: inline; 内联元素: 在元素后面删除换行符，多个元素可以在一行内并列显示;
> display: inline-block; 内联块元素: 元素的内容以块状显示，行内的其他元素显示在同一行；
> display: none; 此元素不会被显示;
备注:
> 当元素设置float属性后，就相当于给该元素加了display: block;属性;
六、水平居中设置技巧
- 内联元素和内联块元素都是可以通过text-align设置改变水平对齐方式的，但是块元素不起效果;
- 块元素如果要设置为居中，必须得用margin: 0 auto;
七、垂直居中设置技巧
原理: 让span标签作为a标签居中的基线参考(inline-block支持text-align和vertical-align属性)
0、a和span设置为内联块元素(vertical-align才有效)
1、a标签垂直居中vertical-align: middle;
2、span标签垂直居中vertical-align: middle;
3、span标签高度与父元素一致height: 100%;
4、span只是参考，不需要显示width: 0;
八、边框设置技巧(九宫格)
image
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 204px;
height: 200px;
margin: 30px auto;
/*border: 1px solid gray;*/
}
li{
width: 50px;
height: 50px;
border: 1px solid gray;
float: left;
list-style: none;
/* 边框设置技巧*/
margin: -1px 0 0 -1px;
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
