CSS中contain的語法的作用
在CSS中，contain是一個很有用的屬性，它可以影響元素的布局和渲染。它的主要作用是告訴瀏覽器如何處理元素的內容，并控制元素與其他元素之間的關系。
contain屬性有四個可選值：none、strict、content和size。下面我們將詳細討論每個值的作用，并提供相應的代碼示例。
- none：這是contain屬性的默認值，它表示元素的內容可以自由地溢出到父元素或其他元素。這也是傳統的CSS行為。
示例代碼：
.container {
contain: none;
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.text {
width: 300px;
height: 300px;
background-color: red;
}
登錄后復制
在上面的代碼中，容器div的寬度和高度都是200像素，并且設置了overflow:hidden。而文本div的寬度和高度都是300像素，超出了容器的尺寸。因為contain屬性值設置為none，文本會溢出到容器之外。
- strict：這個值告訴瀏覽器應用嚴格的約束條件，以確保元素不會溢出邊界。
示例代碼：
.container {
contain: strict;
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.text {
width: 300px;
height: 300px;
background-color: red;
}
登錄后復制
在上面的代碼中，容器div的寬度和高度仍然是200像素，并且設置了overflow:hidden。但是由于contain屬性值設置為strict，瀏覽器會自動調整文本div的尺寸，以確保其不會溢出容器的邊界。
- content：這個值告訴瀏覽器只考慮元素自身的內容，而不考慮其子元素的尺寸和位置。
示例代碼：
.container {
contain: content;
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.text {
width: 300px;
height: 300px;
background-color: red;
}
登錄后復制
在上面的代碼中，容器div的寬度和高度仍然是200像素，并且設置了overflow:hidden。但是由于contain屬性值設置為content，文本div依然會溢出到容器之外，因為瀏覽器只考慮元素自身的大小，而不會調整子元素的尺寸。
- size：這個值告訴瀏覽器應該將元素的尺寸調整為適合其內容的最小值。
示例代碼：
.container {
contain: size;
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.text {
width: 300px;
height: 300px;
background-color: red;
}
登錄后復制
在上面的代碼中，容器div的寬度和高度依然是200像素，并且設置了overflow:hidden。但是由于contain屬性值設置為size，瀏覽器會調整文本div的尺寸，使其適合容器的尺寸。
總結
contain屬性在CSS中的作用是控制元素的內容如何布局，以及元素與其他元素之間的關系。通過使用contain屬性，我們可以實現更精確的布局和更好的渲染效果。根據不同的值，我們可以控制溢出、尺寸調整和子元素的影響。了解并熟練使用contain屬性，將有助于我們更好地控制和優化網頁的布局。
