margin设置

• margin: 10px;

  
  
  B059A053-F14A-44D4-9BCC-CBA412F68D61.png

• margin: 10px 20px;(顺时针设置margin)

  
  
  38389854-6675-4462-92EA-16CF65717359.png

• margin: 10px 20px 30px;(顺时针设置margin，少一个取对面的margin)

  
  
  A43F695B-3075-449B-899E-79C8195EE10D.png

• margin: 10px 20px 30px 40px;(顺时针设置margin)

  
  
  48046DF1-4E5A-44DB-9A43-B7E81D95FE34.png

• 为昨天的首页布局设置margin

重新设置lside

<div id="lside">
                    <div class="four">a</div>     
                    <div class="four">b</div>
                    <div class="four">c</div>
                    <div class="four">d</div>
</div>

设置class=“four”

.four {
               width: 380px;
               height: 130px;
               background: yellow;
               margin: 10px;
               float: left;
          }

效果图

3768C5CB-C596-4447-B8A9-6186414BBEED.png

用css控制border画三角形

• div的宽高设置为0

  
  
  B36458B7-73C7-4566-B0A2-4D14EE618F5B.png

• 效果图

  
  
  30C1A519-CD97-40C1-A4AD-BCE7C3A6CA96.png

• 将边框设置透明

  
  
  8387AD55-8FB5-43FD-A937-03255B087231.png

• 效果图

  
  
  2DA1C8B1-BE8D-431B-9576-F58DB668AFD6.png