ホームページ > 記事 > ウェブフロントエンド > CSSのわかりにくい知識のまとめと共有 - ポジショニングとlayout_html/css_WEB-ITnose
CSSのわかりにくい知識のまとめと共有 - ポジショニングとlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:40:181113ブラウズ
CSS の配置には、静的、相対、絶対、固定の 4 つのモードがあります。もう 1 つの静的はデフォルト値です。
static: それぞれに従って、動的レイアウト フローでの静的配置。ページ内の位置 要素のシーケンスと親子関係は自動的に配置され、動的レイアウト内のスペースを占めます。
相対: オフセット ( LEFT または TOP) の値が設定されている場合、対応する位置調整が行われます。位置調整の基準は、動的レイアウト フローの前の要素に基づいています (つまり、静的要素と相対要素に設定されます)。 、動的レイアウト フローではなく、動的レイアウト この要素の存在はストリーム内で無視されます (つまり、このタイプの要素が占めるスペースは計算されず、デフォルトで通常の要素の上位レベルに設定されます) Z-INDEX が設定されている場合）、オフセット（LEFT または TOP の値）が設定されている場合は、対応する位置調整が行われます。位置調整の基準は、静的に配置されていない親要素（または非静的にラップされた要素）に基づいています。 -static Positioning)、条件を満たす親要素がない場合は BODY が標準として使用され、オフセットが設定されていない場合は、要素の現在位置をデフォルトのオフセットに直接設定します。プロパティのラッピング、つまりブロックレベルの要素が絶対に配置された後、要素の幅と高さが明示的に設定されていない限り、要素のデフォルトの幅と高さは要素の内容に基づいて自動的に適応されます。fixed: 固定位置、動的レイアウト フローではなく、要素の存在は動的レイアウト フローでは無視されます (つまり、このタイプの要素が占めるスペースは計算されず、デフォルトは設定されません) Z-INDEXの通常要素のレイヤー）にオフセット（LEFTまたはTOPの値）が設定されている場合、位置調整の基準はブラウザウィンドウ（BODYとして理解できます）に基づいています。 , オフセットが設定されていない場合、要素の現在位置はデフォルトのオフセットに直接設定されます。また、固定配置には、幅と高さが設定されていない限り、ブロックレベルの要素が固定配置された後、折り返しプロパティが設定されます。要素は明示的に設定されます。それ以外の場合、要素のデフォルトの幅と高さは要素の内容に自動的に適応され、設定またはデフォルトのビット オフセットがブラウザ ウィンドウの範囲より大きい場合は表示されません。以下は、上記の 4 つの配置方法のデモ コードです:
<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>CSS Study</title> <style type="text/css"> html, body { margin:0px; padding:0px; height:100%; } #div0{ position:static; background-color:gray; height:200px; } #div1 { position:relative; background-color:green; height:200px; } #div2 { position: absolute; height: 50px; background-color: red; top: 20px; left: 50px; z-index: 9999; } #div3{ position:fixed; background-color:yellow; } </style> <script type="text/javascript"> window.onload = function () { alertpostion("div2"); alertpostion("div3"); } function alertpostion(divid) { var odiv = document.getElementById(divid); var top = odiv.offsetTop; var left = odiv.offsetLeft; alert("top:" + top +",left:" + left); } </script></head><body> <div id="div0"> div0 content position:static; </div> <div id="div1"> div1 content position:relative; <div id="div2"> div2 content position: absolute; </div> </div> <div id="div3"> div3 content position:fixed; </div></body></html> 最終的な表示効果は次のとおりです:
CSS のさまざまな配置の原理と機能を理解すると、CSS の配置を通じて共通のページ レイアウトを実現できます。
最初のレイアウト: 左側と右側のレイアウト、左側は固定サイズで、右側の幅は適応型です。 コードは次のとおりです:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>CSS Study</title> <style type="text/css"> html, body { margin: 0px; padding: 0px; height: 100%; } #warper{ margin:0px; padding:0px; height:100%; background-color:skyblue; } #sidebar{ position:absolute; top:0px; width:200px; height:100%; background-color:green; } #content{ position:relative; left:200px; height:100%; background-color:orange; } </style></head><body> <div id="warper"> <div id="content"> content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent </div> <div id="sidebar"> sidebar </div> </div></body></html> 実装の効果は次のとおりです:
読んだ後コードを読むと、なぜコンテンツを右側ではなく左側に配置する必要があるのか疑問に思うかもしれません。その理由は、コンテンツが適応幅、つまり 100% を維持する必要があるため、行スペース全体を占有する必要があるからです。相対位置指定のみを使用でき、左側のオフセットが空にする必要のある位置に設定されます。つまり、200PX になります。左側以外の 200PX ビットが実装され、残りはコンテンツ領域になります。サイドバーはフローティングしないと配置できないため、絶対配置に設定する必要があります。左オフセットを 0PX に設定し、幅を 200PX に設定すると、コンテンツの空の領域が左側に配置されます。ページ全体の左右のレイアウト。
2 番目のタイプ: 左側と右側のレイアウト、左側に適応幅、右側に固定幅があります。 コードは次のとおりです:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>CSS Study</title> <style type="text/css"> html, body { margin: 0px; padding: 0px; height: 100%; } #warper{ margin:0px; padding:0px; height:100%; background-color:skyblue; } #content { float:left; height: 100%; width:100%; margin-right:-200px; background-color: orange; } #content-inner{ height:100%; margin-right:200px; background-color:red; overflow:auto; } #sidebar { float: left; top: 0px; width: 200px; height: 100%; background-color: green; } </style></head><body> <div id="warper"> <div id="content"> <div id="content-inner"> content </div> </div> <div id="sidebar"> sidebar </div> </div></body></html> 実装の効果は次のとおりです:
実装の説明原則: まずコンテンツ要素を左側にフローティングします。フローティングには折り返しプロパティがあるため、表示幅を 100% に設定する必要がありますが、サイドバーを右側に配置する必要があるため、マージンは -200PX に設定されます。後続の要素 (サイドバー) がコンテンツ要素の右側の 200PX スペースに入ることができるようにし、コンテンツの右側に配置できるようにサイドバー要素を左側にフローティングし、幅を 200PX に設定します。 content 要素の右側が 200PX の Sidebar 要素で占められているため、content 要素に content-inner 要素を追加し、その右側の外側マージンを 200PX に設定し、右側の 200PX を空けます。サイドバー要素で覆われないようにし、Web ページの全体的な左右のレイアウトを形成します。
3 番目のタイプ: 左-中-右のレイアウト、左と右は固定幅、中央の幅は適応型です。 コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset="utf-8"/> <title></title> <style type="text/css"> html,body{ height:100%; margin:0px; padding:0px; } #warper { position:relative; height:100%; } #left { position: absolute; top: 0px; left: 0px; height: 100%; width: 200px; background-color: red; } #right { position: absolute; top:0px; right: 0px; width: 200px; height: 100%; background-color: green; } #content{ margin:0px 200px 0px 200px; height:100%; background-color:orange; } </style></head><body> <div id="warper"> <div id="left"> left </div> <div id="content"> content </div> <div id="right"> right </div> </div></body></html> 実装の効果は次のとおりです:
実装原理の説明: まず、ワーパー要素を相対位置に設定して、ラップされた 3 つの DIV 要素の位置がワーパー要素に基づいていることを確認します。次に、左要素と右要素を固定位置に設定し、幅をそれぞれ 200PX に設定します。 （実際の状況に応じて幅を設定できます）、左を設定します要素のビットオフセットをLEFT=0、TOP=0に設定します（もちろん、これがデフォルトであるため、設定を表示する必要はありません） )、右側の要素のビット オフセットを RIGHT=0 に設定して右側に固定し、TOP= 0 に設定してワーパー要素の上部と平行にします。 最後に、コンテンツ要素の左右のマージンを に設定するだけです。 : 200PX; 左右に 200PX のスペースを作り、最終的に左-中-右のレイアウトを形成します。
第四种布局：上中下布局，上面与下面固定高度及固定位置，中间自适应高度，代码如下：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html, body { margin: 0px; padding: 0px; height: 100%; } #warper { position:relative; margin: 0px; padding: 0px; height: 100%; } #header{ position:fixed; top:0px; height:50px; width:100%; background-color:yellowgreen; } #footer { position: fixed; height: 50px; bottom:0px; width: 100%; background-color:aqua; } #content{ margin:50px 0px 50px 0px; background-color:red; } </style></head><body> <div id="warper"> <div id="header">header</div> <div id="content">content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> end </div> <div id="footer">footer</div> </div></body></html> 实现效果如下图示：
实现原理说明：首先将header元素与footer元素分别设为固定定位，并指定高度及宽度（此处高度均设为50，宽度设为100%[注意包裹性]，可依实际情况设置），由于固定定位的位置调整是依据浏览器窗口的，所以只需将header元素TOP属性设为0，它就会始终在浏览器顶部，将footer元素BOTTOM属性设为0，它就始终在浏览器底部，最后将content元素的上下外边距设为50PX即可，这样就形成了上中下布局，当然中间content元素的高度并不是占据剩余空间，而是自适应内容的，如果设定固定高度多余的内容是无法显示的，所以这里应该考虑实际情况；
好了就总结到这里了，其实实现布局的方法有很多，我这里只是列举一些常用的比较简单的方法，关键是大家要知道CSS定位的原理，这样就能灵活应变了，不足之处，还请大家指出，谢谢！