display属性的隐藏与转化元素属性的详细介绍（小白专用）

最新推荐文章于 2024-08-09 10:34:44 发布

Ys@_yxl

最新推荐文章于 2024-08-09 10:34:44 发布

阅读量1.1k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45817492/article/details/109890031

版权

display属性的隐藏与转化元素属性

display属性的隐藏与转化元素属性
- 1. display

display属性的隐藏与转化元素属性

1. display

display的作用是显示隐藏元素，但是不保留位置。

display属性值	作用
none	隐藏元素，并脱离文档流，且不占原来的位置
block	1.可以将元素转化为块元素 2.显示元素
inline	将元素转化为行内元素
inline-block	将元素转化为行内块元素

1.display的none属性值的用法，具体如下：

1、没加dispaly:none,如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: navajowhite;
        }
        .two{
            background-color: forestgreen;
        }
        .three{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="one">
        
    </div>
    <div class="two">

    </div>
    <div class="three">

    </div>
    
</body>
</html>

在这里插入图片描述
2、加上dispaly:none,如下。dispaly:none，使第一个小盒子，不显示，且第一个小盒子的位置被占用。

  div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: navajowhite;
            display: none;
        }
        .two{
            background-color: forestgreen;
        }
        .three{
            background-color: gray;
        }

在这里插入图片描述

2.display的block属性值的用法1，具体如下：

1.span标签为行内元素，不能设置宽高。而block，可以帮助我们将行内元素或者行内块元素，根据具体情况，转换为块元素，实现我们想实现的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       span{
           width: 100px;
           height: 100px;
           background-color: palegoldenrod;
            }
    </style>
</head>
<body>
    <span>
        123
    </span>
</body>
</html>

在这里插入图片描述

2.加上block属性值后，将span 标签转化为块元素后，我们就可以给span标签设置宽高。

 span{
           display: block;
           width: 100px;
           height: 100px;
           background-color: palegoldenrod;
            }

在这里插入图片描述

3.display的inline属性值的用法，具体如下：

1.p标签是块元素，可以设置高宽，且独占一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       p{
           width: 100px;
           height: 100px;
           background-color: palegoldenrod;
            }
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</body>
</html>

在这里插入图片描述

2.将p标签转化为行标签，这里等等p标签不再独占一行，也不能设置宽高，不再拥有块元素的性质。
只能由内容撑开，且满一行才能换行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       p{
           display: inline;
           width: 100px;
           height: 100px;
           background-color: palegoldenrod;
            }
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</body>
</html>

在这里插入图片描述

实际开发场景：

配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

注意：
（1）行内元素有：a( 锚点) ,b(粗体(不推荐)) ,span(常用内联容器，定义文本内区块) img(图片) input(输入框) select(项目选择) strong(粗体强调) label(表格标签) cite (引用)code(计算机代码)
（2）块级元素有：div ul(无序列表) ol(有序列表) dl(定义列表) table(表格)form(表单) h1 (一级标题))p(段落)pre(预格式化)
（3）行内块元素：img(图片),input(输入框)。

1.块元素的特点： 独占一行
高度，宽度，外边距以及内边距都可以控制
宽度是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内和块级元素
注意： 文字类块级元素不可以放其他块级元素如h p标签
2.行内元素的特点： 相邻的元素在同一行
宽度和高度直接设置无效
默认宽度是本身内容的宽度
行内元素能容纳文本和其他行内元素
注意：链接里面不能放链接，链接在特殊情况下能放块级元素
3.行内块元素特点： 和相邻的行内元素在一行，相邻的之间有空白间隙，一行可有多个
默认宽度就是本身内容高度
高度，宽度，行高，外边距以及内边距都可以设置