- outline 官方解释如下:https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline
- border 官方解释如下:https://developer.mozilla.org/zh-CN/docs/Web/CSS/border
一般来说, outline和border在视觉效果上一样,但是outline 不占空间,border占据空间
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>outline 和 border</title>
<style>
div{
width: 100px;
height: 100px;
margin: 20px;
background: lightgreen;
}
.box-outline{
outline: 1px solid red;
}
.box-border{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box-outline">outline</div>
<div class="box-border">border</div>
</body>
</html>
效果:
-
给元素添加outline属性后,元素宽高不变,仍为100*100,所以outline不占据空间
outline
-
给元素添加border属性后,元素宽高均增加2border的宽度,为102102,所以border占据空间
border
网友评论