块元素、行内元素、行内块元素 小结，不足之处请谅解

HTML中常用标签通常分为块元素、行内元素、行内块元素  ;

常见的分类方法有（个人分发，不喜勿怪）

块元素:div p h ol ul dl li dt dd form hr；

行内元素:span i em b strong a br；

行内块元素:  img input select textarea；

 

那么块元素、行内元素、行内块元素 都有神马特性呢？

在此之前，讲一下：

行内元素，块元素，行内块，可以相互转换，通过修改display属性值来切换元素的样式，

行内元素display：inline，块级元素display：block。行内块：display：inline-block；

 

块元素

1》块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

2》块级元素却总是会在新的一行开始排列，块级元素独占一行，垂直向下排列，

若想使其水平方向排序，可使用左右浮动（float：left/right）

或者修改display属性值，定位（脱流了）；来实现让其水平方向排列。

3》块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；

 

行内元素

1》行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，和其他元素都在一行上

2》是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；    

3》行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

 

行内块元素  ;

1》在行内元素中有几个特殊的标签， 可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

2》和相邻行内元素（行内块）在一行上,但是之间会有**空白缝隙

3》默认宽度就是它本身内容的宽度。高度，行高、外边距以及内边距都可以控制。

 

小结：

1》行内元素就像一条直线他是没有空间的没有高宽的。

2》块级元素他是有宽高的是一个空间。也可以理解成一个盒子像<div>就是一个盒子，你想要把他变成多大的盒子，取决于你在里面放了多少东西。

行内元素和块级元素的区别到底在哪里呢？？？？

3》行内元素不可以设置宽高，或者说内元素是你即便设置了宽高但是浏览器也不会识别出来，

但是块级元素就可以，你可以直接给它一个命名。但行内元素你要么在块级元素下面来定义块级元素，给他宽高。或者就是用 display：block 元素属性把它转换成块级元素。就可以定义宽高了。

 

万能判断法：

给元素设置一个宽高加个背景颜色，如果背景颜色和内容紧贴在一起就是行内元素，如果和你的宽高一样就是块级元素！