p { Box-sizing: border-Box; width: 200px; padding: 10px; border: 1px solid #ccc; }以上代码将p标签的盒模型类型改为border-Box,然后指定宽度为200px,padding为10px,border为1px实线边框。此时,元素的总宽度即为200px,包括padding和border的宽度。这样我们就可以更方便地控制元素的布局了。 需要注意的是,Box-sizing属性在一些老版本的浏览器中可能不被支持。在这种情况下,我们可以使用hack的方式来兼容这些浏览器。比如使用:
p { Box-sizing: border-Box; width: 200px; padding: 10px; border: 1px solid #ccc; *width: 218px; *padding: 0 9px; }以上代码在IE6和IE7中都可以正确地计算宽度,并且使用了hack的方式来避免影响其他浏览器的效果。 总之,CSS3中的宽度包含padding,让我们可以更方便地进行页面布局,同时也让代码更加简洁和易读。如果我们需要考虑兼容性问题,那么使用hack的方式来解决就可以了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。