オーバーフロー属性_html/css_WEB-ITnose
正面に書かれた言葉:
2016 年 5 月 4 日の「青少年の日」、私は若い学生党員としてブログのキャリアを開始し、勤勉で進歩的な若者になるよう自分自身を鼓舞しました。私は卒業後に月に W+ を稼ぎ、キャリアの頂点に達することを夢見ています...
しかし、限られた自制心で、昨日はまだコントロールできず、「歓喜の歌」を観ました、ああああああああ、それはずっと続きました一見すると一日中、大文字でただ退廃的でした！ ！ ！
笑、このドラマを見ている人もたくさんいると思いますが、このドラマでは誰もがお気に入りのキャラクターを見つけることができるはずですし、彼らの中にいくつかの類似点を見つけることができるはずです。良いドラマ。見る価値があるドラマ。
でも、繰り返しますが、ドラマの中の物語は他人のものであり、あなたは時間の経過とともに現実の生活に戻り、あなた自身の主人公になって、どのような人生を望んでいるのか、あるいは望んでいないのかを考えて着実に前に進んでください。 。 。
ああああああ、鶏スープのボウルをひっくり返さないでください、噴出しないでください、噴出しないでください、噴出しないでください、ひざまずいて、ありがとう！
また、今日は母の日なので、忘れずにお母さんに電話してください。 。 。 <夢のあるフロントエンド初心者>より
overflow には次の 4 つの属性があります (W3School より)
1. overflow:visible
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"> <style type="text/css"> .box{margin: auto; width: 150px; height: 50px; border: 1px solid red; overflow: visible; } </style></head> <body> <div class="box"> <img src="img/flower.png"/> </div> </body></html>効果
overflow:visible は、overflow のデフォルトの属性値でもあります。上記の効果に示すように、親要素を超えた部分は表示され続け、超過した部分は要素の高さを拡張しません。親要素。
2. overflow:hidden
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"> <style type="text/css"> .box{margin: auto; width: 150px; height: 50px; border: 1px solid red; overflow: hidden; } </style></head> <body> <div class="box"> <img src="img/flower.png"/> </div> </body></html>効果は次のとおりです:
図に示すように、子要素が親要素内に表示され、その部分が親要素を超える部分は非表示になります。同時に、前回のフロートのクリアで説明したように、親要素に overflow:hidden を追加して、フロートをクリアする効果を実現できます。
3. overflow:scroll
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"> <style type="text/css"> .box{margin: auto; width: 150px; height: 50px; border: 1px solid red; overflow: scroll; } </style></head> <body> <div class="box"> <img src="img/flower.png"/> </div> </body></html>効果は次のとおりです:
上の図に示すように、この時点で overflow:scroll が設定され、スクロール バーが表示されます。親要素と同様に、x 方向と y 方向にも生成されます。子要素に十分な幅がある場合は、スクロール バーも生成されます。overflow-y:scroll が水平方向に設定されている場合は、スクロール バーは生成されません。効果は次のとおりです:
4. オーバーフロー: auto
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"> <style type="text/css"> .box{margin: auto; width: 150px; height: 50px; border: 1px solid red; overflow: auto; } </style></head> <body> <div class="box"> <img src="img/flower.png"/> </div> </body></html>効果は次のとおりです:
このとき、ブラウザは自動的に設定します。親要素と子要素の幅と高さに応じてスクロール バーを調整します。
もちろん、上記のオーバーフロー属性はすべて、親要素の固定幅と高さに基づいています。
上記の紹介があなたのお役に立てば幸いです。同時に、これは私がちょうど身に着けたプロセスでもあります。Blog Park プラットフォームに感謝します。 ----＜夢を持ったフロントエンド初心者＞より
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7541
15
1381
52
83
11
21
86
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
