ホームページ > 記事 > ウェブフロントエンド > HTML要素の中心位置とサイズstretching_html/css_WEB-ITnose
HTML要素の中心位置とサイズstretching_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:58:321169ブラウズ
ブロックレベル要素は、単独で行上にあり、高さと幅を持つ要素です。インライン要素には高さはありませんが、インラインのブロックレベル要素には高さがあり、折り返されません。
それでは、今後の詳細な学習の基礎を築くために、先ほどテストしたいくつかの例を使用して、この部分の知識を簡単にメモしてみましょう。
1. 水平方向に中央揃え
- 非ブロックレベル要素を水平方向に中央揃え :
text-align:center を設定します。親要素のそれだけです。
- ブロックレベル要素は水平方向に中央揃えになります :
位置が絶対でも固定でもない場合 (つまり、ドキュメントから分離されていない場合) flow)、margin-left =margin-right=auto、ブロックレベル要素の幅が aoto でない場合、水平方向のセンタリングを実現できます。
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"/> 4 <head> 5 <style type="text/css"> 6 #header{ 7 border: 1px solid red; 8 height: 100px; 9 }10 #container{11 border: 1px solid blue;12 margin:0 auto;13 width: 300px;14 height: 300px;15 text-align: center;16 }17 </style>18 </head>19 <body>20 <div id="header" >header</div>21 <div id="container" >22 container23 </div>24 </body>25 </html>
2. 縦方向中央揃え
- テキストを縦方向中央揃え
のみの場合1 行のテキスト では、コンテナの行の高さをコンテナの高さと同じに設定します。
#container{ border: 1px solid blue; margin:0 auto; width: 300px; height: 300px; text-align: center; line-height: 300px; } 複数行テキスト の場合、テキストを囲むために少なくとも 1 つのコンテナ ボックスを追加する必要があります。ボックスの余白または親コンテナの余白を設定できます。 。もう 1 つの方法は、vertical-align 属性を使用することですが、この属性は table 要素に対してのみ有効であるため、ボックスの親要素の display:table を設定し、ボックスの display:table-cell を設定する必要があります。
- ブロックレベル要素は垂直方向に中央揃えになります
static: 静的な配置、デフォルト値、ドキュメント フロー内で移動しません。現時点では、top などの属性は無効です。
relative: ドキュメント フローから離れることなく、元の位置を基準とした相対的な配置。
absolute: ドキュメント フロー外の、非静的親要素を基準とした絶対的な配置 (元の位置は他の人によって占められています)。
fixed: 固定位置、ブラウザ ウィンドウを基準にして配置され、ドキュメント フローからも分離され、常にショッピング カート広告などに使用されます。
垂直方向に中央揃えの要素を絶対配置に設定したい場合、コンテナと中央揃えの要素のサイズに応じて上と左を設定できますが、親要素が非静的であることが前提となります。 。以下のように。
<!DOCTYPE html><html> <meta charset="utf-8"/> <head> <style type="text/css"> #header{ border: 1px solid red; height: 100px; } #container{ border: 1px solid blue; margin:0 auto; width: 300px; height: 300px; position: relative; } #content{ position:absolute; top: 100px; left: 100px; background-color: gray; width: 100px; height: 100px; } </style> </head> <body> <div id="header" >header</div> <div id="container" > <div id="content"> content </div> </div> </body></html>中央の要素が相対的に配置されている場合、親要素は非静的である必要はありません。これは良いことですが、オフセットの計算が不便であるという制限があります。中心の要素の上に兄弟ノードがある場合は、それも考慮する必要があります。兄弟ノードのサイズが固定されていない場合は、スクリプト ダイナミクスを使用してそれを忘れることしかできないと思います。中央の要素が固定配置されている場合はどうなるでしょうか?よく考えてみると、垂直方向のセンタリングに固定位置を使用することに特別な利点はありません。
3. ストレッチ
インライン要素、インライン ブロック レベル要素、テーブル、絶対配置要素の場合:
- left=right=auto の場合width=auto、それは
- 水平方向の収縮です top=bottom=auto、height=auto、それは
- 垂直方向の収縮です
- left=right!=auto、width=auto は
- 水平方向に引き伸ばされます
<!DOCTYPE html><html> <meta charset="utf-8"/> <head> <style type="text/css"> label{ border: 1px solid blue; margin: 1px 0; } div{ border: 1px solid red; margin: 1px 0; } </style> </head> <body> <label>我是横向收缩的label1</label> <div>我是横向拉伸的div1</div> </body></html>auto通常、これはデフォルト値です。画像内のラベルなど、ブロックレベル以外の要素のほとんどは水平方向と垂直方向に縮小します。デフォルトでは、図 div1 に示すように、ブロックレベル要素 div は水平方向に引き伸ばされ、垂直方向に縮小されます。通常、ブラウザは要素にデフォルトのスタイルを追加するため、*{margin:0;padding:0;} を追加すると、要素はブラウザ ウィンドウに完全には添付されません。 絶対配置要素の場合:
- top=bottom=!auto,height=auto の場合、
- 垂直方向に引き伸ばされます。
<!DOCTYPE html><html> <meta charset="utf-8"/> <head> <style type="text/css"> div{ position: absolute; background-color: green; top:0; bottom:0; height:auto; } </style> </head> <body> <div>我是纵向拉伸的div2</div> </body></html>auto と 100% のサイズの違い
auto は要素サイズが自動的に調整されることを意味し、幅/高さ: 100 % 要素のサイズは親要素のサイズに引き伸ばされ、その余白や境界線などが親要素を超える場合があります。しかし、テーブルの幅/高さによってテーブルセルの外部サイズが指定されるため、テーブルではこれは起こりません。
W3C のボックス モデルでは幅/高さでコンテンツのサイズを指定しますが、IE のボックス モデルでは幅/高さで境界線を含むサイズを指定します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。