CSS3之显示方式

最新推荐文章于 2024-09-11 21:44:44 发布

景康达

最新推荐文章于 2024-09-11 21:44:44 发布

阅读量231

点赞数

分类专栏： HTML&&CSS&&Javascript 文章标签： css3 html 前端

本文链接：https://blog.csdn.net/qq_51744139/article/details/127186806

版权

HTML&&CSS&&Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.none–不显示

<style>
  .hidden{
    display: none;
  }
</style>

<div>Yo</div>
<div class="hidden">你就当我不存在</div>

在这里插入图片描述

2.block–占据母元素的整个宽

块级元素最大的特点就是会自动占据母元素的整个宽。


<style>
  .box{
    display: block;
    border:solid;
  }
</style>

<div class="box">Yzy</div>we don`t talk anymore

在这里插入图片描述

3.inline–宽度有内容多少决定

加了padding的span元素，左右padding将文字推开了，而上下padding仅仅是作用于背景色，并没有对周围造成影响

<meta charset="UTF-8">
<style>
  body{
    width: 200px;
  }
  span{
    padding: 20px;
    border:1px solid rgba(0,0,0,.2);
    background: rgba(0,0,0,.2);
  }
</style>
<body>
  程序能不能跑起来取决于你怎么向它<span>表达</span>的，而不是你怎么想的。
</body>

在这里插入图片描述

4.inlineblock–结合了block和inline的属性

<meta charset="UTF-8">
<style>
  body{
    width: 200px;
  }
  span{
    display: inline-block;
    padding: 20px;
    border:1px solid rgba(0,0,0,.2);
    background: rgba(0,0,0,.2);
  }
</style>
<body>
  程序能不能跑起来取决于你怎么向它<span>表达</span>的，而不是你怎么想的。
</body>