【前端学习笔记】元素的显示类型

最新推荐文章于 2024-04-22 16:45:06 发布

爷傲奈我何_m

最新推荐文章于 2024-04-22 16:45:06 发布

阅读量457

点赞数

分类专栏：我的前端之路文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_43841844/article/details/122296033

版权

我的前端之路专栏收录该内容

9 篇文章 0 订阅

订阅专栏

元素显示类型的分类

依据CSS的显示

块元素

块状元素在页面中就是以块的形式显示，所谓块状就是元素显示为矩形区域
默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而下排列。
块状元素都可以定义自己的宽度和高度。
块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素。我们可以把这种容器比喻为一个盒子。

例如： div p ul li dl dt dd h1-h6

行内（内联）元素

内联元素的表现形式是始终以行内逐个进行显示；横着排
内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度、高度只能根据包含的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效

例如：a b em i span strong等

行内块元素

内联块状元素（inline-block）就是同时具备内联元素，块状元素的特点

例如： img input 等

元素类型互相转换

代码示例：

<!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>Document</title>
    <style>
        img{
            display: block;
        }
    </style>
</head>
<body>
    <img src="../img/big.png" alt="">
    <p>1111111111111111</p>
</body>
</html>

隐藏功能

代码示例：

<!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>Document</title>
    <style>
        .hide{
            display: none;
        }

        .box:hover ul{
            background: yellow;
            display: block;
        }
    </style>
</head>
<body>
    <div class="hide">11111111</div>
    <div class="box">
        军事
        <ul class="hide">
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
        </ul>
    </div>
</body>
</html>