本篇内容主要讲解“CSS中行元素与块元素怎么互相转换”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css中行元素与块元素怎么互相转换”吧!本教程操作环境：win
本篇内容主要讲解“CSS中行元素与块元素怎么互相转换”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css中行元素与块元素怎么互相转换”吧!
本教程操作环境：windows7系统、css3&&HTML5版、Dell G3电脑。
在html中，标签分为两种等级：
行内元素：与其他行内元素并排；不能设置宽高，默认的宽度就是文字的宽度。
块级元素：霸占一行，不能与其他任何元素并列；能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。
例：<p>标签就是一个块级元素，<span>标签就是一个行内元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p{
background: paleturquoise;
}
span{
background: paleturquoise;
}
</style>
</head>
<html>
<body>
<p>测试代码 p标签</p>
<p>测试代码 p标签</p>
<span>测试代码 span标签</span>
<span>测试代码 span标签</span>
</body>
</html>
但元素的类型是进行转换的，我们可以利用css display属性实现行元素和块元素的相互转换。
display 属性规定元素应该生成的框的类型。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联（行内）元素，元素前后没有换行符。
将行元素转为块元素
在行内元素中设置display:block;就可以让行内元素变成块级元素。
将块元素转为行元素
在块级元素中设置display:inline;就可以让块级元素变成行内元素。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p{
background: paleturquoise;
display: inline;
}
span{
background: paleturquoise;
display: block;
}
</style>
</head>
<html>
<body>
<p>测试代码 p标签</p>
<p>测试代码 p标签</p>
<span>测试代码 span标签</span>
<span>测试代码 span标签</span>
</body>
</html>
到此，相信大家对“css中行元素与块元素怎么互相转换”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
--结束END--
本文标题: css中行元素与块元素怎么互相转换
本文链接: https://www.lsjlt.com/news/80651.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0