css3盒模型

栗子i维C

于 2018-10-11 15:18:32 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css3

本文链接：https://blog.youkuaiyun.com/Alisa_vc/article/details/83012887

16 篇文章

订阅专栏

本文深入探讨了CSS3盒模型的两种模式：W3C标准盒模型与IE6混杂模式盒模型。通过对比，解释了如何使用box-sizing属性转换盒模型，确保div元素即使在设置了内边距和边框的情况下也不会超出父级宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3盒模型
w3c标准盒模型	IE6混杂模式盒模型
盒宽 = 设置宽+padding+border	盒宽 = 设置宽

box-sizing:border-box 将w3c标准盒模型转换为 IE6混杂模式盒模型

div{width:100%;padding:10px;border:3px;}

不会超出父级宽度