首页 > 代码库 > 计算盒子模型的大小
计算盒子模型的大小
刚开始学习css的时候,对盒子大小的计算始终感觉有点儿乱,后来自己写了写demo,感觉好多了,跟我一样不清楚的童鞋可以运行下面代码,实际测量并计算下盒子的大小就了解啦~~
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题</title> </head> <style type="text/css"> div{ width: 300px; height: 300px; background: gray; border: 50px solid blue; padding: 50px; margin:50px; } </style> <body> <div> 一个盒子,有margin,border,padding实际占用多少空间: <br/> <br/> 竖直方向是:height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom <br/> <br/> 水平方向上:width+padding-left+padding-right+border-left+border-right+margin-left+margin-right </div> </body> </html>
如上代码,我们为一个盒子设置了各类属性,首先是外面的margin,各为50,用来设置这个盒子与其他容器的距离;
再向盒子里面看,接着是外圈的蓝色边框border,接着是盒子内部的padding,这段距离在文字与外边框之间,而文字所占据的实际的大小就是最内部的300*300了。
在计算盒子的实际大小的时候,最好是一层一层的,感觉这样挺有逻辑感的,也不至于丢掉哪一层的值。
计算盒子模型的大小
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。