HTMLとCSSのレイアウトテクニックまとめ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

HTMLとCSSのレイアウトテクニックまとめ_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:21:23

オリジナル

1073 人が閲覧しました

実際のアプリケーションのシナリオでは、CSS のレイアウトについて混乱する人が多く、レイアウトが多様であるため選択が困難です。今日は、CSS レイアウトについての理解をまとめ、さまざまなレイアウトの長所と短所を分析して理解することに時間を費やしました。また、フロントエンドに慣れていない友人とレイアウトに関する経験を共有したいと思っています。よくまとめられていませんが、修正を歓迎します。ここで、さまざまなレイアウトを紹介しましょう。局布布リアンレイアウト

<div class="parent">    <div class="child"></div></div>

ログイン後にコピー

は、ヘッド、コンテンツ領域、および賢者でよく使用されるタイプです。 . 水平方向に中央に表示されます。

.child{width:800px; margin: 0 auto;}

ログイン後にコピー

を実装するにはマージン: 0 auto を使用します

利点:

優れた互換性

欠点: ボックスの幅を指定する必要があります
1. テーブルを使用して

.child{display: table; margin: 0 auto;}

ログイン後にコピー

を実装します

利点:

親コンテナは必要ありません親の場合、自分で設定するだけで済みます

欠点:

IE6 および 7 は構造を調整する必要があります

2. inline-block と text-align を使用して

.parent{text-align: center;}.child{display: inline-block;}

ログイン後にコピー

を実現します . inline-block と text-align を使用します。 through through through through out through out out out off out out out''' '' ‐ ‐‐ ‐‐ ‐‐‐ down-, 要素と親要素

3 を実現するには 2 つあります。絶対配置を使用して水平方向の中央揃えのレイアウトを実現する場合、1 つは子コンテナーに幅がない場合、もう 1 つは子コンテナーに幅がある場合です。幅がない場合は、次のコードを使用できます。幅がある場合は、margin-left の負の値をコンテナの幅の半分に設定できます。

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

ログイン後にコピー

利点:

コンテナの幅を設定する必要がなく、モバイル端末で使用可能 flex レイアウトを使用して水平方向の中央揃えを実現するには、親コンテナセットで justify-content を直接設定します。親コンテナ内の属性値の中心。 2 番目の方法は、サブコンテナーでマージンを使用します: 0 auto

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

ログイン後にコピー

.parent{display: flex;}.child{margin: 0 auto;}

ログイン後にコピー

利点: 実装が簡単、特に応答性の高いレイアウトで使用する場合

欠点: 互換性が低く、レイアウトが広い領域で使用される場合、影響を受ける可能性があります効率

垂直方向のセンタリング

ここで説明する垂直方向のセンタリングは、高さのないサブコンテナの垂直方向のセンタリングであり、テキスト行の高さの単一行の垂直方向のセンタリングではありません

1。これを実現します (水平センタリングの使用) この方法には同じ長所と短所があります)

.parent{position: relative;}.child{position: absolute; top: 50%; transform: translateY(-50%);}

ログイン後にコピー

2. flex を使用して

.parent{display: flex; align-items: center;}

ログイン後にコピー

を実装します 3. display: table-cell を使用して

.parent{display: table-cell;vertical-align: middle;height: 400px;}

ログイン後にコピー

を実装します

概要 : 2 つを組み合わせます水平センタリングと垂直センタリングのレイアウト方法を相互に組み合わせて、水平センタリングのレイアウトを実現できます。ここで紹介するのは、絶対配置を使用して水平方向と垂直方向の中央揃えのレイアウトを実現する方法の 1 つです。他の方法を自分で試してみることもできます。 (以下に紹介するさまざまなレイアウトは、上記の水平方向および垂直方向のセンタリング方法に基づいており、その長所と短所は分析されません。)

.parent{position: relative;}.child{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

ログイン後にコピー

複数列レイアウト

複数列レイアウトも非常に一般的で、次の用途に適しています。片側が固定幅のレイアウト、もう一方の側がアダプティブレイアウトです。

フローティングレイアウト

以前、2カラムのフローティングレイアウト方法についてまとめましたが、ここでは改めてまとめません。興味がある方は、フローティングレイアウト方法についてのフロントエンドの時間を参照してください。（要約）。

複数の列とその他のレイアウト

複数の列とその他の配布レイアウトはコンテンツ内によく出現しますが、そのほとんどは同じ機能とレベルのコンテンツを並べて表示します。

HTML コード

<div class="parent">    <div class="column">1</div>    <div class="column">2</div>    <div class="column">3</div>    <div class="column">4</div></div>

ログイン後にコピー

1. flex を使用して複数列レイアウトを実装する

.parent{display: flex;}.column{flex: 1;}.column+ .column{margin-left: 20px;}

ログイン後にコピー

3. float を使用して複数列レイアウトを実装する

.parent{display: table; table-layout: fixed; width: 100%;}.column{display: table-cell; padding-left: 20px;}

ログイン後にコピー

ヒント

: table を使用する float で複数列のレイアウトを実装する場合、背景色を設定する場合は、背景を設定するときに .column ボックスを親コンテナとして使用し、その中に子コンテナを追加する必要があることに注意する必要があります。 color の場合、.column コンテナに背景色を直接設定すると、パディングによってボックス間にスペースが生成されなくなります。

9マスグリッドレイアウト

HTMLコード

.column{float: left; width: 25%; padding-left: 20px; box-sizing: border-box;}

ログイン後にコピー

1. flexを使用して9マスグリッドレイアウトを実装します

<div class="parent">    <div class="row">        <div class="item"></div>        <div class="item"></div>        <div class="item"></div>    </div>    <div class="row">        <div class="item"></div>        <div class="item"></div>        <div class="item"></div>    </div>    <div class="row">        <div class="item"></div>        <div class="item"></div>        <div class="item"></div>    </div></div>

ログイン後にコピー

2. テーブルを使用して9マスグリッドレイアウトを実装します

.parent{display: table; table-layout: fixed; width: 100%;}.row{display: table-row;}.item{display: table-cell; width: 33.3%; height: 200px; border: 1px solid red;}

ログイン後にコピー

全屏布局

HTML代码

<div class="parent">    <div class="top"></div>    <div class="left"></div>    <div class="right"></div>    <div class="bottom"></div></div>

ログイン後にコピー

使用绝对定位实现全屏布局

html,body,.parent{height: 100%; overflow: hidden;}        .top{position: absolute; top: 0; left: 0; right: 0; height: 0; background-color: black; height: 100px;}        .left{position: absolute; top: 100px; left: 0;bottom: 50px; width: 200px; background-color: orange;}        .right{position: absolute; top: 100px; left: 200px; right: 0; bottom: 50px; background-color: grey; overflow: hidden;}        .bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background-color: pink;}

ログイン後にコピー

响应式布局

meta标签的使用

<meta name="viewport" content="width=device-width, initial-scale=1"/>

ログイン後にコピー

使用媒体查询

@media screen and (max-width: 480px){         /*屏幕小于480px的样式*/}

ログイン後にコピー

总结：这些布局方法有些经常用到，有些由于兼容性的问题在具体项目相中使用的情况相对较少，不过对于移动端来说，以上总结的布局都是实用。今天特意花些时间来整理这些布局，一是为了巩固知识，二是希望这些方法能够分享给前端的初学者，让他们对布局有更深入的了解，当然这些并非是CSS中的所有布局方法，以后发现有什么布局没有总结到的，我会继续更新、分享，如果哪位同行对布局方法有所补充，或者发现博客中存在问题，欢迎相互交流。