必見のCSSレイアウトのヒント共有

以下のエディターは、CSS レイアウトの必読のヒントを提供します。編集者がとても良いと思ったので、参考として共有したいと思います。エディターをフォローして見てみましょう

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. テキストの複数列レイアウト:

.three-column { padding :1em; -moz-column-count :3; -moz-column-gap: 1em; -webkit-column-count :3; -webkit-column-gap: 1em; column-count:3; column-gap:1em; }

以上が必見のCSSレイアウトのヒント共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。