CSS常见布局技巧

1.margin负值技巧
负值margin可以让盒子向反方向移动。
当我们添加两个浮动并列的盒子时，原来为1px的边框会叠加起来变成2px的边框如图。这时我们可以使用margin的负值技巧。

将第二个盒子加上margin-left:-1px

边框重叠，这时就会为1px。
如果使用完上面那个方法后，再使用hover使鼠标移到盒子时边框变色的技巧，会导致后面的那个盒子边框会覆盖掉变色盒子的边框。这时我们可以通过同时更改z-index属性来使盒子边框不会被后面的盒子边框覆盖（注意：要使用定位z-index才会生效！）。

2.文字围绕浮动元素
浮动元素不会覆盖文字。

我们设计如上图的布局时可以使用浮动来制作，为图片增加float:left。

3.css三角强化
其实就是利用边框的特性来进行布局。
当容器未指定高度宽度时，容器的大小取决于盒子里面的内容，如果我们只为容器设置边框，那么容器只会显示边框。
如图：

CSS样式

        .triangle {
            border-top: 50px white solid;
            border-bottom: 50px black solid;
            border-right: 50px green solid;
            border-left: 50px red solid;
        }

html
<div class="triangle"></div>
使用的是一个块级元素，里面的边框都为50px。
根据元素的是否为块级元素或者行内元素，边框有无，边框宽度，边框颜色等等，可以有着不同的样式。
等等。。。