元素分类
html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
- 常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
- 常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
- 常用的内联块状元素有：
<img>、<input>
三种类型特点
块级元素特点:
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%
如果想把内联元素转换为块级元素，可以用以下代码：
a{display:block;}
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
如果想把块级元素转换为内联元素，可以用以下代码：
div{display:inline;}
- 内联块状元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
就是同时具备块级元素特点和内联元素特点
通过以下代码可以设置为内联块状元素
div a{display:inline-block;}
盒模型
如上图，每个绿色框我们可以看作一个盒子，每个盒子内部可以放元素，如文字，图片等，盒子可以设置padding，就是内部元素距离盒子的距离；可以设置border，就是盒子的边框；可以设置margin，就是盒子距离其他盒子的间距；padding，border和margin都有四个方向，如padding-left。。。块级标签都具有盒模型的特点
- 盒模型-边框
下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
div{
border:2px solid red;
}
这是简写，也可以分开写：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:#000000，#00ff00
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
如果只设置下边框，可以：
div{border-bottom:1px solid red;}
- 盒模型-宽度和高度
css内定义的宽度和高度和平时我们理解的不同，css定义的宽高是内容的宽高
如上图，比如我们定义：
div{
width:150px;
height:130px
padding:20px;
border:10px solid red;
margin:15px;
}
那么元素实际宽度为：
150+20+10+15=195
高度为：
130+20+10+15=175
- 盒模型--填充
填充就是设置内容与块状元素边框的间距，也就是上图中的padding
div{padding-top:20px;}/*设置上边距*/
div{padding:10px;}/*同时设置上下左右边距*/
- 盒模型--边界
上图中的margin，代码与padding类似，可以设置上下左右
div{margin:20px 10px 15px 30px;}
