CSS笔记8：元素的显示模式——行内元素/块级元素/行内块元素，以及相互转换

最新推荐文章于 2022-09-14 15:58:14 发布

惹尘

最新推荐文章于 2022-09-14 15:58:14 发布

阅读量222

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_46037153/article/details/109802865

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: #FFC0CB;
		}
		
		
		a {
			width: 100px;
			height: 50px;
			background-color: pink;
			/* 把行内元素a转换成块级元素*/
			display:block;
			}
			
		div {
			width: 300px;
			height: 100px;
			background-color: purple;
			/* 把div块级元素转成行内元素 */
			display:inline;
			}
			
			
			
		span {
				width: 300px;
				height: 30px;
				background-color: skyblue;
				display: inline-block;/* 行内元素转成行内块元素 */
			}
	</style>
	<body>
		<!-- 块元素 -->
		<!-- 常见的块元素<h1>-<h6><p><div><ul><ol><li>
		1.比较霸道，独占一行
		2.高度宽度，外边距内边距都可以控制
		3.宽度默认为容器（父级宽度body）的100%
		4.是一个容器，里面可以放行或者块级元素
		     文字类的元素内不能使用块级元素
			 <p>里面不能放<div>
			 <h1>到<h6>都是文字块标签，里面也不能放其他块级元素
			 -->
		<div>比较霸道，独占一行</div>瑟瑟发抖
		<!-- 行内元素 -->
		<!--<a><span><em><strong><i><del>等
		 1.一行可以显示多个
		 2.高宽直接设置无效
		 3.默认宽度就是他本身的宽度
		 4.行内元素只能容纳文本或者其他行内元素 
		   注意：链接里面不能放链接
		        特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
		 -->
		 <!-- 行内块元素 -->
		<!-- <img /><input /><td>他们具有块元素和行元素特点 -->
	<!-- 	1.他们在一行上，但是中间有空白间隙
		2.默认宽度就是他本身内容的宽度（行内元素特点）
		3.高度，行高，外边距已经内边距都可以控制（块级元素特点）	
			
			 -->
			
			
			
			
	<!-- 元素显示模式转换		 -->
	<!-- 行内元素——>块级元素 -->
	<a href="#">金星老师</a>
	<a href="#">金星老师</a>
	
	<!-- 块级元素——>行内元素 -->
	<div>我是块级元素</div>
	<div>我是块级元素</div>
	
	<!-- 行内元素转成行内块元素 -->
	<span>行内元素转成行内块元素</span>
	<span>行内元素转成行内块元素</span>
	
	
		</body>
</html>

在这里插入图片描述

惹尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记8：元素的显示模式——行内元素/块级元素/行内块元素，以及相互转换

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> div { width: 100px; height: 100px; background-color: #FFC0CB; } </style> <body> <!--
复制链接

扫一扫

专栏目录