最も一般的に使用されるレイアウト要素として、DIV は Web 開発において重要な役割を果たします。 DIV を使用する際に遭遇したさまざまな操作の概要を以下に示します。 1.div はスクロール バーを表示します<br />これは非常に一般的なタスクであり、スクロール バーは基本的に CSS を通じて実装されます。 (1)垂直スクロールバーの設定 スクロールバーを表示するかどうかは、主にCSSで以下のプロパティを設定します。 コードをコピー コードは次のとおりです。オーバーフロー: 表示|自動|非表示|スクロール オーバーフローx: 水平スクロールバー overflow-y: 垂直スクロールバー パラメータの意味: visible: コンテンツをクリップせず、スクロールバーも追加しません。このデフォルトが明示的に指定されている場合、オブジェクトは、オブジェクトを含むウィンドウまたはフレームのサイズにクリップされます。また、クリッププロパティの設定は無効になります。 auto: これは body オブジェクトと textarea のデフォルト値です。コンテンツをクリップし、必要に応じてスクロールバーを追加します 非表示: オブジェクトのサイズを超えるコンテンツを表示しない スクロール: 常にスクロールバーを表示する overflow:auto; これは、コンテンツが div の高さを超えると、垂直スクロール バーが表示されることを意味します。したがって、必要に応じて垂直スクロール バーを表示する必要があります。これは次のように実現できます。 コードをコピー コードは次のとおりです。<divstyle="overflow:auto;">...</div> または コードをコピー コードは次のとおりです。<divstyle="overflow-y:auto;">...</div> (2)水平スクロールバー 水平スクロールバーのみを表示したい場合は、通常、改行を無効にする設定を使用する必要があります。例: コードをコピー コードは次のとおりです。<divstyle="overflow-x:auto;height:40px;width:100px;white-space:nowrap"></div> (3)IEのスクロールバーの外観は主にさまざまな色属性を使用します。 コードをコピー コードは次のとおりです。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; スクロールバーのドラッグ領域の色を設定または取得します Chrome では、基本的に Webkit 固有のプロパティを使用して設定されます。 コードをコピー コードは次のとおりです。::-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:horizontal{/*水平スクロールバーのスタイル*/ 幅:5px; 背景色:#CCCCCC; -webkit-border-radius:6px; } 2. div イベントのバブリングを無効にする<br />これは基本的に、IE を除いて、標準の event.stopPropagation() メソッドを使用してイベントのバブリングを防止します。 コードをコピー コードは次のとおりです。functionBigDiv(イベント){ イベントが伝播を停止する場合 event.stopPropagation(); //FirefoxカーネルベースのブラウザでstopPropagationをサポート }それ以外{ event.cancelBubble=true; //IE をベースに記述 } //その他のコード... } 3. div がデフォルトの動作を実行しないようにする<br />これは実際にはよくある問題です。送信ボタンの送信フォームの動作、<a> 要素のハイパーリンクの動作など、デフォルトの動作を持つ要素の場合、これらの要素にイベントを適用すると、デフォルトの動作をキャンセルする必要が生じることがよくあります。これは、イベント コールバック関数で event.preventDefault() を呼び出すことによって実現されます。 4. divの位置を動的に計算する(divポップアップレイヤーの位置の一般的な計算など) (1)DOM属性方式 offsetTop: 現在のオブジェクトからその親レイヤーの上端までの距離。値を割り当てることはできません。オブジェクトから親オブジェクトの上端までの距離を設定するには、style.top プロパティを使用します。 offsetLeft: 現在のオブジェクトからその親レイヤーの左側までの距離。値を割り当てることはできません。オブジェクトから親オブジェクトの左側までの距離を設定するには、style.left プロパティを使用します。 ここでは、 offsetTop と style.top の違いに注意する必要があります ( offsetLeft と style.left についても同様です)。 •OffsetTop は数値を返しますが、style.top は数値に加えて単位 px を含む文字列を返します。通常、これを数値に変換するには parseInt が必要です。 • offsetTop は読み取り専用ですが、style.top は読み取り/書き込み可能です。 •HTML 要素にトップ スタイルが指定されていない場合、style.top は空の文字列を返します。 注意: Firefox では、style.top に値を割り当てる場合、その値も文字列形式 (px 付き) にする必要があります。 (2)CSSにおける位置属性の位置への影響 位置のデフォルトのプロパティ値は静的です。しかし、位置において最も重要な属性値は相対的と絶対的です。 多くの場合、絶対属性を left および top と組み合わせて、関連する「フローティング レイヤー」効果を作成します。ただし、ウィンドウではなくコンテナーにフローティング効果が必要な場合もあります。このとき、高さと幅を計算するのは面倒なだけでなく、完璧な効果を達成するのはほぼ不可能です。実際、必要なのは、前のレベルのスタイル属性の位置を相対的に設定するだけです。つまり、位置属性値の効果は、コンテナ スタイルの位置属性値によって直接影響を受けます。例えば、次のネスト構造AB コードをコピー コードは次のとおりです。<div="A"> <div="B"> </div> </div> A の位置が相対的である場合、B の位置は絶対的です。この時点で、left:0 と top:0 はウィンドウ ドキュメントではなく、ID A の div をターゲットにしています。ただし、A で padding="50px" を設定すると、位置が absolute に設定されていない A 内の他の要素は A の padding 値によって変更されますが、B の位置は親レベルに対して相対的であるため変更されません。 ここでは、位置の 4 つの属性値 (相対、絶対、固定、静的) について簡単に説明します。上記のコードを例に挙げてみましょう。 相対的 相対値は、要素が自身の位置に対してオフセットされていることを意味します。たとえば、上記のコードで、B が相対値に設定されている場合、次の CSS コードを設定します。 コードをコピー コードは次のとおりです。#B{ 位置:相対; パディング:5px; 上:5px; 左:5px; } これを次のように理解することができます。相対属性が設定されていない場合、B の位置は通常のドキュメント フローに従って特定の位置にある必要があります。しかし、Bの位置を相対的に設定すると、あるべき位置に応じて上、右、下、左の値に応じてオフセットされます。ここで、relativeの「相対的」の意味が反映されます。 注: 相対オフセットは、オブジェクトの余白の左上を基準とします。 絶対 この属性は常に誤解を招きます。 position 属性が absolute に設定されている場合、常にブラウザ ウィンドウに従って配置されるというのは誤りです。実はこれが固定属性の特徴なのです。 B の位置が絶対に設定されている場合、オフセットの対象は誰ですか?ここでは 2 つの状況があります。 •B の親オブジェクト (または親オブジェクトである限り、その親) の親も位置属性を設定し、位置属性の値が絶対または相対である場合、つまりデフォルト値ではない場合は、B はこの親に従って配置されます。 •Bに位置属性を持つ親オブジェクトがない場合、bodyが配置オブジェクトとして使用され、ブラウザウィンドウに応じて配置されます。これは比較的理解しやすいです。 修理済み fixed は absolute の特殊なタイプです。つまり、fixed は常に body を配置オブジェクトとして受け取り、ブラウザ ウィンドウに従って配置されます。 静的 position 属性が設定されていない場合、position のデフォルト値は、通常のドキュメント フローに従って要素を配置することです。 (3)JQueryプロンプトポップアップボックスは一般的な方法です。このタスクで最も重要なことは、ポップアップボックスの位置を計算することです。イベント ソースはイベント オブジェクトを通じて取得され、offset() 関数を使用してドキュメントに対するイベント ソースの位置を計算できます。 コードをコピー コードは次のとおりです。vartop=$(event.target).offset().top; varleft=$(event.target).offset().left; ポップアップ レイヤーはドキュメント、つまりページの左上隅を基準とするため、Body 要素の最初のレイヤーに配置する必要があります。つまり、親クラスは body です。他の要素に含まれている場合は、親クラスの位置スタイルが相対的に設定されていることを確認する必要があります。計算された上と左はイベントソースの位置です。この位置で表示すると、イベントソースオブジェクトが隠れてしまいます。したがって、通常は、top+20 などの手動オフセットを行う必要があります。 5. div要素を非表示にする CSS で要素を非表示にする方法は、display:none と visibility:hidden の 2 つがあります。 2 つの方法の違いは、表示値を設定すると要素が完全に非表示になり、要素が占めていたスペースが消え、下の要素が上に移動することです。可視性を設定すると、要素が占める位置はそのまま残りますが、非表示になります。 6. div の子要素の水平方向と垂直方向の配置は、 float 属性を使用して制御されます。デフォルトでは、div は垂直に配置され、幅は 100% です。CSS で float:left を設定すると、水平になります。水平行を途中で分割し、残りを垂直行に復元する場合は、clear:both 変更を使用する必要があります。次の例を見てください。 コードをコピー コードは次のとおりです。<div> <divstyle="float:left">ああああああ</div> <divstyle="float:left">bbbbbbbbbbbbbb</div> 上記の 2 つの div は水平に配置されています。 <divstyle="clear:both"></div>これは非常に重要です。上位 2 つのレイヤーのフロートをクリアし、下位のレイヤーが垂直に配置され続けることを意味します。 <div>このレイヤーは垂直に配置されています</div> <div>このレイヤーは垂直に配置されています</div> </div> 上記は float プロパティの単純な適用例です。 float 属性は主に、要素のフロー方向、つまり右に移動するべきか左に移動するべきかを制御するために使用されます。 float プロパティの構文は次のとおりです。 コードをコピー コードは次のとおりです。フロート:なし|左|右 none: デフォルト値。物体は浮かばない 左: テキストはオブジェクトの右側に流れます 右: テキストはオブジェクトの左側に流れます 特定の効果を実現するには、通常、他のオブジェクトに影響を与えないように、ある時点でフローティングをキャンセルする必要があります。これは、上で紹介した clear プロパティによって実現されます。 clear プロパティには 4 つの値があります。 コードをコピー コードは次のとおりです。クリア:両方|左|右|なし; 簡単に言えば、clear 属性の機能はフロートを「クリア」することです。要素に clear:left; が設定されている場合、要素の左側にフローティング要素がないことを意味します。同様に、 clear:right; は要素の右側にフローティング要素がないことを意味します。 clear:both; は要素の両側にフローティング要素がないことを意味します。 clear:none は、両側にフローティング要素が許可されることを意味します。 7. div 内のテキストのフォントを設定する<br />まず、CSS でテキストを制御する属性のリストを確認します。 コードをコピー コードは次のとおりです。単語間隔: 単語間の間隔を定義します。値は、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> letter-spacing は文字間隔を 5px に設定します (5px は長さの単位)。text-align は配置を両端揃えに設定します。indent はインデントを 4em に設定します。line-height は行の高さを 17pt に設定します。上記の例から、CSS テキスト属性を使用すると、ページ上のテキストを簡単にタイプセットできることがわかります。 行間隔はフォント サイズによって異なります。一般的に、フォントが小さいほど、読みやすくするために行間隔を大きくする必要があります。Web ページで中国語フォントの行間隔設定がない場合、長い段落のテキストを読んでいる読者にとっては悲惨なことになるため、行の高さを適切に設定することが非常に重要です。一般的に、Web デザインでは行の高さはフォント サイズの 1.5 ~ 2 倍にする必要があります。 Word などのテキスト編集ソフトウェアでは、通常、フォントの 120% がデフォルトの行間隔として設定されています。 CSS の行の高さ設定は均等に分割され、各行の上部と下部に追加されます。つまり、行の高さが 20 ピクセルに設定されている場合、テキストの各行の上下に 10 ピクセルのスペースが確保されます。 8. div のツールチップを別の行で表示するように設定する<br />HTML では、リンクや画像に title 属性を追加して説明文を表示することができます。通常、これらのテキストは 1 行で表示されますが、複数行で表示する方法はありますか?解決策は2つあります。 (1)タイトル属性を複数行で記述します。例: コードをコピー コードは次のとおりです。<ahref=#"title="説明 1説明 2説明 3">ウェブサイト構築</a> (2)最初の行は直感的ではありません。改行が必要な箇所に (&は半角)または を追加して、次の結果を実現することもできます。 コードをコピー コードは次のとおりです。<ahref=#"title="説明 1 説明 2 説明 3">ウェブサイト構築</a> <ahref=#"title="説明 1 説明 2 説明 3">ウェブサイト構築</a> 9. マウスの中ボタンを使用して水平スクロール バーを制御する<br />Chrome と FireFox では、通常、マウスの中ボタンは垂直スクロール バーを制御するために使用されます。DIV に水平コントロール バーしかない場合、マウスの中ボタンではデフォルトではスクロールしません。この場合は、自分で実装する必要があります。 まず、マウスホイール イベントをフックします。 コードをコピー コードは次のとおりです。//非FireFoxのマウスホイールイベント element.onmousewheel=要素がスクロールされる。 //FireFox のマウスホイールイベント element.addEventListener('DOMMouseScroll',fireElementScrolled,false); ここでの Firefox の特別な点は、addEventListener を使用して接続する必要があることです。 次に、fireElementScrolled メソッドを実装します。 コードをコピー コードは次のとおりです。fireElementScrolled = 関数 (イベント) { varrolled=0; イベントホイールデルタの場合 ロールされた=event.wheelDelta; } それ以外{ //Firefox: 処理する必要がある ロールされた=-イベントの詳細*30; } varhtmlElement=document.getElementById('テスト'); htmlElement.scrollLeft=htmlElement.scrollLeft をロールバックします。 イベントをデフォルトにしない(); falseを返します。 }; 原理は非常にシンプルで、スクロール ホイールのスクロール距離を取得し、div 要素の scrollLeft 属性に値を割り当てます。 10. 子要素を中央揃えにする (1) 水平方向の中央揃え 通常のテキストや画像を中央揃えにするのは簡単です。親コンテナの CSS スタイルに text-align:center; を含めるように設定するだけです。 子要素が DIV またはその他の要素の場合、状況は少し複雑になります。div を例に挙げます。子 div が 1 つしかない場合は、子要素の CSS スタイルに margin:0auto; を含めるように設定することで、中央揃えを実現できます。たとえば、次の例をご覧ください。 コードをコピー コードは次のとおりです。<divid="a" style="width:400px;height:300px;border:1pxsolidgreen;"> <divid="b"style="margin:0auto;width:200px;border:1pxsolidblue;">単純なサブ DIV の中央揃えの問題</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> (2)垂直方向のセンタリング 垂直方向のセンタリングは少し面倒ですが、水平方向と垂直方向のセンタリングを同時に実現できる非常に簡単な方法があります。まず、親要素に対してposition:relativeを記述します。これは、子要素にposition:absoluteを記述した場合に、外側に配置されないようにするためです。次に、子要素の高さと幅を記述します。一部のブラウザでは、この 2 つの値がないと解析時に予期しない位置ずれが発生します。次に、メソッド全体の核心部分です。子要素に top: 50%、left: 50% と margin-top: に高さの半分の値の負の数、margin-left: に重みの半分の値の負の数を指定します。もちろん、親要素の幅と高さも最初に記述する必要があります。例をご覧ください: コードをコピー コードは次のとおりです。<divstyle="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;border:1pxsolidred;">センタリング方法</div> |
<<: HTMLにビデオを挿入してすべてのブラウザと互換性を持たせる方法
>>: 動的な色切り替えの実装コードをサポートするために、CSS で SVG 画像を参照します。
質問前回のクロスドメイン リソース共有に関する記事では、ドメイン間で Cookie を送信する場合、...
この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...
win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...
恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...
以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピーbody、di...
この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安全か...
効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅に...
vue-cli で構築されたプロジェクト スキャフォールディングでは、すでに autoprefix...
この記事では、主に同じ親タグの左側と右側にある 2 つのボタンの CSS レイアウト方法を紹介し、皆...
Weibo ユーザーのフォローを一括で解除するクールな JavaScript コードWeibo には...
問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...
1. Apache 2.4.41 のインストールと設定最初のステップは、以下に示すように、https...
正規表現を使用してIEブラウザのバージョンを判別するIEブラウザかどうか確認するif (docume...
目次1. 初期SQLの準備2.MysqlはSQL文の実行時間をチェックします3. さまざまなクエリの...
目次序文Linux アプリケーション実行中に開いているファイルが多すぎる問題の分析と解決Linux ...