div标签
什么是div标签
作用:一般用于配合css完成网页基本布局。
span标签
什么是span标签
作用:一般用于配合css修改网页中的一一些局部信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div和span标签</title>
<style>
.conter {
width: 1000px;
height: 500px;
background: #f7fb8f;
margin: auto;
margin-bottom: 10px;
}
.footer {
width: 1000px;
height: 200px;
background: #1ef942;
margin: auto;
margin-bottom: 10px
}
.header {
width: 1000px;
height: 80px;
background: #c0d8c7;
margin: auto;
margin-bottom: 10px
}
.logo {
width: 200px;
height: 50px;
background: pink;
float: left;
margin: 20px;
}
.mav {
width: 600px;
height: 50px;
background: pink;
float: right;
margin: 20px;
}
.img3 {
width: 600px;
height: 50px;
float: right;
}
.imgu {
width: 200px;
height: 50px;
float: left;
}
.article {
width: 650px;
height: 400px;
background: #f3ebf0;
float: right;
margin: 20px;
}
.aside {
width: 250px;
height: 400px;
background: purple;
float: left;
margin: 20px;
}
.p1 { /*article中的标题*/
text-align: center;
text-decoration: underline;
font-family: '宋体',serif;
font-size: 30px;
letter-spacing: 1px;
}
.p1 span {
color: #6667ff;
font-style: italic;
font-size: 30px;
}
.p2 {
text-align: center;
text-decoration: none;
font-family: '宋体','华文楷体',sans-serif;
font-size: 20px;
letter-spacing: 1px;
}
.p2 span {
color: #0f1810;
font-style: italic;
font-size: 20px;
}
.p3 {
text-align: center;
font-size: 28px;
font-family: "华文行楷",sans-serif;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/up.jpg" alt="不见了" class="imgu">
</div>
<div class="mav">
<img src="images/1.jpg" alt="找不到了" class="img3">
</div>
</div>
<div class="conter">
<div class="aside"></div>
<div class="article">
<p class="p1">木兰花-<span>拟古绝词</span></p>
<p class="p2">清 <span>纳兰性德</span></p>
<p class="p3">人生若只如初见,何事秋风悲画扇</p>
<p class="p3">等却变得故人心,却道故人心易变</p>
<p class="p3">骊山语罢清宵半,泪雨霖铃终不怨</p>
<p class="p3">何如薄幸锦衣郎,比翼连枝当日愿</p>
</div>
</div>
<div class="footer"></div>
</body>
</html>
它们之间的区别
1。div标签会独占一行,span标签不会。
2.div是一个容器级别的标签,span是一个文本级别的标签
容器级别标签和文本级别标签的区别
容器级别标签可以嵌套所有标签。
文本级别标签只可以嵌套文字/超链接/图片
容器级别标签
div h ul ol dl li dt dd …
文本级标签
span p buis strong em ins del….
一般情况下嵌套在div中, 或按照组标签来嵌套。
CSS中的标签分类
块级元素
会独占一行,所有的 容器级元素块级元素,p也是块级元素。
行内元素
不会独占一行,文本级元素除了p,都是行内元素。
块级元素和行内元素区别
块级元素:1.独占一行
2.如果没有设置宽度,那么默认和父元素一样宽。如果设置了就和设置高度和宽度一样。
行内元素:1.不会独占一行
2.如果没有设置宽度,会默认和内容一样宽,且其设置了也不会发生改变。不可设置高度和宽度。
行内块级元素
为了让元素能过不独占一行,又可以设置宽度和高度。img input 。。。
显示模式的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示模式转换</title>
<style>
div {
display: inline; /*转换为行内显示*/
background: #1ef942;
width: 200px;
height: 150px;
}
span {
display: block;/*转换为块级元素*/
background: #6667ff;
width: 200px;
height: 150px;
}
.cc {
background: aqua;
width: 200px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span >我是span</span>
<p class="cc">我是段落</p>
<b class="cc">我是加粗</b>
</body>
</html>
通过display属性可以转换:
block块级
inline行内
inline-block 行内块级
将div转换为行内,span转化为块级,p转换为行内块级