cari

Rumah >hujung hadapan web >tutorial css >关于CSS布局技巧的总结分享

关于CSS布局技巧的总结分享

一个新手
一个新手asal
2017-09-06 09:36:171282semak imbas

单列布局

水平居中

  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>

  1. 子元素margin:0 auto;

  • 优点：兼容性好

  • 缺点：需要指定宽度

<!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>

  1. 子元素{display:table;margin:0 auto;}

  • 优点:只需要对自身进行设置

  • 不足:IE6,7需要调整结构

<!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>

  1. 父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半

  • 优点：兼容性好

  • 缺点：需要知道子元素的宽度

<!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. 父元素：relative；子元素：absolute；left:50%;transform: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%;
            transform: translate(-50%,0);
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

  1. 弹性盒子：父元素：display: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;
        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>

垂直居中

  1. vertical-align: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: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>
<!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;
            vertical-align:middle;
            line-height:450px;            
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            display:inline-block;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>
<!-- 这种方法需要知道父元素和子元素的高度，父元素的line-height的值为父元素高度减去子元素高度的一半。-->

  1. 父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

<!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: 50%;
            left:0;
            transform: translate(0,-50%);
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

  1. 父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;

  2. 父元素：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;
            align-items: center;        
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

水平垂直居中

  1. 父元素：display:table-cell;vertical-align:middle;text-align:center;
    子元素；display: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;
            display:table-cell;
            vertical-align:middle;
            text-align:center; 
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

  1. 父元素：position:relative;
    子元素：position:absolute

Atas ialah kandungan terperinci 关于CSS布局技巧的总结分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：解析HTML5中FileReader接口使用方法Artikel seterusnya：SVG霓虹灯效果

Artikel berkaitan

Lihat lagi