html5 + css 学习小结

我最喜欢的一段话是这么说的，我们今天的生活由昨天的选择决定的，我们今天的选择决定我们明天的生活。所以，少年，为了明天的生活，奋斗吧！
这是最近写静态页面遇到的一些问题以及解决方法。
1.div 的hover显示边框图片会向右下方移动的问题
现在的网页上经常会需要把鼠标移动到图片上图片显示边框的效果，但是因为标准盒模型下div的margin，border,padding,content是向外渲染的，所以当鼠标移动到图片上方时，想要在本来没有边框的图片上显示边框，很正常的就会出现边框显示后图片被挤下来了。要解决这个问题可以有两种方法。
第一种方法是对图片一开始便设置一个与背景颜色相同的边框，这样在hover效果的时候，只需要改变图片的颜色即可。这样用户在使用的时候就不会感觉突兀，不舒服了。

<style>
        .div1{
            width: 100px;
            height: 100px;
            border: 1px solid #ffffff;
        }
        .div1:hover{
            border: 1px solid greenyellow;
        }
    </style>

第二种方法就是在第一个放至图片的div上方再放置一个div2，div2的大小设置为第一个div不加边框的宽度，并利用position将第二个div的z-index设置为2，给第二个div设置一个hover效果，这样用户在将鼠标移动到图片上时，div2就会显示边框，但因为div2加上边框之后的宽度正好等于第一个div，就会看起来正好是边框压在了第一个div上，用户体验就会看起来比较舒服。

.div1{
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .div2{
            width: 98px;
            height: 98px;
            z-index:2;
            top:0;
            left: 0;
        }
        .div2:hover{
            border: 1px solid greenyellow;
        }