浮动框重叠问题/京东三角案例/浮动跟行内块元素的区别/margin负值的用处/

最新推荐文章于 2023-03-22 18:29:33 发布

喵帕斯_喵太

最新推荐文章于 2023-03-22 18:29:33 发布

阅读量240

点赞数

分类专栏：前端基础文章标签： css html

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/115185307

版权

前端基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

浮动后加外边框元素边框重叠问题

在这里插入图片描述
如图所示，当相同的拥有外边框的元素浮动后会产生外边框重叠的问题。
解决方法如下：

margin-left: -1px;在浮动的外边框元素加入margin负值。

在这里插入图片描述

浮动元素加入hover后边框显示不全问题

在这里插入图片描述

如图上所示。
解决方法如下：

<style>
       
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
/给父级元素相对定位后，再给子集元素绝对定位，并给权重z-index: 1//
        li:hover {
            position: relative;
            border: 1px solid blue;
            z-index: 1;
        }

在这里插入图片描述

京东直角三角行做法

在这里插入图片描述
我们优先要知道直角三角形的做法：

    <style>
        div {
            border-color: transparent red transparent transparent;
            border-width: 100px 50px 0 0;
            border-style: solid;
        }
    </style>
</head>

<body>

    <div></div>

</body>

</html>

效果图如下
在这里插入图片描述
做成京东效果代码图如下

    <style>
        .box {
            width: 202px;
            height: 30px;
            border: 1px solid red;
        }

        .box-a {
            float: left;
            width: 101px;
            height: 30px;
            background-color: red;
        }

        .box-b {

            position: relative;
            float: left;
            width: 101px;
            height: 30px;
            background-color: #fff;
        }

        .box-a span {
            font-weight: 700;
            font-size: 20px;
            color: #fff;
        }

        .box-b span {
            margin-left: 35px;
            font-weight: 300;
            font-size: 12px;
            color: silver;
            text-decoration: line-through;
            line-height: 30px;
        }

        .box-b i {
            position: absolute;
            top: 0;
            left: -10px;
            border-color: transparent #fff transparent transparent;
            border-width: 30px 10px 0 0;
            border-style: solid;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-a">
            <span>5799.00</span>
        </div>
        <div class="box-b">
            <span>7599</span>
            <i></i>
        </div>
    </div>
</body>

</html>

效果图如下
在这里插入图片描述
三角在所指位置。

普通三角形做法

如图所示
在这里插入图片描述
代码如下

    <style>
        div {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom-color: red;
        }

        h1 {
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-top-color: pink;
            border-left-color: red;
            border-right-color: #000;
            border-bottom-color: green;
            margin-top: 60px;
        }
    </style>
</head>

<body>
    <div></div>
    <h1></h1>
</body>

</html>