CSSレイアウトのリトル記録

水平垂直方向に中央揃えCSSについて達成するためのいくつかの方法:

.cssのポジショニング:マージン、パディング、位置と

位置:絶対; //絶対配置が、一般的に使用して、親要素に関連して採用されている親が配置されていない場合は、bodyタグは、親レベルのターゲティングとして使用されます

マージン位置と水平方向と垂直方向のセンタリングのdivに2つのボックスを達成するためのメソッドを持ちます:

HTML:

< ボディ> 
    < divのクラス= "親" > 
        < divのクラス= "こども" >ここでは、サブボックスがある</ DIV > 
    </ DIV > 
</ ボディ>

CSS:

 <スタイル>
        。親{
            背景色:アクアマリン。
            幅:300ピクセル;
            高さ:300ピクセル;
            位置:相対;
        }
        。子供達{
            背景色:黄色;
            幅:100ピクセル;
            高さ:100pxに。
            位置:絶対;
            トップ:0%。
            右:0%。
            下:0%。
            左:0%。
            マージン:自動;
        }
        /* 。子供達{
            
            幅:100ピクセル;
            高さ:100pxに。
            位置:絶対;
            トップ:100ピクセル;
            左:100ピクセル;
        } * /
    </スタイル>

 

効果:

 

 中心レベルを設定する中心高垂直中心線、テキスト整列を達成するように設定.inlineハイト
        .parent { 
            背景色アクアマリン300ピクセル ; 
            高さ300ピクセル ; 
            テキスト整列センター ; 
        } 
        .children { 
            表示インラインブロック
            行の高さ300ピクセル ; 

        }

行の高さは:継承; //指定された行の高さがあり、親要素から継承した値

マージン:継承し、そこに親要素から継承された//値のマージンの要件

z屈折率多層CSSに記録

 z屈折率:属性が有効な位置(非stastic)であり、値が大きい値、正または負とすることができ、比較に依存近い画面は、異なるレベルを示します

おすすめ

転載: www.cnblogs.com/Zxq-zn/p/11601929.html