CSS 最新更新 - display 属性的内值和外值

cssweb developmentfront end technology更新于 2024/5/16 11:24:17

现在我们可以通过 CSS display 的双值语法明确设置元素的显示类型。这将允许我们更改元素的流布局

语法

CSS display 属性的语法如下 −

Selector {
   display: /*inside*/ /*outside*/
}

示例

以下示例说明了 CSS display 显示属性。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body,div,span {
            box-shadow: inset 0 0 12px lightgreen;
            border: 2px dotted gray;
         }
         span {
            padding: 2%;
            display: inline flow-root;
         }
      </style>
   </head>
   <body>
      <div>
         <p>
            Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.
         </p>
         <img src="https://images.unsplash.com/photo-1611625618313-68b87aaa0626?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
         <span>Inline Block</span> <span>Span</span>
         Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
      </div>
   </body>
</html>

这在 Firefox 中给出了以下输出

示例

<!DOCTYPE html>
<html>
   <head>
      <style>
         body,div,span {
            margin: 2%;
            box-shadow: inset 0 0 12px orange;
            border: 2px ridge cadetblue;
         }
         span {
            padding: 2%;
            display: block flow;
         }
      </style>
   </head>
   <body>
      <div>
         <p>
         Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.
         </p>
         <span>Block is now</span> <span>Block Flow</span>
         Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
      </div>
   </body>
</html>

输出结果如下