border标签造成的不良后果

最新推荐文章于 2024-12-11 11:59:04 发布

原创最新推荐文章于 2024-12-11 11:59:04 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#border

DIV+CSS 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了CSS中border与outline属性的区别及应用场景。border会影响元素及其周围元素的布局，而outline只影响外观不影响布局。文章通过实例展示了两种属性在不同情况下的表现，并提供了使用建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

border属性会影响本标签内部内容定位以及该标签外部内容的定位，而outline不会，outline属性只会参与重新绘制边框样式不涉及标签的定位。

如下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>border标签的不良影响</title>
    <style>
        #frm{
            border: 2px solid red;
            float: left;
        }
        #frm *{
            margin:2px;
            font-family: "宋体";
            font-size: 16px;
        }
        #frm .label{
            border: 1px solid #00f;
            float: left;
        }
        #frm .text{
            border: 1px solid #735444;
            float: left;
        }
        #frm .label:hover{
            border: 4px solid #f00;
        }
        #frm .f2{
            float: left;
            clear: both;
        }
    </style>
</head>
<body>
<div id="frm">
    <div class="f2">
        <span class="label">Label1</span>
        <div class="text">Text Area1</div>
    </div>
    <div class="f2">
        <span class="label">Label2</span>
        <div class="text">Text Area2</div>
    </div>
    <div class="f2">
        <span class="label">Label3</span>
        <div class="text">Text Area3</div>
    </div>
    <div class="f2">
        <span class="label">Label4</span>
        <div class="text">Text Area4</div>
    </div>
</div>
</body>
</html>

正常情况下：
效果图

border变化后的错位：、

为了解决上述的错位问题，可以使用outline进行设置，outline是在border所形成的边框的外面再套一层边框。outline用法同border。

修改后代码：

<style>
    #frm{
        outline: 2px solid red;
        float: left;
    }
    #frm *{
        margin:2px;
        font-family: "宋体";
        font-size: 16px;
    }
    #frm .label{
        outline: 1px solid #00f;
        float: left;
    }
    #frm .text{
        outline: 1px solid #735444;
        float: left;
    }
    #frm .label:hover{
        outline:  4px solid #f00;
    }
    #frm .f2{
        float: left;
        clear: both;
    }
</style>

使用outline属性后：

通过比较使用border和outline的效果图可以看到，使用border属性时，class属性为label标签以及class属性为text的标签之间边框的距离比使用outline属性后要变宽。因为margin属性是从border所设置的边框外面第一个像素算起的，使用outline属性时没有设置border，则border的边框宽度为0，即两个标签之间的间距在没有使用border标签的时候，比使用了border标签的时候少了2px。
虽然outline属性效果很好，但不是所有的浏览器都支持，如IE6.0以下的浏览器就不支持这一属性的设置。
另外也不可使用outline来设置圆角效果，所以，如果想使用border属性而又不想使用其他标签定位出错，可以同时设置margin属性。
下面代码是结合了margin和border属性同时设置，该程序在border变化的情况下，配合margin属性的设置来达到标签位置固定的效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>border标签的不良影响</title>
    <style>
        #frm{
            /*outline: 2px solid red;*/
            border: 2px solid red;
            float: left;
        }
        #frm *{
            margin:4px;
            font-family: "宋体";
            font-size: 16px;
        }
        #frm .label{
            border: 1px solid #00f;
            /*outline: 1px solid #00f;*/
            float: left;
            border-radius: 4px;
        }
        #frm .text{
            border: 1px solid #735444;
            /*outline: 1px solid #735444;*/
            float: left;
        }
        #frm .label:hover{
            border: 4px solid #f00;
            margin:1px;
            /*outline:  4px solid #f00;*/
        }
        #frm .f2{
            float: left;
            clear: both;
        }
    </style>
</head>
<body>
<div id="frm">
    <div class="f2">
        <span class="label">Label1</span>
        <div class="text">Text Area1</div>
    </div>
    <div class="f2">
        <span class="label">Label2</span>
        <div class="text">Text Area2</div>
    </div>
    <div class="f2">
        <span class="label">Label3</span>
        <div class="text">Text Area3</div>
    </div>
    <div class="f2">
        <span class="label">Label4</span>
        <div class="text">Text Area4</div>
    </div>
</div>
</body>
</html>

border加margin重新设置：
效果图