• 子元素margin设百分比，都相对于父元素的宽

    image.png
    2、margin设百分比 - 图2

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         /* 子元素margin设百分比  都是相对于父元素的宽 */
    9.         *{
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.         .parent{
    14.             width: 400px;
    15.             height: 500px;
    16.             background-color: red;
    17.         }
    18.         .child{
    19.             width: 200px;
    20.             height: 200px;
    21.             margin-top: -50%;
    22.             margin-left: -50%;
    23.             background-color: blue;
    24.         }
    25.     </style>
    26. </head>
    27. <body>
    28.     <div class="parent">
    29.         <div class="child"></div>
    30.     </div>
    31. </body>
    32. </html>