HTML中的标签元素大体被分为三种不同的类型：块状元素，内联元素，内联块状元素。
常用块状元素：
<div> <p> <h1>.....<h6> <ol> <ul> <table>
<address> <biockquote> <form>
注：设置display:block代码，可以将内联元素转换成块状元素，如：
a{display:block;} / /内联元素a转换成了块状元素
块状元素特点：
1. 每个块状元素都从新的一行开始，而且他后面的所有元素也另外一行，（他一个块状元素独自占据一行）
2. 元素的高度，宽度，行高以及顶和底边距都可以设置
3. 元素在没有设置高度的情况下，默认是他本身父类容器的100%
常用的内联元素（行内元素）有：
<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
注：块状元素可以用display:inline转换成内联元素，如：
div{display:inline;} //将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
内联元素特点：
1. 和其他元素都在一行上面
2. 元素的高度，宽度以及顶部和底部边距不可以设置
3. 元素的高度就是它包含的文字或图片的宽度，不可以改变
常用的内联块状元素有：
<img> <input>
所谓的内联块状元素就是同时具备内联元素，块状元素的特点，使用display:inline-block就是将元素设置为内联块状元素。
特点：
1. 和其他元素都在一行上
2. 元素的高度，宽度，行高以及顶和底边距都可以设置
盒模型
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)
如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
div{
border:2px solid red; //这是简写
}
下面是详细的写法
div{
border-width:2px; //边框的粗细为2px
border-style:solid; // 边框用的是实线
border-color:red; // 边框颜色为红色
}
1. border-style常见的样式有： dashed（虚线），dotted（点线），solid（实线）
2. border-color中的颜色可以设置为十六进制的颜色 如：#888；
3. border-width边框的宽度可以设置为：thin，medium，thick
单独的边框
如果想设置一个方向的边框，可以这样写：
div{border-bottom:1px .......;} //我们单独设置了单独的下边框，还可以使用top,left,right
盒模型的宽度与高度
设置width与height就可以了
填充（内边距）
里面内容与容器的边距，padding-top，padding-bottom，padding-left，padding-right，padding（四个方向同时设置）
边界（外边距）
容器与容器之间的边距，同样margin-top 。。。。。。。。等等
