DIV の一般的なタスク (パート 1) — 一般的なタスク (スクロール バーの表示、div の非表示、イベント バブリングの無効化など)

オーバーフロー: 表示|自動|非表示|スクロール
オーバーフローx: 水平スクロールバー
overflow-y: 垂直スクロールバー

<divstyle="overflow:auto;">...</div>

<divstyle="overflow-y:auto;">...</div>

<divstyle="overflow-x:auto;height:40px;width:100px;white-space:nowrap"></div>

scrollbar-3dlight-color:color; スクロールバーのライト境界線の色を設定または取得します。
scrollbar-highlight-color:color; スクロールバーの 3D インターフェイスの明るいエッジの色を設定または取得します。
scrollbar-face-color:color; スクロールバーの 3D サーフェスの色を設定または取得します。
scrollbar-arrow-color:color; スクロール バーの方向矢印の色を設定または取得します。スクロール バーが表示されているが使用できない場合、このプロパティは無効です。
scrollbar-shadow-color:color; スクロールバーの 3D インターフェイスの暗いエッジの色を設定または取得します。
scrollbar-darkshadow-color:color; スクロールバーの暗い境界線の色を設定または取得します。
scrollbar-base-color:color; スクロールバーの基本色を設定または取得します。他のインターフェースの色もそれに応じて自動的に調整されます。
scrollbar-track-color:color; スクロールバーのドラッグ領域の色を設定または取得します

::-webkit-スクロールバー-トラックピース{
background-color:#fff;/*スクロールバーの背景色*/
-webkit-border-radius:0;/*スクロールバーの角丸の幅*/
}
::-webkit-スクロールバー{
width:8px;/*スクロールバーの幅*/
height:8px;/*スクロールバーの高さ*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直スクロールバーのスタイル*/
高さ:50px;
背景色:#999;
-webkit-border-radius:4px;
アウトライン:2pxsolid#fff;
アウトラインオフセット:-2px;
境界線:2pxsolid#fff;
}
::-webkit-scrollbar-thumb:hover{/*スクロールバーのホバースタイル*/
高さ:50px;
背景色:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizo​​ntal{/*水平スクロールバーのスタイル*/
幅:5px;
背景色:#CCCCCC;
-webkit-border-radius:6px;
}

functionBigDiv(イベント){
イベントが伝播を停止する場合
event.stopPropagation(); //FirefoxカーネルベースのブラウザでstopPropagationをサポート
}それ以外{
event.cancelBubble=true; //IE をベースに記述
}
//その他のコード...
}

<div="A">
<div="B">
</div>
</div>

#B{
位置:相対;
パディング:5px;
上:5px;
左:5px;
}

vartop=$(event.target).offset().top;
varleft=$(event.target).offset().left;

<div>
<divstyle="float:left">ああああああ</div>
<divstyle="float:left">bbbbbbbbbbbbbb</div>
上記の 2 つの div は水平に配置されています。
<divstyle="clear:both"></div>これは非常に重要です。上位 2 つのレイヤーのフロートをクリアし、下位のレイヤーが垂直に配置され続けることを意味します。
<div>このレイヤーは垂直に配置されています</div>
<div>このレイヤーは垂直に配置されています</div>
</div>

フロート:なし|左|右
none: デフォルト値。物体は浮かばない
左: テキストはオブジェクトの右側に流れます
右: テキストはオブジェクトの左側に流れます

クリア:両方|左|右|なし;

単語間隔: 単語間の間隔を定義します。値は、Normal|<length> です。
文字間隔: 各文字間の間隔を定義します。値は、Normal|<length> です。
テキスト装飾: テキストの「装飾」スタイルを定義します。値の範囲は、なし|下線|上線|取り消し線|点滅です。
Vertical-align: 要素の垂直位置を定義します。値は、Baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage> です。
text-transform: テキストを他の形式に変換します。可能な値: Capitalize|uppercase|lowercase|none。
Text-align: テキストの配置を定義します。値は、Left|right|center|justify です。
Text-indent: テキストの最初の行のインデント方法を定義します。値は <長さ>|<パーセンテージ> です。
行の高さ: テキストの行の高さを定義します。値の範囲は、標準|<数値>|<長さ>|<パーセンテージ> です。

<pstyle="letter-spacing:5px;text-align:justify;text-indent:4em;line-height：17pt">テキスト属性が処理された後、単語間のスペースが広がり、行間の行の高さが広がり、配置が両端揃えになり、段落の先頭がさらに 2 つのスペース分インデントされていることがわかります。 </p>

<ahref=#"title="説明 1説明 2説明 3">ウェブサイト構築</a>

<ahref=#"title="説明 1&#10;説明 2&#10;説明 3">ウェブサイト構築</a>
<ahref=#"title="説明 1&#13;説明 2&#13;説明 3">ウェブサイト構築</a>

//非FireFoxのマウスホイールイベント
element.onmousewheel=要素がスクロールされる。
//FireFox のマウスホイールイベント
element.addEventListener('DOMMouseScroll',fireElementScrolled,false);

fireElementScrolled = 関数 (イベント) {
varrolled=0;
イベントホイールデルタの場合
ロールされた=event.wheelDelta;
}
それ以外{
//Firefox: 処理する必要がある
ロールされた=-イベントの詳細*30;
}
varhtmlElement=document.getElementById('テスト');
htmlElement.scrollLeft=htmlElement.scrollLeft をロールバックします。
イベントをデフォルトにしない();
falseを返します。
};

<divid="a" style="width:400px;height:300px;border:1pxsolidgreen;">
<divid="b"style="margin:0auto;width:200px;border:1pxsolidblue;">単純なサブ DIV の中央揃えの問題</div>
</div>

<divstyle="幅:400px;高さ:300px;境界線:1pxsolidred;">
<divstyle="margin:0auto;position:relative;left:50%;float:left;">
<divstyle="位置:相対;左:-50%;フロート:左">
<divstyle="border:1pxsolidblue;text-align:center;">1</div>
<divstyle="border:1pxsolidblue;text-align:center;">2</div>
<divstyle="border:1pxsolidblue;text-align:center;">3</div>
<divstyle="border:1pxsolidblue;float:left;">4</div>
<divstyle="border:1pxsolidblue;float:left;">5</div>
<divstyle="border:1pxsolidblue;float:left;">6</div>
</div>
</div>
</div>

<divstyle="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;border:1pxsolidred;">センタリング方法</div>