经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
css盒子模型简析
来源:cnblogs  作者:毕家大少  时间:2021/3/1 8:43:35  对本文有异议

盒子模型分为标准盒子模型怪异的盒子模型

1.标准的盒模型 (content-box)

  你设置的宽和高(width/height)是内容的部分宽高,所以盒子的实际宽度=内容的宽高+boder+padding

 

 

 

 

 

 我设置的宽为100px高为100px,是内容的宽高,实际盒子的宽150px高为150px     宽=100px(conttent)+20px(padding)+5*2(border)

所以可以得出:如果你想要的盒子就是宽100px 高为100px的话,就不能再改变盒子的padding和border的值,选用border-box

2.怪异的盒子模型(border-box)

 你设置的宽和高(width/height)就是盒子的大小,设置的padding和border不会改变盒子的大小,相反的是内容区的高度会随之而改变

 

 

 

 

 

 从上面的图可知,只是改变了box-sizing为border-box

设置的宽高都为100px 盒子的padding值20px border值为5px,盒子的宽度没有改变内容的宽度却减小了,变成了50px,下面我继续变大padding可以明显的看见变化

 

 

 

 

 padding为25px border为5px content宽度为40px ,盒子的大小没有变化,还是100px(25*2+40+5*2)

 

 

 padding为20px border为10px content宽度为40px ,盒子的大小没有变化,还是100px(20*2+40+10*2)

 

 

 

原文链接:http://www.cnblogs.com/bishang/p/14428771.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号