HTML要素の中心位置とサイズstretching_html/css_WEB-ITnose-htmlチュートリアル-php.cn

HTML要素の中心位置とサイズstretching_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:58:32

オリジナル

1219 人が閲覧しました

ブロックレベル要素は、単独で行上にあり、高さと幅を持つ要素です。インライン要素には高さはありませんが、インラインのブロックレベル要素には高さがあり、折り返されません。

それでは、今後の詳細な学習の基礎を築くために、先ほどテストしたいくつかの例を使用して、この部分の知識を簡単にメモしてみましょう。

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 を設定する必要があります。

ブロックレベル要素は垂直方向に中央揃えになります

position、left、top 属性を使用する必要があります。トップはパンダウンを意味し、他は同じです。 Position 属性には 4 つの値があります。

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. ストレッチ

インライン要素、インラインブロックレベル要素、テーブル、絶対配置要素の場合:

水平方向の収縮です
垂直方向の収縮です

ブロックレベル要素と絶対配置要素:

水平方向に引き伸ばされます

<!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;} を追加すると、要素はブラウザウィンドウに完全には添付されません。

絶対配置要素の場合:

垂直方向に引き伸ばされます。

<!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 のボックスモデルでは幅/高さで境界線を含むサイズを指定します。