Question

我有这个代码工作正常，但通常（不是特别针对此代码）我的高级开发人员告诉我要避免在保证金上减去负值。

#speech-bubble {
   margin:100px;
   width: 120px; 
   height: 80px; 
   background: blue;
   position: absolute;
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid blue;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}

<body>
  <div id="speech-bubble">
  </div>
</body>

为什么我需要避免保证金上的负值？
如果我删除了内容：“”我的代码无效，但我认为这是不必要的行。
这是做什么的？从我的代码中删除它后，事情有效吗？

-moz-border-radius: 10px; -webkit-border-radius: 10px;

Answer 1

1.我的问题是为什么需要避免保证金的负值？

负边距是违反直觉的，边距的正常概念是元素周围的空间。负边距在技术上很好，但使代码更难以阅读和维护。如果有一种更直接的替代方式，那么使用它会更好。

2.如果我删除了内容：“”我的代码无效，但我觉得它不必要的行......

如果定义了:before，

:after和HTML会在content中创建伪元素。如果你没有提供content，那么伪元素中可能没有任何东西可以显示。

检查specs here content none的默认值pseudo-element，该值不应生成''。

如果您不需要元素中的任何内容，则必须使用border-radius空字符串。

-moz-border-radius：10px; -webkit-border-radius：10px;我从我的代码中删除它后它工作正常:)）

-moz可以使用Google搜索来获取含义，-webkit，-ms，-o，-moz-border-radius等是浏览器之前引入的实验规则的浏览器前缀规范已经批准。 border-radius就像[23000][1062] Duplicate entry '0' for key 'PRIMARY'上的预发布版本一样，支持旧版本的基于gecko的浏览器。最新的浏览器支持这些规则，没有任何浏览器前缀。

Answer 2

负边距令人困惑（它们是反直觉的，在浏览器检查工具上没有明确标记等），应尽可能避免。使用absolute定位时，应使用顶部/底部/左/右。

content:''

before

after来为它们提供内容（没有它们，它们不存在且无法设置样式）。您可以像content:'someconent'
当浏览器中的功能处于实验状态时，它有时可以使用带前缀格式（如-webkit-border-radius），稍后会更改为border-radius。这样，您可以为实验版和最终版使用不同的值。这在flexbox中最为明显，因为它已多次更改。另一方面，border-radius未更改，因此您将-webkit-border-radius用于使用实验版本的旧浏览器，而border-radius用于使用最终版本的现代浏览器。

使用保证金减去是对的approch？

2 个答案: