CSS オーバーフローについての深い理解

前の言葉

要素が特定のサイズに固定されているが、コンテンツが要素に収まらない場合。このとき、overflow 属性を使用してこの状況を制御できます

overflow overflow

初期値：visible

to: ブロックレベル要素、置換要素、テーブルセル

継承: なし

[注意] IE7ブラウザを除き、他のブラウザはテーブルセル要素のオーバーフロー属性の設定をサポートしていません。 Firefox および IE11 ブラウザーは、高さ 100% に設定された table-cell 要素の子要素の overflow 属性の設定をサポートしていません

overflow-y

これは独立した属性ですIEブラウザで開発され、その後CSS3で採用・標準化されました。 Overflow-x は主に水平コンテンツの剪断を定義するために使用されます。一方、overflow-y は主に垂直コンテンツの剪断を定義するために使用されます。同様に、オーバーフローと同等です。 overflow-x と overflow-y の値が異なり、一方の値が明示的に表示されるように設定されているか、設定されていない場合、デフォルトは表示され、もう一方の値は非表示の値になります。次に、表示される値が auto

継承: なし

属性

可視

要素の内容は要素ボックスの外側にも表示されます

[注1] IE6 - 要素の包含ブロックブラウザは拡張され、その過剰なコンテンツを包むことができるようになります

rreee

rreeee左の写真はIE6-ブラウザーです。右の写真は他のブラウザです

[注 2 ]IE7 - ブラウザのボタン ( と を含む) にバグがあり、ボタン上にさらに多くのテキストがある場合、両方のパディングが行われます。ボタンの側面が大きくなります。この問題は、overflow:visible を設定することで解決できます

左の図はデフォルトの状況、右の図は overflow を設定した後の状況です

auto

コンテンツがクリップされている場合、ブラウザはコンテンツの残りを表示するためにスクロールバーを表示します [注] 一般的なブラウザの場合、 と にはデフォルトで overflow:auto 属性が付いています。ただし、IE7 ブラウザではデフォルトで垂直スクロール バーが表示されます<td><img src="https://img.php.cn/upload/article/000/000/001/53a4176c7b87bf112bfaa9326e573e75-2.jpg" alt=""></td> <td> <pre class="brush:php;toolbar:false">.box{     height: 200px;     width: 200px;     background-color: lightgreen; }.in{     width: 300px;     height: 100px;     background-color: lightblue; }</pre> <img src="https://img.php.cn/upload/article/000/000/001/214b254c0020cbd2cd8ab394696c6d2b-3.jpg" alt=""> </td>scroll</tr></tbody> </table> 要素の内容は要素ボックスの境界でクリップされますが、ブラウザはスクロール バーを表示します。 to view therest of the content<p><strong> [Note] There is a missing padding-bottom 現象 in Firefox and IE8+ browsers when overflow:scroll or auto</strong></p> <p></p> <pre class="brush:php;toolbar:false"><p class="box">     <p class="in"></p></p></pre> <p></p> <p class="cnblogs_code"></p> <pre class="brush:php;toolbar:false">//IE7-浏览器  html{overflow-y: scroll;}//其他浏览器 html{overflow: auto;}//去除页面默认滚动条 html{overflow: hidden;}</pre> <br> 左の写真はその状況ですChromeブラウザ、右の写真はFirefoxブラウザの状況です <p><strong></strong></p> <p></p> <p></p> <p class="cnblogs_code"><br></p> <p class="cnblogs_code"></p> <p><strong style="line-height: 1.5;">hidden</strong></p> <p>　　元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见</p> <p><strong>no-display</strong></p> <p>　　当内容溢出容器时不显示元素，类似于元素添加了display:none属性一样</p> <p><strong>no-content</strong></p> <p>　　当内容溢出窗口时不显示内容，类似于元素添加了visibility: hidden属性一样</p> <p>　　[注意]no-display和no-content这两个属性目前没有浏览器支持</p> <p> </p> <h3 id="anchor3">失效</h3> <p><span class="Apple-tab-span"> 　　绝对定位元素不总是被父级overflow属性剪裁，尤其是当overflow在绝对定位元素及其包含块之间的时候</span></p> <p><span class="Apple-tab-span"><span class="Apple-tab-span"> 　　　　[注意]由于固定定位是相对于视窗定位的，所以固定定位元素无法被其所有的父级元素overflow属性剪裁</span></span> </p> <p><iframe style="width: 100%; height: 230px;" src="https://demo.xiaohuochai.site/css/overflow/o3.html" frameborder="0" width="320" height="240"></iframe></p> <p>【解决办法】</p> <p>【1】overflow元素自身为包含块</p> <p>　　给父级设置position:absolute或fixed或relative</p> <p><iframe style="width: 100%; height: 260px;" src="https://demo.xiaohuochai.site/css/overflow/o4.html" frameborder="0" width="320" height="240"></iframe></p> <p>【2】overflow元素的子元素为包含块</p> <p>　　在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative</p> <p class="cnblogs_code"><br></p> <pre class="brush:php;toolbar:false"><p style="overflow:hidden;">     <p style="position:relative">         <p style="position:absolute">绝对定位元素</p>         </p>    </p></pre> <p> </p> <h3 id="anchor4">应用</h3> <p>　　当overflow设置为auto或scroll或hidden时可以触发BFC，使得overflow可以实现一些相关应用。关于BFC的详细信息移步至此</p> <p>【1】清除浮动影响</p> <p><iframe style="width: 100%; height: 230px;" src="https://demo.xiaohuochai.site/css/overflow/o5.html" frameborder="0" width="320" height="240"></iframe></p> <p>　　[注意]IE6-浏览器使用overflow这种方式并不能清除浮动，常用的消除浮动的方法是</p> <p class="cnblogs_code"><br></p> <pre class="brush:php;toolbar:false">.clear{     *zoom: 1; }.clear:after{     content: '';     display: block;     clear: both; }</pre> <p> </p> <p>【2】避免margin穿透</p> <p><iframe style="width: 100%; height: 230px;" src="https://demo.xiaohuochai.site/css/overflow/o6.html" frameborder="0" width="320" height="240"></iframe></p> <p>　　[注意]使用overflow属性只是避免margin穿透的很多方法中的一个，其他的方法还有BFC化、设置padding、设置border等 </p> <p> </p> <p>【3】两栏自适应布局</p> <p><iframe style="width: 100%; height: 230px;" src="https://demo.xiaohuochai.site/css/overflow/o7.html" frameborder="0" width="320" height="240"></iframe></p> <p>　　[注意]使用overflow属性的场景限制比较明显，常用的两栏自适应布局的方法:</p> <p class="cnblogs_code"><br></p> <pre class="brush:php;toolbar:false">.cell{     display: table-cell; width: 2000px;     *display: inline-block; *width:auto; }</pre> <p> </p> <p>【4】选项卡</p> <p><span class="Apple-tab-span"> 　　overflow选项卡主要用于单页应用</span></p> <p class="cnblogs_code"><br></p> <pre class="brush:php;toolbar:false"><p class="box">     <ul class="show">         <li class="show-in" id="one">1</li>         <li class="show-in" id="two">2</li>         <li class="show-in" id="three">3</li>         <li class="show-in" id="four">4</li>     </ul>     <nav class="con">         <a class="con-in" href="#one">1</a>         <a class="con-in" href="#two">2</a>         <a class="con-in" href="#three">3</a>         <a class="con-in" href="#four">4</a>     </nav>    </p></pre> <p class="cnblogs_code"><br></p> <pre class="brush:php;toolbar:false">body{     margin: 0;     text-align: center; }ul{     margin: 0;     padding: 0;     list-style: none; }a{     text-decoration: none;     color: inherit; }.show{     width: 100px;     height: 100px;     overflow: hidden;     border: 1px solid black;     line-height: 100px;     font-size: 40px; }    .show-in{     width: 100px;     height: 100px; }#one{     background-color: lightgreen; }#two{     background-color: lightyellow; }#three{     background-color: lightblue; }#four{     background-color: pink; }.con{     margin: 10px 0 0 10px;     width: 100px; }.con-in{     display:inline-block;     width: 16px;     line-height: 16px;     border: 1px solid black;     background-color: gray; }</pre> <p><iframe style="width: 100%; height: 200px;" src="https://demo.xiaohuochai.site/css/overflow/o8.html" frameborder="0" width="320" height="240"></iframe></p> <p>本文转载自https://www.cnblogs.com/xiaohuochai/p/5289653.html 作者：小火柴的蓝色理想</p><p>以上がCSS オーバーフローについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事はcnbolgで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="メタタグの使い方は？メタタグの使用例をまとめます。" href="https://m.php.cn/ja/faq/364176.html">メタタグの使い方は？メタタグの使用例をまとめます。</a></span><span>次の記事：<a class="dBlack" title="メタタグの使い方は？メタタグの使用例をまとめます。" href="https://m.php.cn/ja/faq/364186.html">メタタグの使い方は？メタタグの使用例をまとめます。</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/410900.html" title="CSS テキスト オーバーフロー表示の省略記号効果 (text-overflow) の詳細な図による説明" class="aBlack">CSS テキスト オーバーフロー表示の省略記号効果 (text-overflow) の詳細な図による説明</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/411881.html" title="CSSのオーバーフロープロパティとは何ですか? Overflow属性の詳しい説明" class="aBlack">CSSのオーバーフロープロパティとは何ですか? Overflow属性の詳しい説明</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/412337.html" title="ワードラップとテキストオーバーフローの違いは何ですか? 2つのプロパティの詳細な説明" class="aBlack">ワードラップとテキストオーバーフローの違いは何ですか? 2つのプロパティの詳細な説明</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/412426.html" title="CSSにおけるoverflow:hiddenの役割は何ですか? overflow:hidden の役割の概要" class="aBlack">CSSにおけるoverflow:hiddenの役割は何ですか? overflow:hidden の役割の概要</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/450747.html" title="CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" class="aBlack">CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>