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