CSS 标签的类型

HTML 元素分为：块元素、行元素、行内块元素！

友情链接

一、块元素

       特点：

               1.总是从新的一行开始（独占一行）；

               2.高度、宽度都是可控的；

               3.宽度没有设置时，默认是它本身父容器的100%；

               4.块级元素中可以包含块级元素和行内元素；

               5.块级文字元素中不能放入其他块级元素；

               6.块级大多为结构性标记；

  常见块级元素：

  <h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <pre>...</pre>  预格式化

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>  盒子、容器
  
  <fieldset>...</fieldest>  自定义控件

二、行内元素

      特点：

            1.和其他元素都在一行；

            2.高度、宽度以及内边距都是不可控的；

            3.宽高就是内容的高度，依靠自身字体大小和图形支撑结构的，不可以改变；

               给包裹行内元素的元素设置 text-align： center；可以让行内元素、行内块元素居中；

            4.行内元素不能包含块级元素；

            5.行内元素的paddding可以设置；

            6.margin只能够设置水平方向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom无效；

            7.块级大多为结构性标记；

  常见行内元素：

  <span>...</span> 

  <a>...</a>  超链接

  <b>...</b>  加粗

  <strong>...</strong>  加粗
  
  <sup>...</sup>  上标

  <sub>...</sub>  下标

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

三、行内块元素

       特点： 综合块级元素与行内元素的特性，可设宽高（默认是内容宽高），也可以设置内外边距！

 常见行内块元素：

	<span>...</span>

	<a>...</a>

	<img/>

	<textarea>...</textarea>

	<button>..</button>

	<input>

	<br>

	<label>...</label>

	<select>...</select>

	<strong>...</strong>

	<em>...</em>

vertical-align：  行内块元素在垂直方向上与文本对齐的方式

            vertical-align： base-line；  与基线对齐（默认）；

            vertical-align： middle； 居中对齐；

            vertical-align： top； 顶部对齐；

            vertical-align： bottom；  底部对齐；

四、display ：行内元素、块元素、行内块元素转换

           display：block； 转换为块元素；

           display： inline； 转换为行内元素；

           display： inline-block；  转换为行内块元素；