margin-right负值——布局案例：要做图片展示的布局：方法一：基础代码：加上浮动：为什么是3px？右边多出3px

要做图片展示的布局：

方法一：

基础代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>布局</title>
  <style>
    /*css reset*/
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .container{
      width: 1100px;
      height: 500px;
      background-color: #0f0;
    }
    .content li{
      float: left;
      width: 420px;
      height: 190px;
      background-color: #00f;
    }
    .content .big_last{
      width: 260px;
      height: 380px;
      background-color: orangered;
    }
  </style>
</head>
<body>
<div class="container">
  <ul class="content">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="big_last"></li>
  </ul>
</div>
</body>
</html>

加上浮动：

为什么是3px？

右边多出3px 让width减少1px 减少2px 多出1px：

最终成型：

最终代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>布局</title>
  <style>
    /*css reset*/
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .container{
      width: 1100px;
      height: 500px;
      /*background-color: #0f0;*/
      margin: 0 auto;
    }
    .content{
      /*margin-right: -6px;*/
      /*margin-right: -3px;*/
      margin-right: -1px;
    }
    .content li{
      float: left;
      /*width: 420px;*/
      width: 419px;
      height: 190px;

      background-color: #00f;
      border: 1px solid black;
      margin-right: -1px;
      margin-bottom: -1px;
    }
    .content .big_last{
      float: right;
      /*float: left;*/
      width: 260px;
      height: 381px;
      background-color: orangered;
    }
  </style>
</head>
<body>
<div class="container">
  <ul class="content">
    <li class="big_last"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*css reset*/
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .container{
      width: 1100px;
      height: 500px;
      margin: 0 auto;
      /*background-color:skyblue;*/

    }
    .content{

      height: 381px;
      margin-right: -1px;
      border-top: 1px solid black;
      border-left: 1px solid black;
    }
    ul li{
      float: left;
      /*width: 420px;*/
      width: 419px;
      /*height: 190px;*/
      height: 189px;
      background-color: sandybrown;
      border-bottom: 1px solid black;
      border-right: 1px solid black;
      /*border-color:black;*/
      /*border-style: solid;*/
      /*CSS属性 border-right 是属性border-right-color, border-right-style, 和border-right-width的三者的缩写 不能同时存在。*/
      /*错误写法：*/
      /*border-bottom: 1px;*/
      /*border-right: 1px ;*/
      /*border-color:black;*/
      /*border-style: solid;*/
    }
    .big_last{
      float: right;
      /*width: 260px;*/
      width: 259px;
      /*height: 380px;*/
      height: 379px;
      background-color: lime;
    }
  </style>
</head>
<body>
<div class="container">
  <ul class="content">
    <li class="big_last"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</body>
</html>