CSS中边框和轮廓属性的区别是什么?
如果没有区别,为什么同一事物有两种性质?
CSS中边框和轮廓属性的区别是什么?
如果没有区别,为什么同一事物有两种性质?
当前回答
Border是在元素内部创建的,而outline是在元素外部创建的。因此,border与元素的宽度和高度一起计算,而outline绘制在元素外部。
其他回答
这是一个有点老的问题,但值得一提的是Firefox渲染错误(直到1月13日仍然存在),即大纲将在所有子元素的外部渲染,即使它们溢出了父元素(通过负边距,框阴影等)。
你可以用以下方法解决这个问题:
.container {
position: relative;
}
.container:before {
content: '';
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: 1px solid #ff0000;
}
非常不幸的是,它仍然没有修复。在许多情况下,我更喜欢轮廓,因为它们不会增加元素的尺寸,从而使您在设置元素尺寸时不必总是考虑边界宽度。
毕竟,哪个更简单?
.container {
width: 960px;
height: 300px;
outline: 3px solid black;
}
Or:
.container {
width: 954px;
height: 294px;
border: 3px solid black;
}
同样值得注意的是,W3C的大纲是IE的边界,因为IE没有实现W3C的盒子模型。
在w3c box模型中,边框与元素的宽度和高度无关。在IE中,它是包容性的。
摘自W3Schools:
定义和用法 轮廓是画出来的一条线 在元素周围(边界之外) 让元素“脱颖而出”。
来自:http://webdesign.about.com/od/advancedcss/a/outline_style.htm
CSS outline属性是一个令人困惑的属性。当你第一次了解它时,你很难理解它与边境财产有什么不同。W3C将其解释为以下区别: 大纲不占用空间。 轮廓可以是非矩形的。
谷歌web.dev对盒子模型有一个很好的解释。
边框框围绕填充框,其空间由边框值占用。边界框是方框的边界,边界边缘是视觉上可以看到的范围。border属性用于可视化地为元素设置框架。
边距框,是你的方框周围的空间,由方框的边距规则定义。轮廓和框影等属性也占用了这个空间,因为它们被绘制在顶部,所以它们不会影响框的大小。你可以在我们的盒子上设置一个200px的轮廓宽度,包括边框在内的所有东西都将是完全相同的大小。