[分享]css不写宽高显示border

CSS是网页设计的重要组成部分，它的代码可以让网页变得更加美观、易读、易用。但是，有时候我们并不希望在网页中显示出元素的宽度和高度，但是又想要让元素显示边框。这时候该怎么办呢？下面，我们就来探讨一下如...

CSS是网页设计的重要组成部分，它的代码可以让网页变得更加美观、易读、易用。但是，有时候我们并不希望在网页中显示出元素的宽度和高度，但是又想要让元素显示边框。这时候该怎么办呢？下面，我们就来探讨一下如何在不写宽高的情况下显示元素的边框吧。

.box {
    border: 2px solid black;
} 

上面的代码是一个简单的CSS样式，它给一个名为“box”的元素添加了一个2像素宽的黑色实线边框。然而，这个元素并没有指定任何宽度或者高度，所以它会根据内部内容自动调整大小。如果你想要让这个元素的大小固定，但又不想在CSS中指定宽度和高度，那么你可以使用CSS中的一个鲜为人知的特性——盒模型。

盒模型是CSS中一个非常强大的概念，它允许我们在不指定宽度和高度的情况下，控制元素的大小和边框。这个概念比较抽象，如果你还没有接触过，可以参考我的另一篇文章《CSS盒模型详解》来学习一下。

.box {
    box-sizing: border-box;
    border: 2px solid black;
    padding: 10px;
} 

上面的代码是一个使用盒模型的例子。我们给box元素设置了box-sizing属性为border-box，这意味着边框的宽度将会被包含在元素的大小内，而不是增加元素的总大小。接着，我们添加了一个2像素宽的黑色实线边框，并且给元素添加了10像素的填充。由于我们使用了盒模型，所以元素的大小将会根据内容自动调整，并且边框和填充将会完全包含在元素内部。

最后，我想提醒一下大家，虽然使用盒模型可以让我们在不指定宽高的情况下显示元素的边框，但这并不是一个万能的解决方案。在实际开发中，我们应该尽量避免不写宽高的情况，因为这样可能会导致布局混乱、不利于SEO等问题。使用盒模型时，我们也应该尽量谨慎，避免出现样式覆盖、兼容性等问题。