您的位置：首页 > 其它

计算盒子模型的大小

2014-08-28 13:55 288 查看
刚开始学习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了。

在计算盒子的实际大小的时候，最好是一层一层的，感觉这样挺有逻辑感的，也不至于丢掉哪一层的值。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航