CSS学习篇-2、css布局技巧

一、巧用margin负值(1)

1、场景描述：当我们要遇到下面这种情况时，会发现边框重叠了

2、解决方法

 ul li {
        float: left;
        list-style: none;
        width: 150px;
        height: 200px;
        border: 1px solid #333;
        /*添加margin-left*/
        margin-left: -1px;
      }

二、巧用margin负值(2)

1、场景描述：

2、解决方法

（1）当元素没有定位时

 ul li:hover {
          /* 添加定位 */
        position: relative;
        border: 1px solid orange;
      }

（2）当元素有定位时

 ul li:hover {
        border: 1px solid orange;
        /* 提高层级 */
        z-index: 1;
      }

三、文字环绕图片效果

1、场景描述

2、方法：给图片盒子添加浮动效果

 .pic {
      float: left;
      width: 446px;
      height: 439px;
    }

四、实现分页导航

1、场景描述

2、方法：将a标签转换为行内块元素，然后添加宽高以及边框，最后居中即可

 .box {
      text-align: center;
    }

    .box a {
      display: inline-block;
      width: 36px;
      height: 36px;
      line-height: 36px;
      background-color: #F7F7F7;
      border: 1px solid #ccc;
      text-align: center;
      text-decoration: none;
      color: #333;
    }

 <div class="box">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
  </div>