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

CSSオーバーフロー-x

CSSのoverflow-xを使用すると、コンテンツの左右の端をどのように処理するかを決定できます。

例

次のコードを実行して、overflow-xプロパティを実装してみてください

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: orange;
            width: 250px;
            height: 45px;
            border: 2px solid blue;
            overflow-x: hidden;
            overflow-y: scroll;
         }
      </style>
   </head>
   <body>
      <h1>Heading</h1>
      <div>Overflow property used here. This is a demo text to show the working of CSS overflow-x and overflow-y.</div>
   </body>
</html>

出力

CSSオーバーフロー-x


  1. CSSFlexbox

    CSS Flexboxモデルは、確立されたCSSボックスモデルを改善するために作成されました。 Flexboxモデルには、Boxモデルの主要な要素（マージン、パディング、境界線、コンテンツ）が引き続き含まれていますが、コンテナ/親の子でスペースを最適に埋める柔軟性を提供します。 このチュートリアルは、フレックスボックスモジュールを少しよく理解するのに役立ち、サイトの応答性を高めることができます。 以下は、基本的なフレックスボックスモデルのデモンストレーションのスターターコードです。フレックスボックスについて説明するときは、それに従ってください。 <!DOCTYPE html

  2. CSSシェイプ

    さあ、楽しいCSSシェイプを作成しましょう！すべてのコードについては、私のCodepenに従ってください。これをやってみましょう。 長方形と正方形 すべての形状はdivでラップされます。デフォルトでは、divは幅と高さのプロパティに応じて正方形または長方形であるため、最も基本的な形状は正方形と長方形です。したがって、正方形の幅と高さは同じですが、長方形はそうではありません： .rectangle { width: 2rem; height: 4rem; background-color: violet; } .square { width: 5rem; height: