2021.5.20 css学习-常见布局技巧

布局技巧

 1.一行多个盒子  没有间距，有边框的话，会重叠 如图：边框变为2倍，10px

解决办法：     margin-left: -5px;这里是配置成负的边框的长度。结果如图：如果下面也有类似的，同理。可以加上 margin-bottom：-5px

2.边框重叠时，如果想加上滑动上去的样式，会出现这种情况，原因也是重叠了

解决办法，1.给此元素加上相对定位，原因是定位可以覆盖住标准流等元素，使用相对定位的原因：需要保留位置。

2.有时候，元素已经有了相对定位，这种情况提高层级即可。z-index：1

2.文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性，要记得浮动元素的产生就是为了让文字环绕。

所以做这种图片和文字结合的图，只让图片浮动即可，文字不用浮动，不会被覆盖的。

3.css三角强化--直角三角形

之前都是等边三角形，同理 只要把上边框调大  撑开高度，右边框调小 ，只把右边保留颜色即可。下图为方式

可以简写为：