一、定义
- 块级元素
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(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
- 注：自由转载-非商用-非衍生-保持署名
网友评论