行内元素、块级元素和行内块元素区别

行内元素、块级元素和行内块元素区别

1、块级元素的特点
(1)每个块级元素都从新的一行开始，并且其后得元素也另起一行

(2)元素的 高 宽 行高顶和底边距离都可以设置

(3)元素宽度在不设置得情况下，是它本身父级元素得100% （和父元素得宽度一致），除非设定一个宽度。

(4)可以容纳内联元素和其他块元素

2、行内元素的特点
(1)和其他元素都在一行上

(2)元素的 高 宽 行高顶和底边距离都不可以设置，但是 margin 和 padding 可以设置，垂直方向的无效

(3)行内元素只能容纳文本或者其他行内元素

3、行内块元素
(1)和相邻行内元素（行内快）在一行上，但是之间会有空白缝隙

(2)元素的 高 宽 行高顶和底边距离都可以设置

(3)默认宽度就是它本身内容的宽度

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、
<ul>、<dl>、<table>、<address>、
<blockquote> -- 引用 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、
<strong>、<label>、<q>、<var>、
<cite>、<code>

常用的内联块状元素有：

<img>、<input>、<td>

4、行内元素 和块级元素的转换
display ： block；
《大白话：将显示形式设置为块级元素》

display ： inline；
《大白话：将显示形式设置为行内元素》

display ： inline-block;
《大白话：inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。》

在简单一点说：就是具有了块级元素和行内元素的各自特点。
1、可以设置宽高
2、不换行