最近我在學習CSS的時候，遇到了一種有趣的現象。就是同一個div，在不同的情況下會出現不同的形態，有時候甚至完全變形了。

.box{
width: 200px;
height: 100px;
border: 1px solid black;
background-color: #eee;
}

比如這個時候，我們有一個這樣的div，寬度是200px，高度是100px，邊框是黑色的，背景是灰色的。

.box{
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid black;
background-color: #eee;
}

但是，如果我們給這個div加上了display: inline-block;的屬性，就會出現如下的情況：

我們發現，div變成了一條橫線。這是因為，當我們給div加上inline-block屬性后，就讓它變成了一個行內塊元素。而行內塊元素有一個特性就是，在同一行內的元素，其間的空格、換行、TAB等都會被渲染成空白。所以，當我們的div元素中間有空格或者換行時，就會出現上面的情況。

.wrapper{
width: 500px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 200px;
height: 100px;
border: 1px solid black;
background-color: #eee;
}
.big{
width: 300px;
height: 150px;
}

還有一種情況就是，在使用flex布局的時候：

我們發現，這個時候，box的形態發生變化了，變得更小了，因為容器wrapper給它設置了flex布局，它就像是被擠了一樣。與此類似的，如果我們給box加上一個更大的class：

那么結果就會是這樣的：

這說明，我們在使用CSS的時候，一定要注意div的父元素的設置，以及對應的屬性是否有影響，這樣才能保證我們的頁面和元素可以按照我們的設計和期望正常渲染。