CSS-块级元素、行内元素

一、区别

1.块级元素（block元素）：

（1）总是在新行上开始，css把块元素加上display:inline属性，也可以一行上排列。；
（2）高度，行高以及外边距和内边距都可控制；
（3）宽度缺省是它的容器的100%，除非设定一个宽度。
（4）它可以容纳行内元素和其他块元素

通俗理解：块级元素是一个容器，可以容纳其他元素,容纳的元素默认按行排列

2.行内元素（inline元素）：

（1）在一行内从左到右显示，css中加上display:block属性，也可以从新行开始；
（2）高，行高及外边距和内边距不可改变；
（3）宽度就是它的文字或图片的宽度，不可改变
（4）行内元素只能容纳文本或者其他行内元素

通俗理解：行内元素主要显示具体文字、图片，在一行内从左到右显示。

二、元素划分

1.块级元素（block元素）：

div - 常用块级容器，也是css layout的主要标签
form - 交互表单
h1 h2 ... - 标题
hr - 水平分隔线
p - 段落
table - 表格
ul - 非排序列表（无序列表）

2.行内元素（inline元素）：

a - 锚点
br - 换行
em - 强调
img - 图片
input - 输入框
label - 表格标签
select - 项目选择
span - 常用内联容器，定义文本内区块
textarea - 多行文本输入框