CSS中边框和轮廓属性的区别是什么?
如果没有区别,为什么同一事物有两种性质?
CSS中边框和轮廓属性的区别是什么?
如果没有区别,为什么同一事物有两种性质?
当前回答
来自:http://webdesign.about.com/od/advancedcss/a/outline_style.htm
CSS outline属性是一个令人困惑的属性。当你第一次了解它时,你很难理解它与边境财产有什么不同。W3C将其解释为以下区别: 大纲不占用空间。 轮廓可以是非矩形的。
其他回答
think about outline as a border that a projector draw outside something as a border is an actual object around that thing. a projection can easily overlap but border don't let you pass. some times when i use grid+%width, border will change the scaling on view port,for example a div with width:100% in a parent with width:100px fills the parent completely, but when i add border:solid 5px to div it make the div smaller to make space for border(although it's rare and work-aroundable!) but with outline it doesn't have this problem as outline is more virtual :D it's just a line outside the element but the problem is if you don't do spacing properly it would overlap with other contents.
简而言之: 优点:轮廓 它不会打乱间距和位置 缺点: 重叠几率高
我做了一小段css/html代码,只是为了看看两者之间的区别。
Outline最好包含可能溢出的子元素,特别是在内联容器中。
Border更适合于块行为元素。
为您演奏,先生!
谷歌web.dev对盒子模型有一个很好的解释。
边框框围绕填充框,其空间由边框值占用。边界框是方框的边界,边界边缘是视觉上可以看到的范围。border属性用于可视化地为元素设置框架。
边距框,是你的方框周围的空间,由方框的边距规则定义。轮廓和框影等属性也占用了这个空间,因为它们被绘制在顶部,所以它们不会影响框的大小。你可以在我们的盒子上设置一个200px的轮廓宽度,包括边框在内的所有东西都将是完全相同的大小。
大纲的实际应用涉及透明度。如果你有一个带有背景的父元素,但是想让子元素的边框透明,这样父元素的背景就能显示出来,你必须使用“outline”而不是“border”。虽然边框可以是透明的,但它将显示子元素的背景,而不是父元素的背景。
换句话说,这种设置产生了以下效果:
outline: 7px solid rgba(255, 255, 255, 0.2);
摘自W3Schools:
定义和用法 轮廓是画出来的一条线 在元素周围(边界之外) 让元素“脱颖而出”。