在CSS中,同父級是指兩個或多個元素具有相同的父元素,它們的ID、類名等屬性可能不同,但它們都是同一父級下的兄弟元素。
.parent { width: 80%; margin: 0 auto; display: flex; justify-content: space-between; } .child1 { width: 30%; background-color: red; } .child2 { width: 50%; background-color: blue; } .child3 { width: 20%; background-color: yellow; }
在上面的代碼中,.parent是三個子元素的共同父級。我們使用flex布局來實現它們之間的間距并盡可能占滿父元素的空間。并且可以看到,三個子元素的寬度是不同的,但它們仍在同一父級下,所以雖然它們的外觀不同,但我們可以使用相同的CSS樣式來對它們應用作用。
同父級在CSS中很常見,它可以讓我們輕松地實現一些布局效果。例如,我們可以在同一行內放置多個按鈕,或者實現網格布局中的單元格分隔。
下一篇vue源碼去哪