box-sizing 特性

box-sizing属性值有2个,border-box 和 content-box,
实例:

//html
<div class="content-box">
</div>
//css
  .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }

此时的效果


image.png

看盒模型


image.png

此div的padding和border不会计算入width中
而当 box-sizing为border-box时,

查看盒模型


image.png

会发现,width变小了,
这是因为,box-sizing:borderbox时,div的宽度会把padding和border计算到实际width上;

总结:
content-box ,border和padding不计算入width之内
border-box, border和padding都计算入width内

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,623评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,514评论 0 6
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,567评论 0 1
  • 2017年8月7日你来到我身边,我己经是四十三岁了,你是我第三个孩子,取名三喜。 你喜欢这个睡姿,见到你的人都忍不...
    睿齐智阅读 220评论 0 3