我应该使用“边界:无”还是“边界:0”?

CSS

斯丁乐

2020-03-17

两种方法中的哪一种符合W3C标准?它们在浏览器中的表现均符合预期吗?

边界:无;
边界:0;

第1944篇《我应该使用“边界:无”还是“边界:0”?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
斯丁ProJinJin 2020.03.17

虽然结果很可能是相同的(无边界),但0和技术上都没有解决不同的问题。

0表示边框宽度,没有一个表示边框样式。显然,宽度为0的边框不存在,因此将没有样式。

但是,如果稍后要在样式表中覆盖此功能,则自然会专门解决其中一个问题。如果我现在想要一个3px的边框,那将是直接覆盖border:关于宽度的0。如果我现在想要一个虚线边框,那将是直接覆盖边框:样式方面都没有。

西门猿阿飞 2020.03.17

就我而言,

border:none 正在工作,但无效的w3c标准

这样更好,我们可以使用 border:0;

前端猴子 2020.03.17

我们应该使用BORDER 0

根据我的意见和经验,我建议您使用Border:0; 有一个有效的很好的理由,因为每当我们使用border时:无,我理解它可以工作,但考虑一下我们使用的是border,1px,2px,3px等。我的意思是我们给边框赋予的值是... px / em / rem对,所以我们需要使用border:0; 用于删除边框值,因为我们知道使用背景时:这意味着我们正在删除背景,而不是其他值。

谢谢

村村路易 2020.03.17

用CSS删除边框的最简单方法

border: 0;
Near小哥神奇 2020.03.17

他们是等价的效果指向不同的快捷方式

border: 0;
//short for..
border-width: 0;

和另一个..

border: none;
//short for...
border-style: none;

两者都可以,只要选择一个然后就可以了:)

樱蛋蛋 2020.03.17

您可以根据Oli提供的规范简单地使用两者。

我总是用border:0 none;

尽管单独指定它们没有什么害处,但是如果您确实使用旧版CSS1属性调用,则某些浏览器会更快地解析CSS。

尽管border:0;通常将边框样式默认设置为默认样式none,但是我注意到一些浏览器会强制使用其默认边框样式,这可能会被奇怪地覆盖border:0;

西门前端 2020.03.17

使用

border: none;

在某些版本的IE中不起作用。IE9很好,但是在以前的版本中,即使样式为“ none”,它也会显示边框。使用打印样式表时,我不想在输入框上使用边框,因此会遇到这种情况。

border: 0;

似乎在所有浏览器中都能正常工作。

米亚Eva 2020.03.17

正如其他人所说,两者都是有效的,并且会成功的。我不是100%确信它们是相同的。如果您正在进行某种样式层叠,那么它们在理论上可能会产生不同的结果,因为它们有效地覆盖了不同的值。

例如。如果设置为“ border:无;” 然后具有两种不同的样式来覆盖边框的宽度和样式,然后一种会做某事,而另一种则不会。

在下面的示例中,在IE和firefox上,前两个测试div都没有边框。但是,第二个和第二个是不同的,第二个块中的第一个div是普通的,第二个块中的第二个div具有中等宽度的虚线边框。

因此,尽管它们都是有效的,但是如果它们级联很多(例如我认为的那样),则可能需要注意您的样式。

<html>
<head>
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}

div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}

</style>
</head>
<body>

<div class="zerotest">
<div class="setwidth">
"Border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: 0" and "border-style: dashed"
</div>
</div>

<div class="nonetest">
<div class="setwidth">
"Border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: none" and "border-style: dashed"
</div>
</div>

</body>
</html>

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android