CSS样式display的应用

2024-01-15 11:46:04

display的属性介绍

display:block;块元素的默认值，元素会被现实为块元素，该元素前后会带有换行符
display:inline;行内元素的默认值，元素会被显示为默认行内元素，该元素前后没有换行符
display:inline;行内块元素，元素既有块元素特性，也有行内元素特性
display:none;设置元素不显示（用于隐藏）
display:block; ，用法如下

<!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>
        p{
            /* p标签为行内元素并且独自占一行是不能设宽高的现在我们用
            display: border:把它转化为块元素就可以设置宽高了 */
            display: block;
            width: 200px;
        }
    </style>
</head>
<body>
    <p style="background-color: cyan;">
        该文为行内元素
    </p>
</body>
</html>

效果图如下

display:inline; 进行展示；

<!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>
        div{
            /* div标签为块元素并且能设宽高的现在我们用
            display: inline:把它转化为行内元素设置宽高就无效了 */
            width: 200px;
            height: 200px;
            display: inline;
        }
    </style>
</head>
<body>
    <div style="background-color: cyan;">
        我是块元素
    </div>
</body>
</html>

效果图如下

display:inline-block; 展示如下

<!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>
        li{
            /* 给li一个背景颜色 */
            background-color: darkgreen;
            /* li标签为列表元素并现在我们用
            display: inline-block:把它转化为行内块元素
            可以设置宽高而且具有行内元素的特性  */
            width: 200px;
            height: 100px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            1
        </li>
        <li>
            2
        </li>
        <li>
            3
        </li>
    </ul>
</body>
</html>

效果如下

display:none; 展示如下

<!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>
        div{
            width: 200px;
            height: 100px;
            background-color: darkgreen;
            /* 给div一个背景颜色让它显示出来
            给它宽高程序运行到这时div是显示出来的 */
            display: none;
            /* 现在我们用
            display:none:把它隐藏  */
        }
    </style>
</head>
<body>
    <div>

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

效果图如下

这里的隐藏可以用于鼠标停留到链接上时改变其属性再次显示出来

码农公寓

display的属性介绍

相关文章