如果有一个需求，给一个元素增加一条边框，想必大家会习惯且娴熟的使用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. 2019年9月Github上最热门的JavaScript开源项目

      2019年9月Github上最热门的JavaScript开源项目 前端开发 前端开发 微信号 qianduan1024 功能介绍 专注于Web前端技术文章分享,包含JavaScript.HTML5 ...

  2. 使用Redis实现最近N条数据的决策

    前言 很多时候,我们会根据用户最近一段时间的行为,做出一些相应的策略,从而改变系统的运动轨迹. 举个简单的例子来说明一下: 假设A公司现在有两个合作伙伴(B和C),B和C都是提供天气数据的,现在A公司 ...

  3. 利用zabbix监控ogg进程(Windows平台下)

    本文给大家介绍如何监控windows平台下的ogg程序.(注:所有操作都在administrator用户下面进行操作) 监控linux平台下的ogg程序请看:https://www.cnblogs.c ...

  4. 配置文件_自定义section标签获取数据

    前言:为了节约时间,先只粘贴关键代码: 1-添加section标签,name为自定义标签名称,type为:命名空间+类型,程序集名称 <section name="watchModel ...

  5. PlayJava Day008

    今日所学: /* 2019.08.19开始学习,此为补档. */ 1.包装类:对基本数据类型进行封装,使其具有属性和方法. Integer s1 = new Integer(123) ; Intege ...

  6. C++ message queue 消息队列入门

    说明:当我们有多个线程以不同的速度运行并且我们想要以特定的顺序从一个线程向另一个线程发送信息时,消息队列可能会有用. 这个想法是,发送线程将消息推送到队列中,而接收线程将消息按自己的步调弹出. 只要发 ...

  7. 【转载】Gradle for Android 第五篇( 多模块构建 )

    Android studio不仅允许你为你的app和依赖库创建模块,同时也可为Android wear,Android TV,Google App Engine等创建模块,而这些单独的模块又可以在一个 ...

  8. git设置github的远程仓库的相关操作

        git能够把github作为远程仓库,本地可以进行推送有关变更,从而多人可以进行协作开发工作.    1  ssh-keygen -t rsa -C "your-email@163. ...

  9. Docker安装并运行mysql5.6数据库

    1.在/home目录下新建mysql目录 mysql目录中新建三个目录:conf目录.logs目录.data目录,建这些目录的目的是用来挂载docker中的mysql下的目录的. 结果如下: 1.1. ...

  10. CodeForces - 1244D （思维+暴力）

    题意 https://vjudge.net/problem/CodeForces-1244D 有一棵树,有3种颜色,第i个节点染成第j种颜色的代价是c(i,j),现在要你求出一种染色方案,使得总代价最 ...