如果有一个需求，给一个元素增加一条边框，想必大家会习惯且娴熟的使用border来实现，我也是这样

　  但其实outline也能达到同样的效果，并且在有些场景下会更适用，比如下面的demo

　　

　　使用border后，div宽度增加，导致超出父元素

     

　　使用outline后，div元素宽度不会改变

　　

　　DEMO

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .main {

                width: 1200px;

            }

            .inner {

                margin: 0 5px;

                width: 390px;

                height: 300px;

                float: left;

                border: 1px solid blue;

                /*outline: solid 1px blue;*/

            }

        </style>

    </head>

    <body>

        <div class="main">

            <div class="inner"></div>

            <div class="inner"></div>

            <div class="inner"></div>

        </div>

    </body>

</html>

　　那么到底border和outline到底有什么区别呢？

　　　　outline是不占空间的，即不会增加额外的宽度（width）或高度（height）

　　　这也涉及到了盒子模型的知识，之前写过一篇博客：https://www.cnblogs.com/tu-0718/p/7443995.html

border和outline的区别的更多相关文章

  1. CSS中border和outline的区别

    border: border-width:1px; border-style:solid; border-color:#ccc; 可以简写为:border:1ox solid #ccc; outlin ...

  2. border和outline区别

    border和outline区别: border支持box-sizing: border-box,当有边距时,是新增了边框后在按照以前的边距处理 outline不支持box-sizing: borde ...

  3. outline:0与outline:none区别

    outline:0与outline:none的效果完全一样,用哪个都行,为了少写几个字,提倡用outline:0.具体区别如下: 出处: https://stackoverflow.com/quest ...

  4. 盒模型中padding、border、margin的区别

    在CSS中,规定了一种基本设计模型——盒模型(也叫框模型),如图所示: 其中包含了四部分内容:element/元素(即图中文字).padding/内边框(图中两个红色边框之间白色部分).border/ ...

  5. border、outline、boxshadow那些事

    border 边框是我们美化网页.增强样式最常用的手段之一.例如: <div class="text"></div> .text { width: 254p ...

  6. CSS中的margin、border和padding的区别

    aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA

  7. CSS样式，雪碧，图片替换，渐变小析

    Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数fon ...

  8. 小聊outline和border

    border与outline: border属性: border-width.border-style.border-color 其中border-style可以为none或hidden outlin ...

  9. CSS中设置border:none和border:0的区别

    在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一 ...

随机推荐

  1. 解决SVN 被锁且Cleanup无效问题

    开发两年多,依然用svn做代码管理工具,看到隔壁java组用git,心向往之,奈何苦苦不得机会,既然用svn,那么就说一说svn碰到的问题如何解决吧. 有时候我们在提交,或者更新代码时,由于网络或其他 ...

  2. keras对图像数据进行增强 | keras data augmentation

    本文首发于个人博客https://kezunlin.me/post/8db507ff/,欢迎阅读最新内容! keras data augmentation Guide code # import th ...

  3. jsp页面科学计数法显示问题的解决办法

    在JSP页面中返回的double类型的数值,如果数值过大,就会被显示成科学计数法. 这个问题通常出现在表单填写的input中,因此是必须要解决的问题. JSTL提供了标准的数值格式化标签,使用上非常简 ...

  4. WPF 使用EventTrigger时设置SouceName技巧

    使用情节触发器时,如果有触发源/触发源控件时可以将情节触发器放置最顶级的面板控件的触发器中. 通过blend这个神器真的是可以学到不少东西. 代码: //情节动画放置于顶级控制面板 <Widno ...

  5. 湖南省web应用软件（中慧杯）

    湖南省web应用软件 写这篇博客已经是比完赛的第四天了,我还记得那天下着小雨.我们早早的到了比赛的现场抽检机器,在比赛前一天我很是激动.我还记得我们从学校,去株洲的时候我们的领导来给我加油,特别是我的 ...

  6. Java生鲜电商平台-微服务架构概述

    Java生鲜电商平台-微服务架构概述 单体架构存在的问题 在传统的软件技术架构系统中,基本上将业务功能集中在单一应用内,或者是单一进程中.尽管现代化的软件架构理论以及设计原则已推广多年,但实际技术衍化 ...

  7. jQuery的选择器总结

    jQuery的选择器 不会返回undefined或null 基本选择器 id选择器:$('#id') element选择器:$('elem') class选择器:$('.class') 通配符选择器: ...

  8. Redis Python（一）

    Infi-chu: http://www.cnblogs.com/Infi-chu/ NoSQL(NoSQL=Not Only SQL),中文意思是非关系型数据库. 随着互联网Web2.0网站的兴起, ...

  9. MYSQL 复制整个数据库

    同一个服务器 mysqldump old -u root -p123456  | mysql new -u root -p123456 不同服务器(在源数据库服务器上执行) mysqldump old ...

  10. Python的包package的导入与被导入（包的类和方法的导入，__init__()怎么写）

    包package的导入与被导入: 参考一下: https://blog.csdn.net/guowujun321/article/details/80764468 1.文件目录: | |--  A/ ...