行内元素和块级元素

最新推荐文章于 2022-07-17 22:18:13 发布

朝去夜来

最新推荐文章于 2022-07-17 22:18:13 发布

阅读量143

点赞数

分类专栏： html 文章标签： html5 html css

本文链接：https://blog.csdn.net/wenqi1/article/details/119962129

版权

html 专栏收录该内容

18 篇文章 16 订阅

订阅专栏

<span>是文本级，用于修改网页中的局部信息

div是容器级，用于基本布局

span不独占一行，div独占一行

span不能单独设置宽高，div可以

文本级只能嵌套文字、图片、超链接；容器级可以嵌套所有标签

常见容器级标签：div h ul ol dl li dt dd

常见文本级标签：span p buis strong em ins del input

块级元素：容器级+p

文本元素：文本级-p

行内块级元素：img

display用于行内和块级的相互转换，

display:block：行内换块级； display:inline：块级换行内；

display:inline-block：行内、块级互相转换

在我写代码的过程中，display:inline-block用起来不太对，还是要精准转换

示例1：行内和块级转换

<!doctype html>
<html lang="en">
<head>
<title>CSS元素的显示模式</title>
<style>
    *{
    font:30px "隶书";
    }
    div{
	display:inline;
	background-color:red;
	width:100px;
    height:100px;
	}
	p{
	display:inline;
	background-color:green;
	width:100px;
    height:100px;
	}
    h1{
	display:inline;
	background-color:gray;
	width:100px;
    height:100px;
	}
	span{
	display:block;
	width:100px;
    height:100px;
	background-color:yellow;
	}
	strong{
	display:block;
	width:100px;
    height:100px;
	background-color:blue;
	}
	img{
	display:block;
	width:100px;
    height:100px;
	}
</style>
</head>
<body>
	<div>我是div</div>
	<p>我是段落</p>
	<h1>我是标题</h1>
	<hr>
	<span>我是span1</span>
	<span>我是span2</span>
	<strong>我是加粗</strong>
	<img src="images/a3.jpg" alt="nothing"
</body>
	</html>

示例2：span和div的应用

<!doctype html>
<html lang="en">
<head>
	<title>div和span应用2</title>
	<meta charset="utf-8">
	<style type="text/css">
	    .header{
		background-color:red;
		width:1000px;
		height:100px;
		margin-bottom:20px;
		}
		.content{
		background-color:blue;
		width:1000px;
		height:500px;
		margin-bottom:20px;
		}
		.footer{
		background-color:green;
		width:1000px;
		height:100px;
		}
		.logo{
		background-color:pink;
		height:60px;
		width:300px;
		float:left;
		margin:20px;
		}
		.nav{
		background-color:yellow;
		height:60px;
		width:600px;
		float:right;
		margin:20px;
		}
		.cc1{
		background-color:purple;
		height:460px;
		width:300px;
		float:left;
		margin:20px;
		}
		.cc2{
		background-color:skyblue;
		height:460px;
		width:600px;
		float:right;
		margin:20px;
		}
		.cc3{
		background-color:yellow;
		height:60px;
		width:950px;
		margin:25px;
		float:left;
		}
	</style>
</head>
<body>
    <div class="header">
	    <span class="logo">
		</span>
		<span class="nav">
		</span>
    </div>
    <div class="content">
	    <span class="cc1">
		</span>
		<span class="cc2">
		</span>
    </div>
    <div class="footer">
	    <span class="cc3">
		</span>
    </div>
</body>
</html>

朝去夜来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
行内元素和块级元素

<span>是文本级，用于修改网页中的局部信息div是容器级，用于基本布局span不独占一行，div独占一行span不能单独设置宽高，div可以文本级只能嵌套文字、图片、超链接；容器级可以嵌套所有标签常见容器级标签：div h ul ol dl li dt dd常见文本级标签：span p buis strong em ins del input块级元素：容器级+p文本元素：文本级-p行内块级元素：imgdisplay用于行内和块级的相互转换，
复制链接

扫一扫