要素に境界線を追加する必要がある場合は、確かにそれは使用すると熟練慣れるだろうボーダー達成するために、私はまた、これを好みます
しかし、実際にはアウトラインが同じ効果を得ることができ、かつ、次のデモなど、いくつかのシーンで、より適切かもしれません
ボーダーを使用した後、divの幅を超えた親要素につながる、増加しています
アウトラインを使用した後、DIV要素の幅は変更されません
デモ
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .main { width: 1200px; } .inner { margin: 0 5px; width: 390px; height: 300px; float: left; border: 1px solid blue; /*outline: solid 1px blue;*/ } </style> </head> <body> <div class="main"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> </body> </html>
那么到底border和outline到底有什么区别呢？
outline是不占空间的，即不会增加额外的宽度（width）或高度（height）
这也涉及到了盒子模型的知识，之前写过一篇博客：https://www.cnblogs.com/tu-0718/p/7443995.html