さまざまなレイアウトと中央揃えの実装

1.水平方向中央

方法1:margin:0 auto;(最も一般的な中央レイアウト)方法2:text-alignとinline-blockの結合(親要素のtext-alignをcenterに設定).
この方法は、画像、ボタン、文字などの中央モードに適用するのが望ましい.そうしないと、inline-blockを使用して中央レイアウトを行う必要がある.

方法3:position絶対位置決めにより中央レイアウトを実現する.
ブロックレベル要素が幅を与えない場合に適している(transtromのtanslateX法を用いる必要がある).

#parent{
    position: relative;
}
#child{
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%); } 

方法4:flexフレックスレイアウトのプロパティを使用します.
サブエレメント幅が既知の場合

#parent{
    display: flex;
    justify-content: center;
}

他にもいろいろな方法がありますが、一般的にはあまり使われていません.また、様々な方法の長所と短所が異なり、選択的に使用することができる.
---------------------------------------------------------------------------------------------------------------------------------------

2.水平方向中央および垂直方向中央

方法1:まず不思議な方法を話しましょう.
サブエレメントdiv絶対位置決め親要素はに配置する必要があります.
サブエレメントtop、bottom、left、rightの4つの位置値はいずれも0 である.
サブエレメントmargin:auto;

次のコードは実現できますが、まだ問題があります.皆さん、花を見てください.

#parent{
    width: 100%;
    height:100%; position: fixed; } #child{ width: 400px; height: 200px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #ccc; } 

方式2:positionの絶対位置決めと負の枠線を利用して実現する.

#parent{
  position: fixed;
  width: 100%;
  height: 100%; } #child{ position: absolute; left: 50%; top: 50%; width: 400px; height: 200px; margin-top: -100px; margin-left: -200px; background-color: #ccc; } 

幅の広い要素が与えられていない場合は、transformを登場させ、各ブラウザの互換性を保つ必要があります.私のような怠け者の癌患者には、互換コードは与えられません.

他にもいくつかの方法があるはずですが、しばらくは思いもよらなかったので、書いてから補充します(ああ、flexを言うのを忘れました.もういいですか.書かないでください)-------------------------------------------------------------------------------------------------------------------

3.左固定右適応2列レイアウト

皆さんはこのレイアウトに一番詳しいと思います.普段も使っていることが多いので、あなたたちが書いたのは私よりいいと思います.
方式一:float+marginの方式
この方法は必ず親要素にフローティングをクリアすることを覚えておいてください.そうしないと気まずいですね.ここにはグローバルなフローティングをクリアする偽要素の方法が挿入されています.

.clearfix:after {
  content: '.';
  height: 0; overflow: hidden; clear: both; display: block; visibility: hidden; } .clearfix { zoom: 1;  } 

ちょっと複雑に見えますね.ここではこの方法の原理を分析しないで、覚えておけばいいです.もちろん、BFCをトリガする方法で直接解決することもできます(よく使われる方法は、親要素にoverflow: hidden;を設定することです).

ああ+語気~偏っているようで、約束のレイアウトは、次の訴えコードを参照してください.

#left{
    float: left;
    width: 100px;
}
#right{ margin-left: 120px; } 

方式2:float+overflowの方式これがBFCのルールを利用して2列レイアウトを実現したという伝説ですね!
この方式は直接浮動を取り除く必要がなくてもいいし、前後文にも影響しないので、使いやすいです.

#left{
    float: left;
    width: 100px;
    margin-right: 20px; 
}
#right{
    overflow: hidden;
}

方式3:float+margin+positionの方式この方法も使ったことがありますが、考えなければならないことは多いですが、実はまあまあです.次に、実装コードを参照してください.

#parent{
    position: relative;
}
#left{
    float: left;
    width: 100px; background-color: #ccc; } #right{ position: absolute; top: 0; left: 120px; background-color:pink; } 

この方式は実現するのは簡単だが、後文に影響があるので、自分で解決しなければならない.怠け者は書かない.
方式四:flex方式
これは、ピットが多いに違いありません.狭いレイアウトをお勧めします.もちろん、時々使うと確かに歪んでいます.

#parent{
  display: flex;
}
#left{
  width: 100px; margin-right: 20px; } #right{ flex: 1; } 

他にも、私はまだ使っていないし、書いていません.ネット上で検索すると、たくさんの精講があります.
-------------------------------------------------------------------------------------------------------------------

4.左アダプティブ右固定

実は私はただ1种の方法だけを书いて、私はすべて少し耻ずかしくて上に置いて、放っておいて、小さい花の颜の皮は比较的に厚くて、恐れません!
方法1:もちろんpositionですどうせpositionで解決できることが多いですが、同時に他にもいくつかの問題が発生するので、自分で考えてみましょう~

#parent {
  position: relative;
}
#left {
  margin-right:220px; } #right { position: absolute; right:0; top:0; width: 200px; } 

--------------------------------------------------------------------------------------------------------------------------------------------------------------


5.両側固定中間適応三列レイアウト

実はこのレイアウトも多いですね.ええと、昨日書いた宿題はこれです.
方式一:純float方式
注意:
左側の要素と右側の要素が優先的にレンダリングされ、それぞれ左と右にがフローティングされます.
中間要素はドキュメントストリームの最後にレンダリングされ、左右の2つの列の要素の中間に自動的に挿入され、marginの左右の余白をそれぞれ左右の2つの列の幅に設定し、中間要素を正しい位置に調整します.

.left{
    float: left;
    width: 200px;
    height: 200px; } .right{ float: right; width: 100px; height: 100px; } .middle{ margin:0 120px 0 220px; } 

しかし、floatを使うときは、親要素のフローティングをクリアすることを考えなければなりません.
方式2:positionの絶対位置決めはfloatの原理とあまり差がないと感じて、すべて左右の両側のブロックを先に固定して、更に中間部分に対して処理を行って、ただ自分で異なる情況の下でfloatあるいはpositionを選ぶことができます.

.parent{
    position: relative;
}
.left{
    position: absolute;
    width: 200px; height: 200px; top: 0; left: 0; } .right{ position: absolute; top: 0; right: 0; width: 100px; height: 100px; } .middle{ margin:0 120px 0 220px; } 

方式3:flexのフレキシブルレイアウト言わざるを得ないのは、実は多くのレイアウトがflexで実現できる(簡単に乱暴にへへへ)ということですが、flexの互換性があまりよくなく、また別の問題があるので、保険のためによく使われるものを選び、ここで簡単に紹介します.

.parent{
    display: flex;
}
.left{
    width: 200px; height: 200px; } .right{ width: 100px; height: 100px; } .middle{ flex: 1; margin:0 20px; } 

方式四:最后にこの淘宝の が辉いてに登场しました
このレイアウトは、メインバーを優先的にレンダリングし、両側の翼、すなわち翼を加えて、話をしたり話したりする必要があります.花はこの通りに書かれていますが、自分が書いたのが翼レイアウトであるかどうかは分かりません.子弟を誤らないように、ここで説明するのは参考になるだけですよ(訂正歓迎)~
最初のステップでは、まずメインバーを左にフローティングし、幅を100%に設定します.すなわち、親要素がいっぱいになります.
第2ステップでは、左欄を左にフローティングし、左外縁を-100%とする.
第3ステップでは、右欄を左にフローティングし、左外縁を負の自己幅とする.
第4歩、主欄を設置して、へへ、この時あなたがどんな方法を使っても効果が得られないで、解決方法は主欄の内容に1つの包みの層をプラスして、そして左右の外の距離を左右の両側の幅に設定します.
第五歩、よし、完璧!(でも忘れないで、フローティングをクリアしてね~)-------------------------------------------------------------------------------------------------------------------

[原句]時が来た

まず、それぞれの方法を試してみましたが、基本的に効果は達成できます.もちろん、実際の状況では複雑になります.いろいろなトラブルに遭遇します.幸運を祈っています.