CSS3 box-sizing 属性

box-sizing: content-box | border-box | inherit;

浏览器默认 content-box:标准盒子模型,在宽度和高度之外绘制元素的内边距和边框。
比如:元素宽度100px 设置了padding:0 10px; border:10px;
那么,元素最终宽度:100 + 10 * 2 + 10 * 2 = 140

border-box:IE盒子模型,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
比如:元素宽度100px 设置了padding:0 10px; border:10px;
那么,元素最终宽度:100px
设置的padding只会向内挤压内容区域的宽度

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,663评论 0 7
  • 在一个文档中,每个元素都被表示为一个矩形的盒子。盒子模型具有4个属性['外边距(margin)','边框(bord...
    weiqinl阅读 1,345评论 2 2
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,649评论 0 26
  • 著名的马歇尔.卢森堡博士发现了一种沟通方式,依照它来谈话和聆听,能使人们情意相通、和谐相处,这就是非暴力沟通。阮胤...
    木木_a1e3阅读 414评论 0 1