行内元素与块级元素比较全面的区别和转换

发布网友发布时间：2022-04-06 13:42

我来回答

共2个回答

懂视网时间：2022-04-06 18:03

块级元素

1、总是从新行开始

2、高度、行高、外边距以及内边距都可以控制

3、宽度默认是浏览器的100%

4、可以容纳内联元素以及其他块元素

行内元素

1、和相邻元素在一行上

2、高、宽无效，但是水平方向的padding和margin可以设置，垂直方向无效

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

4、行内元素只能容纳文本或其他行内元素（a除外）

（视频教程推荐：css视频教程）

注意：

1、只有文字才能组成段落，因此p里面不能放置块级元素，同理还有这些标签h1-h6，dt等，它们都是文字块级标签，里面不能放置其他块级元素

2、链接里面不能再放置链接

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

块级元素的特点：

1、总是从新行开始

2、高度、行高、外边距以及内边距都可以控制

3、宽度默认是浏览器的100%

4、可以容纳内联元素以及其他块元素

行内元素的特点：

1、和相邻行内元素在一行上

2、高、宽无效，但是水平方向的padding和margin可以设置，垂直方向无效

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

4、行内元素只能容纳文本或其他行内元素（a除外）

行内块标签 inline-block

在行内元素中有几个特殊的标签--<img />、<input>、<td>，可以对他们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

特点：

1、和相邻行内元素（行内部）在一行上，但是之间会有空白间隙；

2、默认宽度是它本身内容的宽度

3、高度、行高、外边距以及内边距都可以控制

标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块：display:inline-block;

推荐教程：css快速入门

热心网友时间：2022-04-06 15:11

　　行内元素与块级函数的三个区别
　　1、行内元素与块级元素直观上的区别
　　行内元素会在一条直线上排列，都是同一行的，水平方向排列
　　块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
　　2、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
　　3、行内元素与块级元素属性的不同，主要是盒模型属性上
　　行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。