html区块元素/内联元素

区块元素（以块显示的元素）

1.特点
a.每个元素独占一行
b.不设置宽高时，宽度等于父元素宽度，高度为0；有内容时高度由内容撑开
c.不解析换行符
d.支持所有样式
2.常见区块元素
div(盒子）、ul(无序列表）、ol(有序列表）、dl（定义列表）、li(列表的项）、p(段落)、h1~h6（网页中的标题，从大到小）、table(表格)、form(表单)、pre(源代码）、hr(分割线)
3.常用css样式
display:block

内联元素（文本的显示方式）

1.特点
a.一行非空时，非区块元素在同一行显示
b.宽高完全由内容撑开
c.会解析换行符
d.不支持宽高样式，margin、padding使用时会出现问题
2.常见内联元素
span（行间元素）、a（超链接）、b（加粗）、strong（加重）、i（斜体）、em（着重）、sub（下标）、sup（上标）、ins（插入）、del（删除）、img（图片）、input（表单项）、label（表单标记）、br（换行）
3.常用css样式
display:inline

内联块元素

1.特点
a.一行非空时，非区块元素在同一行显示
b.不设置宽高时完全由内容（文字图片)撑开
c.会解析换行符
d.支持所有样式
e.虽然img和input都是内联元素，但是他们表现的是内联块元素的效果，既可以设置宽高等样式
2.是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素
常见：iframe（框架）canvas（画布）video（视频）audio（音频）img（图片）input（表单项）
3.常用css样式
display:inline-block

改变元素种类方法

1.用样式display的值修改样式：block（区块元素）、inline（内联元素）、inline-block（内联块元素）、none（不占位元素，既隐藏）
2.float浮动：无论是块级元素还是行内元素被设置为float之后，都会默认添加属性display:inline-block（行内块级元素），也就是说浮动会让元素变为拥有块级属性的行内元素
3.display方法和float方法区别
display：inline
允许内敛元素同行显示
float：left
元素右边允许同行显示，但左边不允许
4.区块元素设置双倍浮动可使用display:inline

常见的空元素（没有内容）:br、input、hr、img