CSS3 のレビューと構成 (ボックス サイズ、列、フレックス、インライン ボックス レイアウト)_html/css_WEB-ITnose

• position と float に加えて、レイアウトでは inline-box も使用できます。
  1. vertical-align 属性は inline-block 要素に影響し、その値を top に設定できます。
  2. 各列の幅を設定する必要があります
  3. HTML ソースコードの要素間にスペースがある場合、列の間に隙間ができます

     nav {display: inline-block;vertical-align: top;width: 25%;border: 1px solid yellowgreen;}.column {display: inline-block;vertical-align: top;width: 74%;border: 1px solid #66BAB7;}

     その他の表示

• フロートをクリア

  .box {  float: left;  width: 200px;  height: 100px;  margin: 1em;  border: 1px solid #66BAB7;}.after-box {  clear: left;/*left和both都可以*/  border: 1px solid yellowgreen;}

  http://zh.learnlayout.com/clearfix.html 透明な浮遊水は深い

• 列複数列レイアウト

  .three-column{  border: 1px solid #66BAB7;  padding: 1em;  -webkit-column-count: 3;  column-count: 3;  -webkit-column-gap: 1em;  column-gap: 1em;}

  この効果について

• box-sizing 要素を box-sizing: border-box に設定すると、この要素のパディングとボーダーは増加しなくなりますその幅。

  /*此时内边距和边框都不会增加它的宽度*/.simple {  width: 500px;  margin: 20px auto;  border: 1px solid blue;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}.fancy {  width: 500px;  margin: 20px auto;  padding: 50px;  border: 10px solid blue;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}

• フレックス レイアウト

  1. 単純なフレックス レイアウト

     .container {display: -webkit-flex;display: flex;background: lightblue;}nav {width: 200px;background: #66BAB7;}.flex-column {flex: 1;-webkit-flex: 1;background: yellowgreen;}

  2. 複雑なフレックス レイアウト

     .container {display: flex;display: -webkit-flex;}.first {flex: initial;-webkit-flex: initial;width: 200px;min-width: 100px;background: red;}.none {flex: none;-webkit-flex: none;width: 200px;background: yellow;}.flex1 {flex: 1;-webkit-flex: 1;background: yellowgreen;}.flex2 {flex: 2;-webkit-flex: 2;background: #66BAB7;}

  3. 中央フレックス レイアウト

     .vertical-container {height: 500px;display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;}.div {width: 200px;height: 200px;border: 10px solid #66BAB7;}

     アムウェイ: http://zh.learnlayout.com/toc.html