CSS布局基础（十二）（紧邻盒子边框叠加变粗问题 && 文字环绕图片 && CSS初始化）

紧邻盒子边框叠加变粗问题

在实际开发中，碰到紧挨的盒子，如果此时都有边框的话，就会出现，边框变粗的情况，类似，表格边框 border-spacing: 0; 边框变粗
而不同的是，表格采用的是：border-collapse: collapse;，普通盒子不能使用这个属性
此时可以根据相应的排列方向，使用 合适的 margin 负值实现边框覆盖，而非叠加。
移动的元素会覆盖其他元素，因此，要显示出被覆盖那条边框时，需要给被覆盖盒子加上相对定位，因为定位的盒子会盖住其他盒子

div{
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid transparent;
    margin-left: -1px;
}
        
div:hover{
    border: 1px solid #25d366;
    position: relative;
    /*如果盒子本身就有定位，则需要设置较大的 z-index 来覆盖后面盒子的边框*/
    z-index:1; 
}

文字环绕图片

float （浮动）效果原本就是为了实现文字环绕图片而创建的规范；只是正好可以用来布局。
直接将图片和文字写在一个盒子里面，然后对图片进行相应方向的浮动即可实现文字环绕图片效果
记住：图片写在前面，如果图片在文字后面，那么是没有效果的，因为浮动只影响后面的元素，不影响前面的元素

CSS初始化

不同浏览器 对标签的默认值可能不一致，因此，在实际开发中，需要对默认样式进行统一设置。保证不同浏览器的表现一致
每个页面都要设置
以下参考

* {
    margin: 0;
    padding: 0
}

em, i {
    font-style: normal
}

li {
    list-style: none
}

img {
    border: 0;
    vertical-align: middle
}

button {
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button, input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
/*\5B8B\4F53 = 宋体， Unicode 编码，防止浏览器解析乱码 */
body {
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide, .none {
    display: none
}

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}