如何转换css元素的显示模式

小灰灰 2020-04-26 06:31 982阅读 0赞

如何转换css元素的显示模式

通过设置元素的display属性实现转换

display取值：inline（行内）、block（块级）、inline-block（行内块级）

下面这个实例就是将span的显示模式转换为块级，将div的显示属性转换为行内块级，将img的显示模式转换为块级

  1. <style>
  2.         /*将span转换为块级元素--*/
  3.         *{
  4.             margin: 0;
  5.             padding: 0;
  6.         }
  7.         span{
  8.             display: block;
  9.             background-color: red;
  10.             width: 400px;
  11.             height: 400px;
  12.         }
  13.         /*将div转换为行内块级元素*/
  14.         div{
  15.             display: inline-block;
  16.             background-color: green;
  17.             width: 300px;
  18.             height: 300px;
  19.         }
  20.         /*将img转换为块级元素*/
  21.         img{
  22.             display: block;
  23.             width: 200px;
  24.         }
  25.     </style>

效果图如下：

发表评论

表情：
评论列表 （有 0 条评论，982人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS - 显示模式

    目录 块级元素、行内元素、行内块元素的特点 行内元素、行内块元素之间间隙的形成原因，以及解决办法 关于vertical-align的使用 设置单行文字垂直居中的方案

    电玩女神电玩女神/ 0 赞/ 87 阅读

    相关 HTML+CSS 元素的显示模式

    什么是元素显示模式 在了解元素显示模式前，我们先来举个不恰当的例子：比如在世界上的人有成万上亿，那么归根结底只有两种人就是男人和女人，偶尔还有可能有第三种人-人妖。无论是

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 272 阅读