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的尺寸，以确保其不会溢出容器的边界。
采用 php+mysql 数据库方式运行的强大网上商店系统，执行效率高速度快，支持多语言，模板和代码分离，轻松创建属于自己的个性化用户界面 v3.5更新： 1).进一步静态化了活动商品. 2).提供了一些重要UFT-8转换文件 3).修复了除了网银在线支付其它支付显示错误的问题. 4).修改了LOGO广告管理,增加LOGO链接后主页LOGO路径错误的问题 5).修改了公告无法发布的问题,可能是打压
- 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属性，将有助于我们更好地控制和优化网页的布局。
