• 技术文章 >web前端 >css教程

    css中如何将行元素转为块元素,块元素转为行元素

    青灯夜游青灯夜游2021-09-10 16:28:20原创144

    css中可以利用display属性实现行元素和块元素的相互转换:给行元素添加“display:block;”样式可以将其转为块元素;给块元素添加“display:inline;”样式可以将其转为行元素。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在HTML中,标签分为两种等级:

    例:<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>

    1.png

    但元素的类型是进行转换的,我们可以利用css display属性实现行元素和块元素的相互转换。

    display 属性规定元素应该生成的框的类型。

    将行元素转为块元素

    在行内元素中设置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>

    2.png

    推荐教程:《CSS视频教程

    以上就是css中如何将行元素转为块元素,块元素转为行元素的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 行元素 块元素
    上一篇:用css怎么画树 下一篇:怎么设置css文本不可选中
    线上培训班

    相关文章推荐

    • html中css代码可以放在哪里• css怎么给文字加背景• javascript怎么修改css样式• css如何设置标题阴影边框• html/css怎么设置背景图片居中

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网