border和outline的区别
如果有一个需求，给一个元素增加一条边框，想必大家会习惯且娴熟的使用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的区别的更多相关文章
- CSS中border和outline的区别
border: border-width:1px; border-style:solid; border-color:#ccc; 可以简写为:border:1ox solid #ccc; outlin ...
- border和outline区别
border和outline区别: border支持box-sizing: border-box,当有边距时,是新增了边框后在按照以前的边距处理 outline不支持box-sizing: borde ...
- outline:0与outline:none区别
outline:0与outline:none的效果完全一样,用哪个都行,为了少写几个字,提倡用outline:0.具体区别如下: 出处: https://stackoverflow.com/quest ...
- 盒模型中padding、border、margin的区别
在CSS中,规定了一种基本设计模型——盒模型(也叫框模型),如图所示: 其中包含了四部分内容:element/元素(即图中文字).padding/内边框(图中两个红色边框之间白色部分).border/ ...
- border、outline、boxshadow那些事
border 边框是我们美化网页.增强样式最常用的手段之一.例如: <div class="text"></div> .text { width: 254p ...
- CSS中的margin、border和padding的区别
aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA
- CSS样式，雪碧，图片替换，渐变小析
Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数fon ...
- 小聊outline和border
border与outline: border属性: border-width.border-style.border-color 其中border-style可以为none或hidden outlin ...
- CSS中设置border:none和border:0的区别
在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一 ...
随机推荐
- 给 K8s API “做减法”：阿里巴巴云原生应用管理的挑战和实践
作者 | 孙健波(天元) 阿里巴巴技术专家本文整理自 11 月 21 日社群分享,每月 2 场高质量分享,点击加入社群. 早在 2011 年,阿里巴巴内部便开始了应用容器化,当时最开始是基于 LXC ...
- 使用pytorch时所遇到的问题总结
使用pytorch时所遇到的问题总结 1.ubuntu vscode切换虚拟环境 在ubuntu系统上,配置工作区文件夹所使用的虚拟环境.之前笔者误以为只需要在vscode内置的终端上将虚拟环境切换过 ...
- WPF MVVM,Prism,Command Binding
1.添加引用Microsoft.Practices.Prism.Mvvm.dll,Microsoft.Practices.Prism.SharedInterfaces.dll: 2.新建文件夹,Vie ...
- WPF中Button的背景图片，实现禁止IsMouseOver时显示默认
<Button x:Name="btnPickUpNum" Click="PickUpNum_OnClick" Grid.Row="1" ...
- sql server 查询出整数 （可灵活运用）
系统辅助用表,常用来获取数字,当然还有其他用途
- Z从壹开始前后端分离【 .NETCore2.1 +Vue 2 +AOP+DI】框架之一 || 前言
老张 .NetCore与Vue 框架学习目录
- webpack代码分离CommonsChunkPlugin插件的使用（防止重复）
1.webpack.config.js中添加: const path = require('path'); + const webpack = require('webpack'); const HT ...
- -force_load （加载静态库崩溃）
-force_load Crash Log: Last Exception Backtrace: 0 CoreFoundation 0x2f087f06 __e ...
- jQuery-File-Upload $(...).fileupload is not a function $.widget is not a function
使用 jQuery-File-Upload 库的时候碰到了 $(...).fileupload is not a function 和 $.widget is not a function 问题. ...
- 结对编程（Java实现）
一.Github项目地址:https://github.com/qiannai/CreateArithmetic 二.PSP2.1表格: PSP2.1 Personal Software Proces ...