CSS のオーバーフロー属性に関するヒント、オーバーフロー属性の概要

この章では、特定の参考値となるオーバーフロー属性に関するヒントを紹介します。お役に立てれば幸いです。

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 一部の要素には独自のスクロール バーがあります100db36a723c770d327fc0aef2ce13b1 ;textarea>

body/html とスクロールバー

どのブラウザでも、デフォルトのスクロールバーは body タグではなく HTML から取得されます

ie8+ html{overflow:auto}

したがって、ページからデフォルトのスクロールバーを削除したい場合は、スクロールバーのみを削除します。 need:

html{overflow:hidden}

body/htmlとscroll bar-jsとスクロールの高さ

互換性のある書き込み方法

 var st = document.body.scrollTop || document.documentElement.scrollTop
 overflow的padding-bottom缺失现象
.box{width:400px;height:100px;padding:100px 0; overfow:auto;}

Chromeブラウザで下部をスクロールアウトできます。

スクロールバーの幅

ボックスの幅（スクロールバーあり） - ボックスの幅 = スクロールバーの幅

IE Firefox Chromeはどちらも17ピクセルです。

水平方向の中央ジャンプの問題

修复方法 
1.html{overflow-y:scroll;}
2. .container{padding-left:calc(100vw-100%);}

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; }

カスタム スクロール バー-IE

カスタム スクロール プラグインを使用できます

IOS ネイティブ スクロール コールバック効果

-webkit-overflow-scrolling:touch;

3 つ: オーバーフローと BFC

クリア フロート、アダプティブ レイアウトなど。

BFC ブロック書式設定コンテキスト ブロックレベルの書式設定コンテキスト

ページの魅力は、内部要素がどのように投げられても、外部には影響しません。

オーバーフローとBFC

1. フローティング効果をクリアします

2. マージン貫通の問題を回避します

内部フローティングは効果がありません

rreeeマージン貫通の問題を回避します

スクロール、、オーバーフロー:自動、オーバーフロー:隠し

なぜこの機能があるのですか?

流体特性による適応レイアウト

1. 左フロート、通常右

.clearfix{*zoom:1;}
.clearfix:after{centent:'';display:table;clear:both;}

2. 左フロート、右マージン

.left{float:left;width:128px;}
.right{min-height:190px;background-color:#beceeb}

3. 左フロート、右パディング

.left{float:left;width:128px;}
.right{min-height:190px;margin-left:150px;background-color:#beceeb}

4. 左フロート

.left{float:left;width:128px;}
.right{min-height:190px;padding-left:150px;background-color:#beceeb}

to div設定オーバーフロー属性は要素を BFC にします。流体アダプティブ レイアウトにパディングを使用する場合、アダプティブ レイヤーを BFC にすることはできません。

すべての BFC 属性はこのように動作しますか

はい、独自の特性により、特定のパフォーマンスは異なります

.left{float:left;width:128px;}
.right{min-height:190px;overflow:hidden;background-color:#beceeb}

2 列適応レイアウト

 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: オーバーフローのスタイルパフォーマンスに依存する

リサイズストレッチ

css3にあります。属性名はresizeで、要素のサイズをストレッチすることができます。

.resize:both 水平方向と垂直方向の両方に伸縮します

.resize:horizo​​ntal 水平方向のみに伸縮します

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>

このようなボタンはストレッチ効果を実現できます。

テキスト フィールドのデフォルトはオーバーフローであるため、テキスト フィールドには独自のサイズ変更属性があります: auto

テキスト フィールドのサイズ変更ドラッグ フィッシング領域のサイズは 17*17 ピクセルです。 つまり、スクロールバーのサイズ

の省略記号テキストがオーバーフローして省略されます

<button style="resize:both;overflow:hidden">按钮</button>

6: オーバーフローとアンカーポイントテクノロジー

アンカーポイントの位置決めの本質: 変数コンテナのスクロール高さ

トリガーアンカーポイントの位置合わせ

1. URL アドレスのアンカー チェーンとアンカー要素

2. フォーカス可能なアンカー要素がフォーカスされています。

アンカーポイントの位置決めの役割
1. 素早い位置決め
2. アンカーの位置決めとオーバーフロータブテクノロジー

アプリケーションシナリオ: シングルページアプリケーション

以上がCSS のオーバーフロー属性に関するヒント、オーバーフロー属性の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。