css总宽度减去定值 |css3是什么时候发布的

.box {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.box {
padding: 10px;
max-width: 768px;
}
}

在上面的示例中，大家定义了一个类名为“.box”的容器，它的宽度始终为父元素的100%，最大宽度为800px，内边距为20px，并使用了box-sizing:border-box;以避免内边距影响元素的总宽度。在小于768px的屏幕上，大家通过@media查询重新定义了“.box”的宽度和内边距。

大家可以将这个思路运用在其他元素上，例如将一个图片容器的宽度固定为总宽度减去定值，以实现在缩小屏幕时保持图片大小不变的效果。

.img-container {
width: calc(100% - 40px);
max-width: 600px;
margin: 0 auto;
}

在上面的示例中，大家使用了calc()函数来计算宽度，保证了宽度自适应屏幕大小，并且减去了40px的固定宽度，以确保在各种屏幕上都可以看到完整的图片。同时，大家设置了最大宽度为600px，以防止在大屏幕上图片过于放大。

CSS总宽度减去定值是一个常见的技巧，可以帮助大家实现响应式设计和适配不同屏幕大小，提高用户体验。在实际开发中，大家可以灵活运用这个思路，针对不同需求进行调整。