css（二）盒子模型和不同元素类型

1. 块级元素
   <div>、 <p>、<h1>、<form>、<table>、<ul>、<li>
   转化为块级元素 display:block;
   特点：（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。（2）元素的高度、宽度、行高以及顶和底边距都可设置。（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
2. 内联元素<span>、<a>、<label>、 <strong>、<em>
display:inline
   特点：（1）和其他元素都在一行上（2）元素的高度、宽度及顶部和底部边距不可设置（3）元素的宽度就是它包含的文字或图片的宽度，不可改变
3. 内联块状元素
   <img>、<input>
display:inline-block
   特点：（1）和其他元素都在一行上（2）元素的高度、宽度、行高以及顶和底边距都可设置。
4. 盒子模型（块状元素具有）
   
   1. 边框： border:2px solid red;
      border-width:2px;
border-style:solid;//dashed(虚线)，dotted（点线）
border-color:red;
      注：可以只为一个边框设置样式，即不同边框设置不同的样式
   2. 
   3. 填充和边界
      padding:20px 10px 15px 30px;//上右下左
      margin:20px 10px 15px 30px;