如果有一个需求，给一个元素增加一条边框，想必大家会习惯且娴熟的使用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. 使用HTMLTestRunner模块更优美地展示接口测试报告

    优化版本的HTMLTestRunner模块,从我的百度网盘获取: 链接:https://pan.baidu.com/s/1f8eLpX5qBrpJsVlXKjquRQ 提取码:qqlu 测试报告展示: ...

  2. Promise如何解决回调地狱

    为什么要有promise:解决(回调地狱)的问题 ### 回调地狱: ```js //跟以前的if条件地狱很像 // if(){ // if(){ // if(){ // } // } //} $.g ...

  3. Chapter 2 ：重构的原则

    1,什么是重构? 在不改变软件可观察行为的前提下,使用一些重构的手法,提高代码可读性. 换句话说,在保持软件可用的前提下,修改代码使得更加容易被理解. 2,为什么重构? 为了后续的代码维护和修改,易读 ...

  4. PVANET: Deep but Lightweight Neural Networks for Real-time Object Detection

    URL: https://arxiv.org/abs/1608.08021 year: 2016 TL;DR PVANet 一个轻量级多物体目标检测架构, 遵循 "less channels ...

  5. antV G2 为柱状图添加背景颜色

    工作中需要在基础柱状图的基础上添加一个自定义高度的背景颜色, 基础柱状图: 目标柱状图: 由于chart绘图可以重叠,通过该特性,我们可以在画两次图重叠在一起,第一次绘图描述背景,第二次绘图描述数据, ...

  6. Razor_06 列表的查询

    Razor_06 列表的查询 列表的查询 同步/AJAX 查询 分局部视图[强类型] system.text.Json  Ajax 返回 Json 数据 , System.Text.Json .循环引 ...

  7. Spring Boot 之异步执行方法

    前言: 最近的时候遇到一个需求,就是当服务器接到请求并不需要任务执行完成才返回结果,可以立即返回结果,让任务异步的去执行.开始考虑是直接启一个新的线程去执行任务或者把任务提交到一个线程池去执行,这两种 ...

  8. 关于Spring Boot你不得不知道的事--Spring Boot的基本操作

    1 Pom文件 1.1 spring-boot-starter-parent 表示当前pom文件从spring-boot-starter-parent继承下来,在spring-boot-starter ...

  9. CSS基本选择器是什么？基本选择器是如何工作

    基本选择器介绍 基本选择器又分为六种使用方式:如.通用选择器.标签选择器.类选择器.Id选择器.结合元素选择器.多类选择器. 基本选择器使用说明表. 选择器 语法格式 含义 举例 通用选择器 *{属性 ...

  10. Meterpreter初探

    Meterpreter Meterpreter号称"黑客瑞士军刀",Meterpreter是Metasploit框架中的一个杀手锏,通常作为漏洞溢出后的攻击载荷使用,攻击载荷在触发 ...