一、元素类型
-
块 （display：block）
-
行内块：display：inline-block
-
行内：display：inline
二、元素特点
1. 块元素
1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高
4. div、p、h系列
2.行内元素
1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 设置宽高无效
4. a、span 、b、u、i、s、strong、ins、em、del……
3.行内块元素
1. 一行可以显示多个
2. 可以设置宽高
3. input、textarea、button、select
三、代码实例
1、块元素转换为行内块元素
<!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>
h1,p{
display: inline-block;
}
</style>
</head>
<body>
<h1>这是一个块元素</h1>
<p>这也是一个块元素</p>
</body>
</html>
2、行内元素转换为块元素
<!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>
b,u{
display: block;
}
b{
width: 200px;
height: 40px;
background-color: aqua;
}
u{
width: 200px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<b>我是一个行内元素</b>
<u>我也是一个行内元素</u>
</body>
</html>
3、行内元素转换为行内块元素
<!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>
b,u{
display: inline-block;
}
b{
width: 200px;
height: 40px;
background-color: aqua;
}
u{
width: 200px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<b>我是一个行内元素</b>
<u>我也是一个行内元素</u>
</body>
</html>
