行内元素与块级元素

内联元素(行内元素)

一个内联元素只占据它对应标签的边框所包含的空间

<body>
  这是一个<span>行内元素</span>
</body>

span{
  border:1px red solid;
}

行内元素

内联元素只能容纳文本和其他内联元素，内联元素的高度，行高以及顶和底边距不能改变，宽度即为容纳文本和图片的宽度，不可改变。

块级元素

块级元素占据其父元素（容器）的整个空间，通常浏览器会在块级元素前后另起一个新行。

<body>
  <p>这是一个块级元素</p>
</body>

p{
  border:1px blue solid;
}

块级元素

块级元素可以容纳其他块级元素和内联元素，宽度默认是它容器的100%，除非设定一个宽度。

内联元素与块级元素转换

display

块级元素默认为display:block

内联元素默认为display:inline

display:inline-block 既具有block的宽度高度特性又具有inline的同行特性

display:none 不显示该元素，也不会保留该元素原先占有的文档流位置。
display:block 转换为块级元素。
display:inline 转换为行内元素。
行内元素设置float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。
当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

内联元素举例

a - 锚点

abbr - 缩写

big - 大字体

br - 换行

cite - 引用

code - 计算机代码

dfn - 定义字段

em - 强调

i - 斜体

img - 图片

input - 输入框

kdb - 键盘文本

label - 表格标签

q - 短引用

samp - 计算机代码

select - 项目选择

small - 小字体文本

span - 常用内联容器

strike - 中划线

strong - 粗体表强调

sub - 上标

sup - 下标

textarea - 多行文本输入框

u - 下划线

var - 定义变量

块级元素举例

address - 地址

blockquote - 块引用

center -居中对齐块

dir - 目录列表

div - 常用块级容器

dl - 定义列表

form - 交互表单

h1~h6 - 标题

hr - 水平分隔线

menu - 菜单列表

noscript - 不支持script显示内容

ol - 有序列表

p - 段落

pre - 格式化文本

table - 表格

ul - 无序列表

可变元素

可变元素由上下文语境来决定是块元素还是内联元素。

applet - java applet

button - 按钮

del - 删除文本

iframe - inline frame

ins - 插入的文本

map - 图片区块（map）

object - object对象

script - 客户端脚本

参考文献：

说说行内元素与块级元素以及之间的转换？

CSS块级元素、内联元素概念

MDN