検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSレイアウトテクニックのまとめと共有

CSSレイアウトテクニックのまとめと共有

一个新手
一个新手オリジナル
2017-09-06 09:36:171282ブラウズ

単一列レイアウト

水平方向中央揃え

  1. 親要素 text-align:center; 子要素: inline-block;

  • 利点: 優れた互換性

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中1</title>
<style>
    .parent {
        width: 500px;
        height: 400px;
        background: red;
        text-align: center;
    }
    .child {
        display: inline-block;
        width: 300px;
        height: 100px;
        background: blue;
    }
</style>
</head>
<body>
<p class="parent">
    <p class="child"></p>
</p>
</body>
</html>
    E

  • サブフェクションマージン: 0 Auto;

  1. 利点: 優れた互換性

    欠点: 幅を指定する必要がある

  • R
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>
    E

  • 子要素 {display: table; margin: 0 auto;}

    利点: 自分で設定するだけで済みます

    2. 欠点: IE6 と 7 は構造を調整する必要があります

  • 親要素: 相対的; 子要素: left :50%;margin-left:-幅の半分

    • 利点: 互換性が良い

  1. 欠点: 子要素の幅を知る必要がある

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            margin:0 auto;
            display:table;margin:0 auto;s
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

  • 親要素: 相対、子要素: 左: 50%。変換:translate (-50%, 0); 利点: 互換性が低い

  • 欠点: 子要素の幅を知る必要がない 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

  1. フレキシブルボックス: 親要素:表示: flex; justify-content: center;

  • 長所: シンプル

  • 短所: 互換性が低い

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%,0);
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>
    vertical-align: center;

  1. れぇぇぇぇぇぇ
    親要素:position:relative;子要素:position:absolute;top:50%;translate(0,-50%);

    • 親要素:position:relative;絶対;top:50%;margin-top:-子要素の高さの半分;

    • 親要素: display:flex;align-items:center;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中1</title>
<style>
    .parent {
        width: 500px;
        height: 400px;
        background: red;
        display: flex;
        justify-content: center;
    }
    .child {
        width: 300px;
        height: 100px;
        background: blue;
    }
</style>
</head>
<body>
<p class="parent">
    <p class="child"></p>
</p>
</body>
</html>
    水平方向と垂直方向の中央揃え

    2. 親要素: display:table-cell;vertical-align:middle;text-align:center;
子要素;display:inline-block;

  1. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display:table-cell;
            vertical-align:middle;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

親要素:position:relative;
    子要素:position ：絶対

以上がCSSレイアウトテクニックのまとめと共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 での FileReader インターフェイスの使用法を解析する次の記事：HTML5 での FileReader インターフェイスの使用法を解析する

関連記事

続きを見る