（学习笔记）css---常见布局技巧

1、margin负值

默认情况下，边框之间叠加会边粗，如图：

如何让边框统一，叠加后不会变粗，效果如图：

代码：

第1个li执行完代码，第2个li接着执行代码，是先浮动，浮动后没有了缝隙，让后执行margin-left:-1px;的代码，就可以了。

 

鼠标经过当前盒子就会变样式问题

效果：鼠标经过后，边框变成蓝色

代码：

 

2、文字围绕浮动元素

典型效果：

一般我们的思路是，一个大盒子包括图片盒子和文字盒子，左右浮动来实现的，但是遇到文字围绕其他类型的浮动元素则有更简单的办法。

例子：

 

最后效果：

3、三角性布局

需要实现这样的效果：

原理：中间是用三角形来拼起来的。

这个直角三角形代码：

原理是跟之前写等腰三角形是一样的，但是需要调整四个边的值和颜色。

简化后的关于边的代码：

然后去定位就可以了。