css3的box-凯发k8官方网

j记住是对包括的盒子进行设置：给他挤进去或者给他扩展

css2中我们设置一个盒模型后

该盒子总占有宽高是为我们设定的内容宽高 内边距（width padding）

这有时会在实际开发时 由于计算的疏忽可能会给我们带来一些不便  

于是 css3的时候  引入了一种新的规范 box-sizing

 

box-sizing有三个属性值：如下

box-sizing：content-box | border-box | inherit

content-box 是默认属性值  即延承了css2的属性的值

而inherit 是继承其父元素的box-sizing 属性的值

新制定的border-box属性  规定盒子的总占有宽高为 我们设定的宽高   即padding所占有像素也归并进我们设置的width值里去

 

例子

.content-box{box-sizing:content-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #e6a43f;background: rgba(0,101,252,1); }.border-box{box-sizing:border-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #e6a43f;background: rgba(0,101,252,1); }

 

 

content-box中 width padding border=100 20*2 5*2=150

border-box中 100-padding*2-border*2=50

 

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是凯发k8官方网为你收集整理的css3的box-sizing：向外撑content-box向内挤border-box 外撑的padding算自己的盒子会变大 内挤的padding会缩小自己的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。