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

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 元素属性把它转换成块级元素。就可以定义宽高了。

万能判断法:

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

原文地址:https://www.cnblogs.com/CH-cnblogs/p/13583011.html