小米商城练习(鼠标移入阴影偏移 向上抬起 浮动清除),边框盒(怪异盒子,ie盒子),因为换行导致出现空格距离 怎么解决？

一.鼠标移入阴影偏移 向上抬起

.效果块i:hover{
            /* background-color: orangered; */
            box-shadow: 4px 4px rgb(234, 234, 234);
            transform: translate3d(0px,-2px,0px);
        }

二.浮动清除(万能清除法)

.父元素::after {
            content: '';
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

三.边框盒(怪异盒子,ie盒子)

/* 默认情况下，元素是一个内容盒content-box，设置宽和高，仅仅是内容区域的宽和高，
        不包含padding和border */
 /* box-sizing: border-box;设置盒子为边框盒（也称为ie盒子或怪异盒子），  宽高=内容区的宽高+padding+border */

四.因为换行导致出现空格距离怎么解决？
1、简单粗爆不换行

写代码的时候不要换行，input等在一行输写，那么将解决该问题。但是代码就变得不再那么容易好看。

2、设置父级块的字体大小为0

这样也能解决问题，代码也好看，但是当你设置了父级的字体大小为0时，你里面又要其它字体要显示，可能就得加span等标签去包裹它，并且重新设置字体大小。

3：设置margin-left为-3象素

使得该元素基于原来的位置向左偏移三个象素，也就看不出有空隙了。