html网页盒子整体放大,CSS3的box-sizing 属性切换盒子缩放

68 阅读 0 评论 45 点赞

我是靠谱客的博主个性芝麻，最近开发中收集的这篇文章主要介绍html网页盒子整体放大,CSS3的box-sizing 属性切换盒子缩放，觉得挺不错的，现在分享给大家，希望可以做个参考。

使用 CSS3 的 box-sizing 属性切换盒子缩放方。应用 box-sizing(border-box) 属性后，添加边框和内边距都不会增大盒子，相反会导致内容变窄。

/IE6 和 IE7 不支持 box-sizing属性。

不过，有一个专门解决这个问题的腻子脚本( polyfill)，名叫 borderBoxModel.js。

你可以使用条件注释(以便只有 IE6 和 IE7 加载)把它添加到 HTML 标记之后、结束的标签之前，以保证在加载 DOM 之后再执行该脚本：

最新版本的 borderBoxModel.js 腻子脚本以及它的用途和局限性，可以参考这里：https://github.com/albertogasparin/borderBoxModel。

这样， IE6 和 IE7 就可以根据 box-sizing 属性的设定正确地调整栏的大小了。

以上引用自《CSS设计指南》

但是问题来了，IE6本身的盒子模型不就是类border-box么，为什么需要其支持box-sizing:border-box呢？

记下这个问题，怕忘了，准备再研究一下。

(责任编辑：最模板)

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。