If there is a need to add a border to an element, surely it will get used to and skilled use border to achieve, I also like this
But in fact outline can achieve the same effect, and may be more appropriate in some scenes, such as the following demo
After using border, div width is increased, leading to the parent element beyond
After using the outline, div element width will not change
DEMO
<!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