この章では、特定の参考値となるオーバーフロー属性に関するヒントを紹介します。お役に立てれば幸いです。
1: オーバーフローの基本プロパティ
オーバーフローの基本プロパティは次のとおりです: visibel、hidden、scroll、auto、inherit、overflow-x、および overflow-y
overflow-x と overflow-y に同じ値を設定しますはオーバーフローと同等です。それらが異なる場合、一方には visibel、auto が割り当てられ、もう一方には visibel、auto、hidden が割り当てられます。自動にリセットされます。提 前 前 1. 非表示: インラインレベル! 2. 対応する向きの寸法、幅/高さ/最大幅/最大高さ/絶対伸縮
オーバーフロー: Visibel 素晴らしい
IE7 ブラウザー。すべてのボタンに CSS スタイルのオーバーフローを追加します: 可視2: オーバーフローとスクロール バー
スクロール バーの表示条件
1.overflow: auto/overflow:scroll 一部の要素には独自のスクロール バーがあります ;textarea>body/html とスクロールバー
どのブラウザでも、デフォルトのスクロールバーは body タグではなく HTML から取得されます
ie8+ html{overflow:auto}
html{overflow:hidden}
互換性のある書き込み方法
var st = document.body.scrollTop || document.documentElement.scrollTop overflow的padding-bottom缺失现象 .box{width:400px;height:100px;padding:100px 0; overfow:auto;}
スクロールバーの幅
ボックスの幅(スクロールバーあり) - ボックスの幅 = スクロールバーの幅 IE Firefox Chromeはどちらも17ピクセルです。水平方向の中央ジャンプの問題
修复方法 1.html{overflow-y:scroll;} 2. .container{padding-left:calc(100vw-100%);}
カスタム スクロール バー-Webkit
整体部分 ::-webkit-scrollbar 两端按钮 ::-webkit-scrollbar-button 外层轨道 ::-webkit-scrollbar-track 内层轨道 ::-webkit-scrollbar-track-piece 滚动滑块 ::-webkit-scrollbar-thumb 边角 ::-webkit-scrollbar-corner 实际常用 ::-webkit-scrollbar{//宽度 width:8px; height:8px; } ::-webkit-scrollbar-thumb{//拖动条 background-color:rgba(0,0,0,.3); border-radius : 6px; } ::-webkit-scrollbar-track{//背景槽 background-color:#ddd; border-radius:6px; }
-webkit-overflow-scrolling:touch;
オーバーフローとBFC
1. フローティング効果をクリアします2. マージン貫通の問題を回避します内部フローティングは効果がありませんrreeeマージン貫通の問題を回避します
スクロール、、オーバーフロー:自動、オーバーフロー:隠しなぜこの機能があるのですか?
流体特性による適応レイアウト 1. 左フロート、通常右.clearfix{*zoom:1;} .clearfix:after{centent:'';display:table;clear:both;}
.left{float:left;width:128px;} .right{min-height:190px;background-color:#beceeb}
.left{float:left;width:128px;} .right{min-height:190px;margin-left:150px;background-color:#beceeb}
.left{float:left;width:128px;} .right{min-height:190px;padding-left:150px;background-color:#beceeb}
.left{float:left;width:128px;} .right{min-height:190px;overflow:hidden;background-color:#beceeb}
overflow:hidden; 自适应,单溢出不可见 限制应用场景 float + float 包裹性+破坏性 无法自适应,块状浮动布局 position:absolute 脱离文档流,自娱自乐 display:inline-block 包裹性,无法自适应 display:table-cell 包裹性,但天生无溢出特性,绝对宽度也能自适应。 只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化
4: オーバーフローと絶対配置
失敗の非表示とスクロール修正
オーバーフロー:隠れた失敗
.cell{ display:table-cell; width:2000px; //2000保证比父元素大 *display:inline-block;*width:auto; //IE7-伪BFC特性 }
絶対位置の要素は、特に絶対位置の要素とその要素を含むブロックの間にオーバーフローがある場合、親のオーバーフロー属性によって必ずしもクリップされるわけではありません 包含ブロックは、「position:relative/absolute/fixed」で宣言された親要素を参照します。それがないと、body要素
無効化を回避する方法。 1.オーバーフロー要素自体が包含ブロックになります
2. オーバーフロー要素の子要素は包含ブロックになります3. 正当な変換ステートメントは包含ブロックとして扱われます オーバーフロー失敗の魔法の効果
.overflow-hidden{ width:300px; height:200px; border:5px solid #333; overflow:auto } img{postion:absolute;}
5: オーバーフローのスタイルパフォーマンスに依存する
リサイズストレッチ
.resize:horizontal 水平方向のみに伸縮します
size:vertical 垂直方向のみに伸縮しますただし、このステートメントが効果を発揮するには、overflow 属性が必要です。要素の値は表示できません。
h0{height:0;} .ovh{overflow:hidden;} .tr{text-align:right;} .abs{position:absolute;} <div class="h0 ovh tr"> <img src="" class="abs ml10 mt30"></img> </div>
<button style="resize:both;overflow:hidden">按钮</button>
6: オーバーフローとアンカーポイントテクノロジー
アンカーポイントの位置決めの本質: 変数コンテナのスクロール高さ
トリガーアンカーポイントの位置合わせ1. URL アドレスのアンカー チェーンとアンカー要素
2. フォーカス可能なアンカー要素がフォーカスされています。アンカーポイントの位置決めの役割
1. 素早い位置決め
2. アンカーの位置決めとオーバーフロータブテクノロジー
アプリケーションシナリオ: シングルページアプリケーション
以上がCSS のオーバーフロー属性に関するヒント、オーバーフロー属性の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。