box-sizing

box-sizing是css3新增属性
在这里插入图片描述

  1. content-box默认属性,也是标准盒模型。
    width = content的width
    height = content的height
    所以当给标准盒模型添加padding、border会影响到别的布局的位置。也就是说标准盒模型是向外排布。
    在这里插入图片描述 在这里插入图片描述

  2. border-box是IE盒模型,也成怪异盒模型。
    width = content的width + padding + border
    height = content的height + padding + border
    所以当给IE模型添加padding、border不会影响到别的布局的位置。也就是说IE盒模型是向内排布。在这里插入图片描述在这里插入图片描述

发布了2 篇原创文章 · 获赞 1 · 访问量 15
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览