如果有一个需求，给一个元素增加一条边框，想必大家会习惯且娴熟的使用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. 数据防泄漏 | 禁止PrintScreen键

    在数据防泄漏软件,通常会禁止 PrintScreen 键,防止通过截屏来将数据保存为图片而导致泄密. 这类软件如果想要实现是比较简单的,但是想要将功能做的强大些,还是需要下功夫的.以前使用过一款数据防 ...

  2. 知识图谱辅助金融领域NLP任务

    从人工智能学科诞生之初起,自然语言处理(NLP)就是人工智能核心的研究问题之一.NLP的重要性是毋庸置疑的,它能够实现以自然语言交流为特征的高级人机交互,使机器能“阅读”所有以文字形式记录的人类知识, ...

  3. zabbix 监控项报"Value "(No info could be read for "-p": geteuid()=1002 but you should be root"

    zabbix 监控项报错如下: “Value "(No info could be read for "-p": geteuid()=1002 but you shoul ...

  4. 使用Vuejs 开发chrome 插件的注意事项

    chrome 插件的开发其实并不难,web开发者可以使用 html, css, javascript 轻松的开发实用的 chrome 插件. 一个好的 chrome 插件可以提高我们的开发效率,甚至方 ...

  5. MySQL for OPS 09：MHA + Atlas 实现读写分离高可用

    写在前面的话 前面做了 MHA 高可用,但是存在这样一个问题,我们花了 4 台机器,但是最终被利用起来的也就一台,主库.这样硬件利用率才 25%,这意味着除非发生故障,不然其他几台机器都是摆设.明显的 ...

  6. MySQL UNION 查询

    UNION 用来合并多个 SELECT 结果. 考察如下两个表: # t1 +----+---------+ | id | pattern | +----+---------+ | 1 | Divot ...

  7. python基础(2):python的安装、第一个python程序

    1. 第一个python程序 1.1 python的安装 自己百度,这是自学最基本的,安装一路确定即可,记得path下打钩. 1.2 python的编写 python程序有两种编写方式: 1.进入cm ...

  8. Typescript基础(4)——接口

    前言 今天继续typescript的学习,开始ts接口部分的学习. 接口 接口的理解 首先,我们谈论一下现实生活中的接口.比如生活中常用的插座接口,有些插头是三孔插座的,有些是两孔插座的.插座接口规定 ...

  9. 六个office免费学习的精品教程 office自学教程让你从小白到高手

    今天给大家分享六个免费学习的精品教程,包括了word,ppt,excel常用的办公三剑客,学会这三个让你办公无忧,也能让你靠这些技术找到一份好工作,这些office自学教程让你从小白到高手. 一.PP ...

  10. iOS中WebSocket的使用

    https://github.com/square/SocketRocket 简单使用如下 1.初始化socket _webSocket = [[SRWebSocket alloc] initWith ...