css3 盒模型与 伪元素综合应用案例

先来简略理解下盒模型：

在 css3 之前，盒模型默认为 box-sizing : content-box，这种模式下的盒模型计算大小方式为，width + padding + border ；

而 css3 中的盒模型为 box-sizing : border-box，比如，我们定义一个宽高为 300 的盒子，padding 为 20，border 为 10，

当我们添加box-sizing : border-box 后，这个盒子的实际大小还是 300 x 300，并不计算 padding 和 border，变化的是实际内容的大小。

 

再来说说 伪元素：

我们先来看一种写法：

div:hover::before{} /* 表示当 div hover 时，在当前 div 前面添加 */
div:hover::after{} /* 表示当 div hover 时，在当前 div 后面添加 */

这里直接说结论，其实，伪元素 就是一个行内元素，我们完全可以把它们看成是一个行内元素的盒子，使用伪元素必须添加 content : ' ' 属性。

下面，我们通过一个例子，来综合应用下盒模型与伪元素：

现在，我们有一个需求是这样的：当鼠标悬浮在图片上时，盒子大小本身不变化，图片上显示一个圆角的带有透明度的边框。

我们的第一反应自然是 使用 hover 来实现

第一种方案：

  div {
          width: 790px;
          height: 340px;
          margin: 100px auto;
      }

  div:hover {
          border: 10px solid rgba(255, 164, 168, 0.9);
     }

这种方法并不能实现我们的需求，盒子会被撑大，并且，border 并没有显示在图片上，而是环绕在图片四周，那，我们添加 box-sizing : border-box 呢？显然也是不行的。

第二种方案：

  div {
            width: 790px;
            height: 340px;
            margin: 100px auto;
            box-sizing: border-box;
            overflow: hidden;
        }

        div img {
            width: 100%;
            height: 100%;
        }

        div:hover {
            border: 10px solid rgba(255, 164, 168, 0.9);
        }

我们将 img 的宽高设置为 100%，这种方法同样无法实现边框压在图片上的效果，会产生图片向小缩放的效果。

正确的方案：

      div {
            width: 790px;
            height: 340px;
            margin: 100px auto;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }

        div:hover::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width:100%;
            height:100%;
            border:10px solid rgba(255,189,200,.5);
            box-sizing: border-box;
        }

要实现边框压在图片上的效果，必须使用定位，上面我们说过，伪元素本身就是一个行内盒子，使用定位后，就可以随意设置大小，将伪元素定位到与父盒子相同的位置，且有相同的大小，此时再添加 box-sizing : border-box 保证div大小不变，即实现了我们上面所说的需求。

 

这里对于盒模型及伪元素的介绍并不全面，只是粗略的一带而过，如有不懂的读者，建议先搞清楚这两者，弄懂后，再来看本文案例，就会一目了然了。

 

以上，就是本文的全部内容~~~