html零基础必看——html入门，编程就是如此简单
第五章：元素类型（标签分类）
前言
我们在第一章学到，html标签主要有三种成份：元素、属性、值。此处的元素实际上就是指的是标签，元素类型就是对标签进行分类。常用元素类型: 块级元素、行内元素 、行内块元素，本章将对这三种元素类型进行讲解！
一、块级元素
1.常见块级元素
常见的块级元素有：div、p、h1~h6、ul、ol、li、dl、dt、dd、form、table等
2.块级元素特征
- 独占一行，不会和其他元素并排显示，会自动换行。
- 在未设置宽度时，默认是继承父级的宽度 (默认没写父级就是浏览器 继承浏览器宽度100% )。
- 在未设置宽度时，由内容撑开。
- 宽度、高度可以设置，支持内外边距
<head>
<title>块级元素</title>
<link rel="stylesheet" href="rest.css">
<style>
h1{
background-color: pink;
}
p{
width: 400px;
background-color: purple;
}
div{
width: 600px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<h1>我是h1，我没有设置宽和高。我的宽度是继承我父级的宽度，高度是我自己撑开的</h1>
<p>我是p，我设置了宽度。我的高度是我自己撑开的</p>
<div>我是div，我设置了宽和高</div>
</body>
效果图：
二、行内元素
1.常见行内元素
常见的行内元素有：a、img、span、i、em、sub、sup、strong等
2.行内元素特征
- 不霸占位置，和其它行内元素共享一行显示，不会自动换行，各行内元素之间留有一定空隙。
- 不支持宽高属性 默认宽高度是0 ，大小靠文字内容撑开。
- 不支持上下外边距，不支持auto属性，可由左右外边距移动。
- 支持padding内边距撑开内容。
<head>
<title>行内元素</title>
<link rel="stylesheet" href="rest.css">
<style>
span, i, em{
background-color: pink;
}
.span1{
/* 行内元素不支持上下外边距和auto属性 */
margin: 10px auto;
}
.span2{
/* 行内元素不支持上下外边距，但支持左右外边距 */
margin: 50px 60px;
}
.span3{
/* 行内元素支持内边距，可由内边距撑开盒子 */
padding: 80px;
}
</style>
</head>
<body>
span class="span0">我是span0</span>
<span class="span1">我是span1</span>
<span class="span2">我是span2</span>
<span class="span3">我是span3</span>
<i>我是i</i>
<em>我是em</em>
</body>
效果图：
三、行内块元素
1.常见行内块元素
常见的块级元素有：img、input、textarea、select、buttom等
2.行内块元素特征
- 本质上是行内元素，具有行内元素特征，并排显示，不会自动换行，各行内块元素之间留有一定空隙。
- 支持宽、高度设置，宽、高度由内容撑开，具有部分块级元素的特征。
- 支持外边距，但不支持auto属性。
- 支持内边距。
<head>
<title>行内块元素</title>
<link rel="stylesheet" href="rest.css">
<style>
.pic1{
/* 行内块元素：支持宽高设置 */
width: 300px;
height: 300px;
border: 1px solid pink;
/* 行内块元素：支持外边距，但不支持auto属性 */
/* margin:20px auto ; */
margin: 20px;
/* 行内块元素：支持内边距 */
padding: 20px;
}
.pic2{
width: 300px;
height: 300px;
border: 1px solid red;
margin:20px;
padding: 30px;
}
</style>
</head>
<body>
<img src="./img/1.jpg" alt="" class="pic1">
<img src="./img/2.jpg" alt="" class="pic2">
</body>
效果图：
注意:img、input等行内元素可以设置宽高。
- 因为
img、input等是置换元素。置换元素在其显示中生成了框，这就是有些内联元素能够设置宽高的原因。 - html中的置换元素有
<img>、<input>、<textarea>、<select>、<object>、<iframe> 和 <canvas>等。 - html 的大多数元素是非置换元素，除置换元素之外，所有的元素都是非置换元素。
3.解决行内块元素之间的空隙问题
我们先来看一段代码：
<head>
<title>解决行内块元素间空隙问题</title>
<link rel="stylesheet" href="rest.css">
<style>
div{
width: 700px;
height: 400px;
border: 2px solid red;
}
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div>
<img src="./img/1.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
</body>
效果图：
我们发现这两个行内块元素img中间有一定的空隙，这就是涉及到行内块元素之间的空隙问题。解决方法如下：
1.在编译器上编写代码时，使各行内块部分代码不让换行，挤在一行编写，删除空格。
2.给行内块元素父级重新设置一下文字大小属性为0（font-size：0），然后在行内块盒子里再重新定义文字大小。
<div>
<!-- 解决办法一：在编译器上编写代码时，使各行内块部分代码不让换行，删除空格。 -->
<img src="./img/1.jpg" alt=""><img src="./img/1.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
<style>
/* 解决办法二：
给行内块元素父级重新设置一下文字大小属性为0（font-size：0），然 后在行内块盒子里再重新定义文字大小。
*/
div{
width: 700px;
height: 400px;
border: 2px solid red;
/* 给行内块元素父级重新设置一下文字大小属性为0（font-size：0） */
font-size: 0;
}
img{
width: 300px;
height: 300px;
/* 然后在行内块盒子里再重新定义文字大小。 */
font-size: 16px;
}
</style>
4.解决行内块元素基线对齐问题
vertical-align垂直基线对齐属性，属性值：
top:顶部对齐
middle：中部对齐
bottom：底部对齐等
我们先来看一段代码：
<body>
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<span>我是span</span>
</body>
效果图：
我们看到文字在下面，很不舒服。如何让文字在中间或是上面呢，这就涉及到了一个行内块元素基线对齐问题。
解决办法，给其中任意一个元素加上vertical-align设置一个基线对齐属性值，顶部，中部，或底部对齐在下章（二、补充）中也会提到
<head>
<title>解决行内块元素基线对齐问题</title>
<link rel="stylesheet" href="rest.css">
<style>
img{
vertical-align: middle;
}
</style>
</head>
<body>
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<span>我是span</span>
</body>
效果图：
此时我们发现可以通过vertical-align属性来设置需要对齐的基线了。
5.元素类型转换
使用display属性，属性值：
display: block：变为块级元素
display: inline：变为行内元素
display: inline-block：变为行内块元素
display: none：隐藏元素
总结
上述是小编为大家整理的元素分类，及行内块间隙问题的解决、基线对齐问题、元素类型转换等部分进行了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。