CSS レイアウトのヒント 2016.03.06_html/css_WEB-ITnose

かわいい CSS レイアウト学習 Web サイトを見つけて、すぐに学習し始めました~

1. max-width:
   ページの左右の幅が縮小されるとき、左と右の悪い経験を避けるために、右スクロール バーでは、最大幅を使用できます。ページが幅より小さい場合は、自動的に縮小されます~

   max-width : 500px;margin: 0 auto;}

2. box-sizing:
   要素にbox-sizing:border-boxを設定した後、幅を決定した後、パディングとボーダーを設定し、幅を決定します変更されません。次のようにグローバル設定を設定してブラウザの互換性の問題を解決できます:

   -webkit-box-sizing : border-box;-moz-box-sizing:border-box;box-sizing:border-box; }

3. overflow:auto
   境界線はコンテンツのサイズに適応し、オーバーフローは発生しません。
   IE互換ソリューション:

   .example{overflow:auto;zoom:1; }

4. レスポンシブデザイン - メディアクエリ
   メディアクエリを使用した後、さまざまなページ幅に応じて異なるレイアウトを設定できます。方法は次のとおりです:

   //页面宽度大于600px时，nav模块浮动于左侧@media screen and (min-width: 600px) {nav {    float: left;    width: 25%;}section {    margin-left: 25%;}}//页面宽度小于599时，nav模块打横，在上方@media screen and (max-width: 599px) {nav li {    display: inline;}}

5. テキストの複数列レイアウト:

   うわー