CSS3——靶心，圣杯与双飞翼布局

我就是我 2023-03-04 06:42 5阅读 0赞

# 靶心布局 #

**重点理解marggin的使用**

* { 
          margin: 0;
          padding: 0;
        }
        .round1,.round2,.round3,.round4,.round5{ 
          border-radius: 50%;
          background-color: #00b3ff;
          margin: 40px;
        }
        .round1{ 
          width: 500px;
          height: 500px;
          border: 10px solid #fff;
    
        }
        .round2{ 
          width: 400px;
          height: 400px;
          border: 10px solid #fff;
    
        }
        .round3{ 
          width: 300px;
          height: 300px;
          border: 10px solid #fff;
    
        }
        .round4{ 
          width: 200px;
          height: 200px;
          border: 10px solid #fff;
    
        }
        .round5{ 
          width: 100px;
          height: 100px;
          border: 10px solid #fff;
    
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]

# 圣杯布局 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]

为了使中间栏不被覆盖，利用`padding: 0px 200px;`利用padding而不用marggin是因为其他两个盒子也会跟着移动，然后再对左边栏 `left: -200px;`，右边栏`right: -200px`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]

# 双飞翼布局 #

双飞翼布局是再对圣杯布局进行优化，对同一个BFC的两个相邻盒子的margin会发生重叠进行解决，因此重新创作一个BFC，在中间栏加入  
新的div，利用`margin:0px 200px;`进行优化。

<body>
    
    <div class="container">
    	<div class="main">
    		<div class="main_w">中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间1栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中1间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏</div>
    	</div>
    	<div class="left">左边栏</div>
    	<div class="right">右边栏</div>
    </div>
    
    </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20230208/1c8bf06bc016452694299ee58fb1b050.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: /images/20230208/e338d4d871fb4bab8dde20830ba05b58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: /images/20230208/5a59e6a51c6c49ae9ab831bc90016033.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]: /images/20230208/6053ee8e4c7a4f04a18a60f46de43719.png