美文网首页
css outline 和 border

css outline 和 border

作者: LilyLaw | 来源:发表于2019-10-08 10:33 被阅读0次

一般来说, outline和border在视觉效果上一样,但是outline 不占空间,border占据空间
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>outline 和 border</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin: 20px;
            background: lightgreen;
        }
        .box-outline{
            outline: 1px solid red;
        }
        .box-border{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box-outline">outline</div>
    <div class="box-border">border</div>
</body>
</html>

效果:

  • 给元素添加outline属性后,元素宽高不变,仍为100*100,所以outline不占据空间


    outline
  • 给元素添加border属性后,元素宽高均增加2border的宽度,为102102,所以border占据空间

    border

相关文章

  • css outline 和 border

    outline 官方解释如下:https://developer.mozilla.org/zh-CN/docs/W...

  • CSS border outline

    边框和轮廓 边框和轮廓是位于外边距内外的线框,有时候,设置边框和轮廓属性对于网页布局很有用,尤其是边框。 边框bo...

  • outline和border

    outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 只有在规定了 !do...

  • border和outline区别

    2019-03-02-14:52: 在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候...

  • outline与border

    1.outline属性: 2.outline与border对比:

  • CSS-笔记

    border与outline的区别 border 可应用于几乎所有有形的html元素,而 outline 是针对链...

  • 盒子大小、轮廓和阴影、浮动

    盒子大小(box-sizing属性) 轮廓(outline) outline的用法和border的用法类似 二者的...

  • outline 与 border

    定义和用法 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。(注意:轮...

  • outline & border

    outline CSS2出现,CSS3作了扩展,突出元素的作用 1.针对链接、表单控件和ImageMap等元素设计...

  • CSS阶段四:border,outline,padding,ma

    盒子模型 CSS中将每一个元素都设置为了一个矩形的盒子,是为了方便页面的布局。(一切皆为框) 基本构成:内容区,内...

网友评论

      本文标题:css outline 和 border

      本文链接:https://www.haomeiwen.com/subject/oekqectx.html