---

一、定义

---

• 块级元素

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

例如：
HTML

<p>这是块级元素</p>

CSS

p{
    background: red;
  }

效果：

块级效果图

---

• 行内元素

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

例如：
HTML

<b>这是行内元素</b>

CSS

b{
   background: red;
  }

效果：

行内效果图

区分方法：

块级元素都是独占一行，也就是说如果它后面再跟一个元素（不管是块级还是内联）的话，那个元素都是另起一行的。

---

二、元素列表

---

1.块级元素

<address>-----------------------//联系方式信息.
<article>-----------------------//文章内容。
<aside>-------------------------//伴随内容。
<audio>-------------------------//音频播放。
<blockquote>--------------------//块引用。
<canvas>------------------------//绘制图形。
<dd>----------------------------//定义列表中定义条目描述。
<div>---------------------------//文档分区。
<dl>----------------------------//定义列表。
<fieldset>----------------------//表单元素分组。
<figcaption>--------------------//图文信息组标题
<figure>------------------------//图文信息组 (参照 <figcaption>)。
<footer>------------------------//区段尾或页尾。
<form>--------------------------//表单。
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>//标题级别 1-6.
<header>------------------------//区段头或页头。
<hgroup>------------------------//标题组。
<hr>----------------------------//水平分割线.
<noscript>----------------------//不支持脚本或禁用脚本时显示的内容。
<ol>----------------------------//有序列表。
<output>------------------------//表单输出。
<p>-----------------------------//行。
<pre>---------------------------//预格式化文本。
<section>-----------------------//一个页面区段。
<table>-------------------------//表格。
<tfoot>-------------------------//表脚注。
<ul>----------------------------//无序列表。
<video>-------------------------//视频。

2.行内元素

 <a>----------------------------//锚点
 <abbr>-------------------------//缩写
 <acronym>----------------------//首字
 <b>----------------------------//粗体（不推荐）
 <bdo>--------------------------//bidi override
 <big>--------------------------//大字体
 <br> --------------------------//换行
 <cite>-------------------------//引用
 <code>-------------------------//计算机代码（在引用源码的时候需要）
 <dfn>--------------------------//定义字段
 <em>---------------------------//强调
 <font>-------------------------//字体设定（不推荐）
 <i>----------------------------//斜体
 <img>--------------------------//图片
 <input>------------------------//输入框
 <kbd>--------------------------//定义键盘文本
 <label>------------------------//表格标签
 <q>----------------------------//短引用
 <s>----------------------------//中划线（不推荐）
 <samp> ------------------------//定义范例计算机代码
 <select>-----------------------//项目选择
 <small>------------------------//小字体文本
 <span>-------------------------//常用内联容器，定义文本内区块
 <ke>---------------------------//中划线
 <strong> ----------------------//粗体强调
 <sub>--------------------------//下标
 <sup>--------------------------//上标
 <textarea>---------------------//多行文本输入框
 <tt>---------------------------//电传文本
 <u>----------------------------//下划线
 <var>--------------------------//定义变量

---

三、块级元素和内联元素之间的转换

---

1、display

• display:none; 不显示该元素，也不会保留钙元素原先占用的文档流位置。
• display:block;转化为块级元素。
• display:inline;转化为行内元素。
• display:inline-block;转化为行内块级元素。

2、float（浮动）

• float：把行内元素设置完float:left/right后，该行内元素的display属性被赋予block值，且拥有浮动特性。

3、position（定位）

• position：把行内元素设置为position:absolute/fixed后，都会使原先的行内元素变为块级元素。

注意❗️:设置float和positon会有其他的副作用

---

四、块级元素与内联元素的区别

---

区别1

块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

区别2

块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高

区别3

块级：块级元素可以设置margin，padding
行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

区别4

块级：display:block;
行内：display:inline;
可以通过修改display属性来切换块级元素和行内元素

---

参考：

• https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements
• http://blog.csdn.net/chen_zw/article/details/8713205

---

• 注：自由转载-非商用-非衍生-保持署名

---