CSS/HTML

推荐列表 站点导航

当前位置:首页 > 脚本编程 > CSS/HTML >

浅谈块状元素和内联元素之间的区别

来源:网络整理  作者:  发布时间:2020-12-18 13:55
html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。那么块状元素和...

如:a{display:block;}

1、和其他元素都在一行上;

3、元素的宽度就是元素所包含的图片或文字的宽度,不可设置;

块状元素

1、和其他元素在同一行上,不独占一行;

内联块状元素特点:

浅谈块状元素和内联元素之间的区别

在html中<p>、 <p>、<h1>、<form>、<ul> 和 <li>就是块状元素。内联元素可以通过设置display:block;显示为块状元素。

1、每个块状元素都从新的一行开始,并且其后的元素也另起一行(独占一行);

在html中,<span>、<em>、<a>、<p>等标签是典型的内联元素。当然块状元素也可以通过设置display:inline;显示为内联元素,从而使块级元素具有内联元素的特点。

html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。那么块状元素和内联元素区别是什么?下面给大家介绍一下。

解决方法:写在一行,中间不要有空格、回车之类的符号。

*:当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

内联元素

3、元素宽度在不设置的情况下,占它本身父容器的100%(和父元素宽度一致);

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。<img>、<input>标签就是这种内联块状标签。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

内联块状元素

p{ display:inline; } ...<p>我要变成内联元素!</p>

内联元素的特点:

块级元素的特点:

(ps:内联元素的顶部底部边距margin-top及margin-bottom属性不起作用,而margin-left及margin-right属性可以起作用。padding属性top、bottom、left、right也可起作用,但是padding-top属性最多只能撑到浏览器顶部,padding-top高于浏览器顶部,元素不会下移。当为行内元素添加背景时可以使用padding,但是背景色会覆盖周围元素。)

2、元素的高度、宽度及顶部底部边距不可设置;

2、元素的高度、宽度、行高以及顶和底边距都可设置;

相关热词:

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/5204.shtml

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

浅谈块状元素和内联元素之间的区别

2020-12-18 编辑:

如:a{display:block;}

1、和其他元素都在一行上;

3、元素的宽度就是元素所包含的图片或文字的宽度,不可设置;

块状元素

1、和其他元素在同一行上,不独占一行;

内联块状元素特点:

浅谈块状元素和内联元素之间的区别

在html中<p>、 <p>、<h1>、<form>、<ul> 和 <li>就是块状元素。内联元素可以通过设置display:block;显示为块状元素。

1、每个块状元素都从新的一行开始,并且其后的元素也另起一行(独占一行);

在html中,<span>、<em>、<a>、<p>等标签是典型的内联元素。当然块状元素也可以通过设置display:inline;显示为内联元素,从而使块级元素具有内联元素的特点。

html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。那么块状元素和内联元素区别是什么?下面给大家介绍一下。

解决方法:写在一行,中间不要有空格、回车之类的符号。

*:当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

内联元素

3、元素宽度在不设置的情况下,占它本身父容器的100%(和父元素宽度一致);

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。<img>、<input>标签就是这种内联块状标签。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

内联块状元素

p{ display:inline; } ...<p>我要变成内联元素!</p>

内联元素的特点:

块级元素的特点:

(ps:内联元素的顶部底部边距margin-top及margin-bottom属性不起作用,而margin-left及margin-right属性可以起作用。padding属性top、bottom、left、right也可起作用,但是padding-top属性最多只能撑到浏览器顶部,padding-top高于浏览器顶部,元素不会下移。当为行内元素添加背景时可以使用padding,但是背景色会覆盖周围元素。)

2、元素的高度、宽度及顶部底部边距不可设置;

2、元素的高度、宽度、行高以及顶和底边距都可设置;

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供学习参考!
本文地址为 https://v30.fanwenzhu.com/jiaob/cssm/5204.shtml

相关文章

风云图片

推荐阅读

返回CSS/HTML频道首页