盒模型分析

最新推荐文章于 2024-11-01 15:19:31 发布

zayzy

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量124

点赞数

分类专栏： html/css 文章标签： html

本文链接：https://blog.csdn.net/weixin_45630345/article/details/117453373

版权

html/css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

盒模型的组成：
content，padding，border，margin

*padding:盒子的内边距，相当于填充物;
*border 盒子的边框
*margin 盒子的外边距，用来设置标签之间的间距大小；

（注* 该图仅供了解盒模型组成。如果你看完底下后返回来看这里的话，501.333是不准确的，由于是块元素，博主截图时点击元素后宽度还有网页白板部分。）在这里插入图片描述

首先来举一个例子，这只是部分代码：

           #one{
				/* 真实看到的为502 */
				width:480px;
				height:480px;
				background-color: #F0F8FF;
				border: 1px dashed #000000;
				padding:10px;
				}
			#two{
				/* 父级width为content部分,只能在width中布局 */
				/* 上一个width=这个的width+2*border+2*padding; */
				width:370px;
				height:370px;
				background-color: bisque;
				border:5px solid #00FFFF;
				padding:50px;
			}
......
<div id="one">
			<div id="two"></div>
</div>

看到的效果如图：
在这里插入图片描述

*注意：*
若标签之间横向布局，当同时设置外边距时，标签之间的间距叠加；
当标签之间纵向布局，当同时设置上下外边距时，标签之间的间距取两者较大值；
若有一个父子级，则子级包括子级的外边框都只能位于父级的content中。

总结：
标签实际宽度（真实看到的）=content.width + padding-left + padding-right + border-left + border-right
标签实际宽度（真实看到的）=content.height + padding-botoom + padding-top + border-bottom + border-top