行内表单inline_详解块级元素、行内元素、行内块级元素类型、区别及相互转化...

1)块级元素

特点：

1.总是从新的一行开始

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

3.宽度没有设置时，默认为100%

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

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

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

常见块级元素：

  <center>...center>  地址文字  <h1>...h1>  标题一级  <h2>...h2>  标题二级  <h3>...h3>  标题三级  <h4>...h4>  标题四级  <h5>...h5>  标题五级  <h6>...h6>  标题六级  <hr>  水平分割线  <p>...p>  段落  <pre>...pre>  预格式化  <blockquote>...blockquote>  段落缩进   前后5个字符  <marquee>...marquee>  滚动文本  <ul>...ul>  无序列表  <ol>...ol>  有序列表  <dl>...dl>  定义列表  <table>...table>  表格  <form>...form>  表单  <div>...div>

(2)行内元素

特点：

1.和其他元素都在一行

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

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

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

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

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

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

常见行内标签:

特点：

1.和其他元素都在一行

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

3.宽高就是内容的高度，不可以改变

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

5.行内大多为描述性标记

  <b>...b>  加粗  <strong>...strong>  加粗    <sup>...sup>  上标  <sub>...sub>  下标  <i>...i>  斜体  <em>...em>  斜体  <del>...del>  删除线  <u>...u>  下划线

3)行内块级元素

特点：

综合块级元素与行内元素的特性，可设宽高(默认是内容宽高)，也可以设置内外边距

常见行内块级元素：

  <span>...span>  <a>...a>  <img/>  <textarea>...textarea>  <button>..button>  <input>  <br>  <label>...label>  <select>...select>  <canvas>...canvas>  <progress>...progress>  <cite>...cite>  <code>...code>  <strong>...strong>  <em>...em>  <audio>...audio>    <video>...video>

(4)显示模式转换

display:block|inline|inline-block

(1)块级转行内、行内块级

    <h1 class="inline">Talk is easy,show me the code!h1>  <h1 class="inline">Talk is easy,show me the code!h1>    <h1 class="inline">Talk is easy,show me the code!h1>  <h1 class="inline">Talk is easy,show me the code!h1>  <hr>    <h1 class="inline-block">Talk is easy,show me the code!h1>  <h1 class="inline-block">Talk is easy,show me the code!h1>    <h1 class="inline-block">Talk is easy,show me the code!h1>  <h1 class="inline-block">Talk is easy,show me the code!h1>

将前两行转为行内元素，而将后两行转为行内块级元素：

    .inline{      display: inline;      background: #ccc;    }    .inline-block{      display: inline-block;      background-color: #ccc;    }    hr{      height:5px;      background: green;    }

有时间大家可以尝试一下

‍