您好，欢迎来到皓榕美食网。
科技 教育 生活 旅游 时尚 美容 美食 健康 体育 游戏 汽车 家电
搜索
您的当前位置：首页关于CSS布局技巧的总结分享

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

来源：皓榕美食网


单列布局

水平居中

  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

    Copyright © 2019- hron.cn 版权所有

    违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务