博学谷前端 CSS 常用技巧及CSS 常见bug

最新推荐文章于 2025-06-12 16:46:09 发布

云松编程

最新推荐文章于 2025-06-12 16:46:09 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 前端web 文章标签： css 前端

本文链接：https://blog.csdn.net/a454211787/article/details/121396931

前端web 同时被 2 个专栏收录

18 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

本文介绍了CSS中的一些实用技巧，如使用负margin实现元素重叠、创建自定义图标及优化logo等，并针对IE6等浏览器中的常见CSS Bug提供了有效的解决方案。

1.CSS 常用技巧

1.1 margin 负值

制作网页时，为了拉开元素之间的距离，常常给元素设置大于0的外边距margin。其实，在实际工作中，为了实现一些特殊的效果，经常需要将元素的margin设置为负值，如下图所示的元素重叠效果。

注意技巧：

1.定位的盒子层级高于浮动和标准流。

2.提高定位盒子的层级用 z-index。

1.2 css三角的写法

易迅、网易三角的做法：

京东三角的做法：

综合做法：

在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
    div {
        width: 0;     
        height: 0;
        margin: 100px auto;
        border-width: 10px;    /* 数值控制三角大小 */
        border-color: #f00 transparent transparent transparent;   /* 上 右  下 左 模式 */
         /* transparent透明  背景颜色默认也是透明的 */
        border-style: solid dashed dashed dashed;  /* dashed 是为了照顾ie6 灰色底的问题 */
        overflow: hidden;  /* ie6 高度问题 */
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>