CSS オーバーフローについての深い理解: 非表示、スクロール、表示

レイアウト中に、コンテンツがボックスのサイズを超える場合は、CSS 属性のオーバーフローを使用して、オブジェクトを超えたコンテンツを非表示にすることもできます。次に、CSS について学びましょう。オーバーフロースタイル。

1. オーバーフロー構文の値

overflow: 表示 | 自動 | スクロール

もちろん、オーバーフローは X (overflow-x) 方向と Y (overflow-y) 方向のスクロール バーのスタイルを設定できます。その値と用途は同じです。オーバーフローの構文、使用法、構造は同じです。

2. オーバーフローパラメータ値の説明

visible: コンテンツを切り取ったり、スクロールバーを追加したりしないでください。このデフォルト値が明示的に宣言されている場合、オブジェクトは、オブジェクトを含むウィンドウまたはフレームのサイズにクリップされます。また、クリップ属性の設定は無効になります

auto: bodyオブジェクトとtextareaのデフォルト値です。必要に応じてコンテンツを切り取り、スクロール バーを追加します。DIV のデフォルト値もこの値ですが、必要に応じて設定できます。

scroll: オブジェクト サイズを超えるコンテンツを表示しません。常にスクロール バーを表示します。 3. オーバーフローでは、オブジェクトが指定された高さと幅を超えた場合にそのコンテンツを取得または設定する方法を具体的に説明します。

スクロール バーを非表示にするには、textarea オブジェクトを hidden 値に設定します。

テーブルの場合、table-layout 属性が固定に設定されている場合、td オブジェクトはデフォルト値の hidden でオーバーフロー属性をサポートします。非表示、スクロール、または自動に設定すると、td サイズを超えるコンテンツはカットされます。表示に設定すると、(方向プロパティの設定に応じて) 余分なテキストが右側または左側のセルにオーバーフローします。このプロパティは、IE5 以降の MAC プラットフォームで使用できます。

4. オーバーフローの学習に集中します

オーバーフロー: 表示 このスタイルではスクロール バーを非表示にできますが、マウスで上下に引っ張ることができます。

Overflow:hidden オブジェクトが設定された幅と高さを超えているコンテンツを非表示にします

Overflow:scroll このスタイルでは、コンテンツが高さまたは幅を超えているかどうかに関係なく、スクロール バーが表示されます。

5. Overflow:hidden と Overflow:scroll の練習

ケースのデモでは、同じ幅と高さの設定を使用して、幅と高さを超えたコンテンツを非表示にします。ケースフレーム内の 2 つのオブジェクトに CSS ボーダーを追加します。

CSS コード:

.divcss5-hidden,.divcss5-scroll{width:300px; height:100px;line-height:25px; border:1px solid #333} 
.divcss5-hidden{overflow:hidden; height:50px} 
.divcss5-scroll{overflow:scroll; margin-top:10px}

html コード:

<div class="divcss5-hidden"> 
隐藏超出的内容但不显示滚动,divcss5的overflow:hidden测试示范 
案例，设置了高和宽后对象，内容多不超出对象 
</div> 
<div class="divcss5-scroll"> 
<img src="http://www.divcss5.com/uploads/allimg/130219/1_130219231214_1.jpg" /> 
</div>

概要: オーバーフロー CSS スタイルは、表示スクロール バーを非表示にするためによく使用され、同時に、サイズ、幅、およびサイズを超える表示オブジェクトのコンテンツを非表示にすることができます。非常に簡単です。この単語の綴りができなくても、よく使われる場所を見たときに認識でき、DW ソフトウェアを使用して基本的な文法構造をすぐに入力できます。

以上がCSS オーバーフローについての深い理解: 非表示、スクロール、表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。