css3不超过盒子

CSS3是前端开发中必不可少的一部分，它的许多新特性可以帮助开发人员更加灵活地控制页面的样式。其中的一个有趣的特性就是可以让元素的大小不超过其所在的盒子。

.box {
    width: 200px;
    height: 200px;
    background-color: gray;
    overflow: hidden;
}
.box img {
    max-width: 100%;
    max-height: 100%;
}
    

在上面的代码中，我们给盒子容器设置了固定的宽度和高度，并将其背景颜色设置为灰色。接着我们使用了overflow: hidden; 属性，这样盒子中的内容超出了容器大小，就会被隐藏起来。

然后，我们给图片设置了max-width和max-height属性都为100%，这样图片就不会超出父元素的大小了。这一特性在响应式设计中也非常有用，因为它可以让页面自适应不同大小的屏幕。

CSS3的这个特性让我们更加方便地控制元素的大小，特别是在图片、嵌入式内容等方面，可以让我们轻松实现一些有趣的效果。如果你还没有利用好这个特性，不妨试试吧。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！