HTML块级元素与行内元素的区别

块级元素：块级大多为结构性标记

  <address>...</adderss>   

  <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>

行内元素：行内大多为描述性标记

  <span>...</span>

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

  <br>  换行

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

  <strong>...</strong>  加粗

  <img >  图片

  <sup>...</sup>  上标

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

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

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

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

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

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表

·块级元素

1.总是从新的一行开始

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

3.宽度没有设置时，默认为100%。没有定义宽度时，宽度为父集元素的宽度

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

5.只有把块级元素变为浮动元素，才会根据内容自动调整尺寸

6.行内块可以定义内外边距

 块转行内 display:inline;
 块转行内块 display:inline-block;`

·行内元素

1.和其他元素都在一行，遇到边界换行

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

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

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

5.行内元素默认根据内容自动调整尺寸

6.不支持padding上下设置，支持padding左右设置

7.不支持margin上下设置，支持margin左右设置

去除行内元素默认间距：

设置父元素font-size:0

★在一行显示

★不能直接设置宽高

★宽高为内容撑开的宽高

★行内元素可以定义左右的内外边距，上下会被忽略掉

行内转块 display:inline-block;
块或行内转行内块 display:inline-block;

行内块元素：

特点：

在一行上显示

可以设置宽高