前端的元素类型-优快云博客

本文链接：https://blog.youkuaiyun.com/ZJH_are/article/details/125754668

本文介绍了HTML中的元素类型，包括块元素、行内元素和行内块元素，强调了它们的特点和应用场景。同时，讲解了如何通过`display`属性进行元素类型的转换，实现灵活的布局控制。此外，还探讨了`hover`伪类选择器的使用，展示了鼠标悬浮时的动态效果。最后，提供了一个图片垂直居中显示的案例，利用`vertical-align`属性实现居中对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素类型的分类:

块元素、行内元素、行内块元素

一.块元素的使用:块级元素、块状元素、块元素
1.常见的块元素:div、p、h、ul>li、ol>li
2.块级元素的常见特点
- 块级元素可以直接设置宽高大小,通常都是以盒子的方式在浏览器中显示的
- 块级元素默认是独占一行的,会上下排列
- 为了嵌套其他标签或者是其他元素类型作为盒子实现网页布局

二.行内元素的使用:行内元素、内联元素
1.常见的行内元素:a、span、i、em、b、strong
2.行内元素的常见特点
- 行内元素无法直接设置宽高大小,宽高由文本内容撑开的
- 行内元素默认在一行内逐个显示
- 常见bug:设置垂直方向的margin值是没有效果的

三.行内块元素的使用:之前根据css的显示分类第三种元素类型叫做可变元素(根据上下文的关系进行显示方式)
1.常见的行内块元素:input、img
2.行内块元素常见的特点
- 可以直接设置宽高大小 => 块级元素
- 可以在一行内逐个显示 => 行内元素
- 拥有了块级元素设置宽高大小,行内元素在一行显示的共同特点
3.问题:所有的行内块都会以基线对齐的(虚拟线)
4.解决:vertical-align:top\bottom\middle

元素类型的转换

元素类型的转换
1.属性:display(显示方式)
2.属性值:官方有19个属性值,常用的只是两三个
- block 块,将其他的元素类型转换为块级元素,使其具有块级元素的特点(a=>块级)
- inline 行内,将其他的元素类型转换为行内元素,使其具有行内元素的特点
- inline-block 行内块,将其他的元素类型转换为行内块元素,使其具有行内块元素的特点
- list-item 了解列表项目(有序无序) 和转换成块级元素的效果是一样的
- none 无、隐藏(不占位置的)
3.拓展:浮动属性不仅可以让元素脱离文档流,还默认将元素类型转换为行内块元素
4.重点:block表示块级还可以显示作用和none形成一对应用
5.总结none的用法
- border:none 清除边框
- list-style:none 清除列表样式
- text-decoration:none 清除下划线
- display:none 隐藏显示元素
- background:none 清除背景
- outline:none 点击文本框的显示样式
- float:none 不浮动

动态伪类选择器

hover的常见用法:表示鼠标移入悬停时候触发的效果
1.改变自己的状态自身选择器:hover{}
2.通过父级改变子级的状态父级选择器:hover 子级选择器{}
3.通过兄弟改变后面一个兄弟元素的状态兄弟选择器:hover +相邻一个兄弟选择器{}
4.通过兄弟改变后面所有兄弟元素的状态兄弟选择器:hover ~相邻所有兄弟选择器{}

鼠标悬浮hover案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div:hover p{
            color: green;
        }
        h1:hover ~span{
            color: red
        }
    </style>
</head>
<body>
    <div>
        爷爷
        <p>父亲</p>
    </div>

    <h1>自己</h1>
    <span>弟弟</span>
    <span>弟弟</span>
    <span>弟弟</span>
    <span>弟弟</span>
    <span>弟弟</span>
</body>
</html>

效果：

垂直对齐属性

图片居中显示案例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 700px;
            border: 1px solid #000;
            margin: 100px auto;
            text-align: center
        }
        span{
            display: inline-block;
            width: 0;
            height: 100%;
            /* background: red; */
        }
        img,span{
            vertical-align: middle
        }
    </style>
</head>
<body>
    <div>
        <img src="https://pic1.zhimg.com/v2-7c5b04b5c4114958d01b6484cc1fab54_b.gif" alt=""><span></span>
    </div>
</body>
</html>
<!-- 
    实现img结构居中对齐
    1.在父级元素上设置text-align:center控制图片水平方向居中
    2.在img后面设置任意标签(不要有换行)
    3.给标签转换成行内块元素(宽度为0 高度为100%)
    4.将图片和辅助线都设置居中对齐 vertical-align:middle
 -->

效果图：