CSS オーバーフローの深い理解 overflow_html/css_WEB-ITnose

× ディレクトリ [1] 定義 [2] 属性 [3] 無効化 [4] アプリケーション

前の単語

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

定義

overflow 値: 可視 | スクロール自動 |

適用先: ブロック-level要素、置換要素、テーブルセル

継承：なし

[注意] セルtd等については、テーブルをtable-layout:fixedに設定する必要があります

overflow-X | overflow-y

overflow-xとoverflow-yのプロパティは元々IEブラウザが独自に開発したプロパティで、その後CSS3で採用され標準化されました。 Overflow-x は主に水平コンテンツのオーバーフローの剪断を定義するために使用され、overflow-y は主に垂直コンテンツのオーバーフローの剪断を定義するために使用されます

【注意】overflow-x と overflow-y の値が同じ場合、それらはオーバーフローと同等です。 overflow-x と overflow-y の値が異なり、一方の値が明示的に表示されるように設定されているか、設定されていない場合、デフォルトは表示され、もう一方の値は非表示の値になります。その後、表示される値は auto にリセットされます

値: hidden | no-display | no-content

適用対象: ブロックレベルの要素、置換要素セル グリッド

継承: なし

属性

visible

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

[注 1] IE6-br における要素の包含ブロック所有者の意志内容を超えてラップできるように拡張する必要があります

[注2] IE7-ブラウザボタン (IE7 ブラウザを含む (IE7 ブラウザを含む) (ブラウザのボタン ( および を含む) を含む) にはバグがあります。ボタンにさらに多くのテキストがある場合、ボタンの両側のパッドが大きくなります。この問題は overflow:visible

を設定することで解決できます

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

auto

Ifコンテンツがクリップされると、ブラウザーは残りのコンテンツを表示するためにスクロール バーを表示します

[注] 一般的なブラウザーでは、 と にはデフォルトで overflow:auto 属性が付いています。しかし、IE7 ブラウザは異なり、デフォルトで垂直スクロール バーがあります <table> <tr> <pre class='brush:php;toolbar:false;'>.box{ height: 200px; width: 200px; background-color: lightgreen;}.in{ width: 300px; height: 100px; background-color: lightblue;}</pre> <td> </td> <td>scroll</td> </tr> </table> 要素の内容は要素ボックスの境界でクリップされますが、ブラウザはスクロール バーを表示します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> <pre class='brush:php;toolbar:false;'><div class="box"> <div class="in"></div></div></pre> <p> </p> <pre class='brush:php;toolbar:false;'>//IE7-浏览器 html{overflow-y: scroll;}//其他浏览器html{overflow: auto;}//去除页面默认滚动条html{overflow: hidden;}</pre> <p> </p> 左の写真はChromeブラウザの状況を示しています、右の図はFirefoxブラウザの状況を示しています<p class="sycode"> </p> <p> <strong> </strong> </p> <p> </p> <p> </p> <p><strong>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="失效">失效</h3> <p> 　　绝对定位元素不总是被父级overflow属性剪裁，尤其是当overflow在绝对定位元素及其包含块之间的时候</p> <p> 　　　　[注意]由于固定定位是相对于视窗定位的，所以固定定位元素无法被其所有的父级元素overflow属性剪裁 </p> <p></p> <p>【解决办法】</p> <p>【1】overflow元素自身为包含块</p> <p>　　给父级设置position:absolute或fixed或relative</p> <p></p> <p>【2】overflow元素的子元素为包含块</p> <p>　　在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><div style="overflow:hidden;"> <div style="position:relative"> <div style="position:absolute">绝对定位元素</div> </div> </div></pre> </p> <p> </p> <h3 id="应用">应用</h3> <p>　　当overflow设置为auto或scroll或hidden时可以触发BFC，使得overflow可以实现一些相关应用。关于BFC的详细信息移步至此</p> <p>【1】清除浮动影响</p> <p></p> <p>　　[注意]IE6-浏览器使用overflow这种方式并不能清除浮动，常用的消除浮动的方法是</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'>.clear{ *zoom: 1;}.clear:after{ content: ''; display: block; clear: both;}</pre> </p> <p> </p> <p>【2】避免margin穿透</p> <p></p> <p>　　[注意]使用overflow属性只是避免margin穿透的很多方法中的一个，其他的方法还有BFC化、设置padding、设置border等 </p> <p> </p> <p>【3】两栏自适应布局</p> <p></p> <p>　　[注意]使用overflow属性的场景限制比较明显，常用的两栏自适应布局的方法:</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'>.cell{ display: table-cell; width: 2000px; *display: inline-block; *width:auto;}</pre> </p> <p> </p> <p>【4】选项卡</p> <p> 　　overflow选项卡主要用于单页应用</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><div 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> </div> </pre> </p> <p class="sycode"> <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> <p></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p>