html中标签(元素)的分类
1.块级元素
1.1 语法
display:block;
/*
设置元素(标签)类型的关键词(样式名)为display
设置块级元素的样式值为block
*/
1.2 特点
1.2.1 独占一行
a.具体体现
该元素独占一行,后面紧跟着的兄弟标签会在下方显示.
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素的特点</title>
<style type="text/css">
.A{
width: 100px;
height: 100px;
background-color: red;
}
.B{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="A"></div>
<div class="B"></div>
</body>
</html>
c.展示效果
1.2.2 可设置宽高
a.具体体现
可以对该元素进行width和height的设置
如果该元素没有设置宽度,会继承父级的宽度
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素的特点</title>
<style type="text/css">
.A{
width: 400px;
height: 300px;
background-color: seagreen;
}
</style>
</head>
<body>
<div class="A"></div>
</body>
</html>
c.展示效果
2.行内元素
2.1 语法
display:inline;
/*
设置元素(标签)类型的关键词(样式名)为display
设置行内元素的样式值为inline
*/
2.2 特点
2.2.1 不独占一行
a.具体体现
该元素不独占一行,后面紧跟着的兄弟元素(后面紧挨着的)若是属于行内元素或者行内块元素,会和它显示在同一行,若超过了父级元素就会换行
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素的特点</title>
<style type="text/css">
.A{
background-color: rebeccapurple;
}
.B{
background-color: orangered;
}
</style>
</head>
<body>
<span class="A">文明</span>
<span class="B">友好</span>
</body>
</html>
c.展示效果
1.2.2 不可设置宽高
a.具体体现
不可以对该元素进行width和height的设置
其宽高由元素(标签)里面的内容决定
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素的特点</title>
<style type="text/css">
.A{
background-color: skyblue;
width: 400px;
height: 400px;
}
.B{
background-color: saddlebrown;
/*行内元素设置宽高是无效的*/
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<span class="A">文明</span>
<span class="B">友好</span>
</body>
</html>
c.展示效果
设置宽度和高度前
设置宽度和高度后
1.2.3 换行符和空格在浏览器中都会解析成一个空格
a.具体表现
换行符指的是源代码中兄弟标签(紧邻着的后一个标签)之间的回车换行符（一个),在浏览器中会解析成一个空格
空格指的键盘输入的多个空格,无论你在一行输入多少个空格，都会在浏览器中解析成一个空格
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素的特点</title>
<style type="text/css">
.A{
background-color: skyblue;
}
.B{
background-color: saddlebrown;
}
</style>
</head>
<body>
<span class="A">文 明</span>
<span class="B">友好</span>
</body>
</html>
c.展示效果
1.2.4 行内元素的外边距一半有效,一半无效
a.具体表现
行内元素的上外边距(margin-top)和下外边距(margin-bottom)设置了也不会改变其元素的位置
行内元素的左外边距(margin-left)和右外边距(margin-right)设置了,会改变元素的位置
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素的特点</title>
<style type="text/css">
/* 清除默认样式 */
*{
padding: 0px;
margin: 0px;
/* 清除源代码中的换行符被解析成空格的影响*/
font-size: 0px;
}
.A,.B{
font-size: 16px;
}
.A{
background-color: skyblue;
/* margin-top无效果,margin-right有效果 */
margin-top:100px;
margin-right: 100px;
}
.B{
background-color: saddlebrown;
}
</style>
</head>
<body>
<span class="A">文 明</span>
<span class="B">友好</span>
</body>
</html>
c.展示效果
设置上外边距和右外边距之前:
设置上外边距和右外边距之后:
3.行内块元素
3.1 语法
display:inline-block;
/*
设置元素(标签)类型的关键词(样式名)为display
设置行内块元素的样式值为inline-block
*/
3.2 特点
3.2.1 不独占一行
a.具体表现
该元素不独占一行,后面紧跟着的兄弟元素(后面紧挨着的)若是属于行内元素或者行内块元素,会和它显示在同一行,若超过了父级元素就会换行。
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素的特点</title>
<style type="text/css">
/* 清除默认样式 */
*{
padding: 0px;
margin: 0px;
/* 清除源代码中的换行符被解析成空格的影响*/
font-size: 0px;
}
div{
width: 400px;
height: 400px;
/* 设置背景颜色,使div所占区域更加显眼 */
background-color: red;
}
img{
width: 150px;
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="img/sangqi.webp" alt="">
<img src="img/sangqi.webp" alt="">
<img src="img/sangqi.webp" alt="">
<img src="img/sangqi.webp" alt="">
<img src="img/sangqi.webp" alt="">
</div>
</body>
</html>
c.展示效果
3.2.2 可设置宽高
a.具体表现
可以对该元素进行width和height的设置
如果该元素没有设置宽度,不会继承父级元素的宽度,其宽度由内容决定
若设置了高度,未设置宽度,那么
图片显示宽度=图片设置高度/图片原高度*图片原宽度
例如下面所给的源代码例子中,图片的宽度和高度如下所示
设置了图片高度为200px,那么在浏览器中,图片显示宽度=200/156*295=378.02px
浏览器中图片显示的大小如下所示:
同理可知:若未设置图片高度,设置了图片宽度,那么
图片显示高度=图片设置宽度/图片原宽度*图片原高度
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素的特点</title>
<style type="text/css">
/* 清除默认样式 */
*{
padding: 0px;
margin: 0px;
/* 清除源代码中的换行符被解析成空格的影响*/
font-size: 0px;
}
div{
width: 400px;
height: 400px;
/* 设置背景颜色,使div所占区域更加显眼 */
background-color: red;
}
img{
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="img/sangqi.webp" alt="">
<img src="img/sangqi.webp" alt="">
<img src="img/sangqi.webp" alt="">
</div>
</body>
</html>
c.展示效果
4.补充
a.行内元素的紧邻着的兄弟元素(后一个)是行内块元素时,两标签会在同一行显示(不超过父盒子的宽度)
b.标签是有默认类型的
常见的块级元素有div、p、标题标签(h1…)、form表单标签、ol有序、ul无序、table标签、hr标签、li标签
常见的行内标签有span标签、a标签、字体修饰标签(i斜体,b加粗,u下划线,del删除线、mark标记)、font标签、br标签、input标签
常见的行内块标签有img、video、audio
2099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
