display属性的使用

恁..

已于 2022-08-02 15:29:13 修改

阅读量1.1k

点赞数 7

分类专栏： css html 文章标签： html css 前端

于 2022-08-01 15:16:08 首次发布

本文链接：https://blog.csdn.net/weixin_65607135/article/details/126101473

版权

html 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

css

26 篇文章 0 订阅

订阅专栏

display的属性

可选值：none 将元素隐藏

block 将元素转成块元素

inline 将元素转成行内元素

inline-block 将元素转换成行内块元素

例如下面代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
span{
color: red;
width: 200px;
height: 100px;
background-color: green;
text-align: center；
display: none;
}
div{
background-color: pink;
width: 200px;
height: 100px;
text-align: center;
}
</style>
</head>

<body>
<div>好好学习，天天向上<br>
<span>欢迎新同学</span>
</div>

</body>
</html>

上述代码将sapn的元素隐藏掉了

运行结果如图所示：

span{
        color: red;
        width: 200px;
        height: 100px;
        background-color: green;
        text-align: center;
        /* line-height: 100px; */
      /*实现元素之间的相互转换 
        display属性 
             可选值：
                none   将元素隐藏
                block  将元素转成块元素
                inline  将元素转成行内元素
                inline-block  将元素转成行内块元素      
        */
       display: block;
      }

上面代码将span元素转换成块元素

运行结果如图所示：

span{
        color: red;
        width: 200px;
        height: 100px;
        background-color: green;
        text-align: center;
       display: inline;
      }

上述代码将span转换成行内元素

结果如图所示

 span{
        color: red;
        width: 200px;
        height: 100px;
        background-color: green;
        text-align: center;
       display: inline-block;
      }

上面代码将span元素转换成行内块元素

恁..

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
display属性的使用

inline-block将元素转换成行内块元素。inline将元素转成行内元素。block将元素转成块元素。上面代码将span元素转换成行内块元素。上面代码将span元素转换成块元素。上述代码将sapn的元素隐藏掉了。上述代码将span转换成行内元素。可选值none将元素隐藏。display的属性。.........
复制链接

扫一扫