计算盒子模型的大小-阿里云开发者社区

开发者社区> 云原生> 正文
登录阅读全文

计算盒子模型的大小

简介:                  刚开始学习css的时候,对盒子大小的计算始终感觉有点儿乱,后来自己写了写demo,感觉好多了,跟我一样不清楚的童鞋可以运行下面代码,实际测量并计算下盒子的大小就了解啦~~   无标题 div{ width: 300...


            

    刚开始学习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了。


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







版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云原生
使用钉钉扫一扫加入圈子
+ 订阅

云原生时代,是开发者最好的时代

其他文章
最新文章
相关文章