如果有一个需求，给一个元素增加一条边框，想必大家会习惯且娴熟的使用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. 黄聪：table自适应宽度和高度

    自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } 自 ...

  2. 【CF933E】A Preponderant Reunion（动态规划）

    [CF933E]A Preponderant Reunion(动态规划) 题面 CF 洛谷 题解 直接做很不好搞,我们把条件放宽,我们每次可以选择两个相邻的非零数让他们减少任意值,甚至可以减成负数(虽 ...

  3. 【随笔】CLR:向头对象（Object Header）迈进一大步！！！

    前言 在我之前一篇随笔里(戳我),我们知道,一个引用类型的对象,包含了2个额外的开销,一个是头对象(object header),一个是MT.我们接下来看看头对象到底有多神秘... Object He ...

  4. 学习Swoole需要掌握哪些基础知识

    多进程/多线程 了解Linux操作系统进程和线程的概念 了解Linux进程/线程切换调度的基本知识 了解进程间通信的基本知识,如管道.UnixSocket.消息队列.共享内存 SOCKET 了解SOC ...

  5. MySQL学习——查询表里的数据

    MySQL学习——查询表里的数据 摘要:本文主要学习了使用DQL语句查询表里数据的方法. 数据查询 语法 select [distinct] 列1 [as '别名1'], ..., 列n [as '别 ...

  6. JS中new操作符源码实现

    首先我们来看一下实例化一个对象做了浏览器做了什么事情 new的四步操作: 1. 创建一个空对象 2. 设置空对象的__proto__属性继承构造函数的prototype属性,也就是继承构造函数的原型对 ...

  7. Spring,SpringMvc,MyBatis用到的设计模式

    1.MyBatis: 首先看MyBatis执行流程: (1)首先,SqlSessionFactoryBuilder 去读取 mybatis 的配置文件,然后 build 一个 DefaultSqlSe ...

  8. CentOS添加用户，管理员权限

    原文链接:https://www.linuxidc.com/Linux/2012-03/55629.htm 1.添加普通用户 [root@server ~]# useradd admin        ...

  9. centos 7下配置阿里yum源

    1.打开centos的yum文件夹 cd /etc/yum.repos.d/ 2.用wget下载repo文件 wget http://mirrors.aliyun.com/repo/Centos-7. ...

  10. svn 在Windows下用TortoiseSVN checkout 时报认证错误

    TortoiseSVN 第一次 checkout(检出)时,需要输入用户名密码,如果第一次你保存了你的用户名密码,那么这个检出的项目以后就会用这个用户名密码,如果你的密码改了之后,就会报一个认证错误的 ...