CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの最新の更新-表示プロパティの内部値と外部値

これで、CSS表示の2つの値の構文によって、要素の表示タイプを明示的に設定できるようになります。これにより、要素のフローレイアウトを変更できます

構文

CSS表示プロパティの構文は次のとおりです-

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

例

次の例は、CSSの表示プロパティを示しています。

<!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で次の出力が得られます

CSSの最新の更新-表示プロパティの内部値と外部値

例

<!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>

これにより、次の出力が得られます

CSSの最新の更新-表示プロパティの内部値と外部値


  1. CSSでNoneを表示しない

    要素を削除するには、CSSのdisplaynoneプロパティ値を使用します。 noneプロパティ値を実装する例を見てみましょう- 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> span {    background-color: orange;    color: white; } p.demo {    display: none; } span.demo1 {    display: inline; }

  2. CSSで使用するプロパティの表示

    すべてのHTML要素には、CSSDisplayプロパティにデフォルト値が設定されています。このプロパティは、要素がドキュメントでどのようにレンダリングされるかを指定します。 注 −デフォルトの表示プロパティはオーバーライドできますが、要素のタイプは変更されず、ドキュメントでの表示動作だけが変更されます。 以下は、CSSDisplayプロパティの値の一部です- ブロック インライン インラインブロック なし 例 CSSDisplayプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>