ホームページ >ウェブフロントエンド >htmlチュートリアル >オーバーフロー属性_html/css_WEB-ITnose
オーバーフロー属性_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:18:411264ブラウズ
正面に書かれた言葉:
2016 年 5 月 4 日の「青少年の日」、私は若い学生党員としてブログのキャリアを開始し、勤勉で進歩的な若者になるよう自分自身を鼓舞しました。私は卒業後に月に W+ を稼ぎ、キャリアの頂点に達することを夢見ています...
しかし、限られた自制心で、昨日はまだコントロールできず、「歓喜の歌」を観ました、ああああああああ、それはずっと続きました一見すると一日中、大文字でただ退廃的でした！ ！ ！
笑、このドラマを見ている人もたくさんいると思いますが、このドラマでは誰もがお気に入りのキャラクターを見つけることができるはずですし、彼らの中にいくつかの類似点を見つけることができるはずです。良いドラマ。見る価値があるドラマ。
でも、繰り返しますが、ドラマの中の物語は他人のものであり、あなたは時間の経過とともに現実の生活に戻り、あなた自身の主人公になって、どのような人生を望んでいるのか、あるいは望んでいないのかを考えて着実に前に進んでください。 。 。
ああああああ、鶏スープのボウルをひっくり返さないでください、噴出しないでください、噴出しないでください、噴出しないでください、ひざまずいて、ありがとう！
また、今日は母の日なので、忘れずにお母さんに電話してください。 。 。 cd152a19fd97818dc2a26236af575903より
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 プラットフォームに感謝します。 ----＜夢を持ったフロントエンド初心者＞より