css的box-sizing

概要

**box-sizing
**属性用于更改用于计算元素宽度和高度的默认的CSS 盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

取值

  • content-box
    该值是默认值，表示标准盒子模型，内容的width和height不包括外边距margin，边框border和内边距padding

  • border-box
    该值表示的是IE的盒子模型，内容的width和height包括内容的宽高以及内边距padding和边框border

  • inherit
    该值指定box-sizing属性的值，应该从父元素继承

  • padding-box
    该值表示内容的width和height包括内容的宽高以及内边距padding但是不包括边框border和外边距margin，只在firefox中实现了这个值，但是它在Firefox 50中被删除了

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

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1赞 92
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,335评论 0赞 11
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,803评论 0赞 2
  • H5移动端知识点总结
    H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,625评论 0赞 26
  • H5移动端知识点总结
    移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,514评论 0赞 6