ホームページ > 記事 > ウェブフロントエンド > 2016.3.14CSS ポジショニング 6 日目_html/css_WEB-ITnose
2016.3.14CSS ポジショニング 6 日目_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:24:101103ブラウズ
CSS の配置 CSS の配置メカニズム
CSS には、通常のフロー、フローティング、絶対配置という 3 つの基本的な配置メカニズムがあります。
特に指定しない限り、すべてのタグは通常のストリームに配置されます。
ブロックレベルの要素は上から下に順番に配置され、ボックス間の垂直距離はボックスの垂直マージンによって計算されます。
インラインボックスは横一列に配置されます。水平方向のパディング、境界線、マージンを使用して、それらの間の間隔を調整できます。
position 属性
position 属性を使用すると、要素ボックスの生成方法に影響する 4 つの異なるタイプの配置を選択できます。
4 つの属性値が含まれます: static、relative、absolute、fixed
コード表示
position: static;
staticはposition属性のデフォルト値であり、特別な位置指定はありません。いずれも通常の位置です。
position:relative;
HTMLコード:
<p class="p1"> 我是p1</p><p class="p2"> 我是p2</p><p class="p3"> 我是p3</p>
CSSコード:
.p1 { position: relative; left: 30px;}.p2 { position: relative; right: 30px;} レンダリング:
説明:
position: absoulte;
HTML コード:
啦啦啦啦啦<h1 class="h1">我是h1大标题</h1>
CSS コード:
.h1 { position: absolute; top: 100px; left: 100px;} CSS スタイルを設定しない場合の外観:
CSS スタイルを設定した後の外観:
説明:
位置: 固定;
HTML コード:
<p class="one"> 我是p one</p><p class="two"> 我是p two</p>
CSS コード:
.one { position: fixed; top: 100px; left: 30px;}.two { position: fixed; top: 50px; right: 30px;} 効果表示:
位置: 固定;参照システムはブラウザウィンドウです
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style media="screen"> div{ width: 100px; font-size: 50px; position: absolute; height: 100px; } .a{ background-color: red; left: 0; top: 0; /*设置优先级，数字越大，放置越靠前*/ z-index: 3; } .b{ background-color: blue; left: 40px; top: 40px; z-index: 2; } .c{ background-color: green; left: 80px; top: 80px; z-index: 100; } </style></head><body><div class="a">1</div><div class="b">2</div><div class="c">3</div></body></html> Aboutインターフェース要素 ボックスオフセット オフセット前:
オフセット後:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap{ width: 300px; height: 300px; border: 1px solid red; margin: 100px; padding: 100px; position: relative; padding-left: 0; } .inner{ width: 200px; height: 200px; background-color: green; padding: 50px; position: relative; } .content{ width: 50px; height: 50px; background-color: red; position: absolute; left: 0; } </style></head><body> <!-- position:absolute;默认是相对于窗口进行定位 --> <div class="wrap"> <div class="inner"> <div class="content"></div> </div> </div></body></html> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。