盒子模型

最新推荐文章于 2021-06-19 02:42:12 发布

GuessHat

最新推荐文章于 2021-06-19 02:42:12 发布

阅读量394

点赞数

分类专栏： # CSS 文章标签： html

本文链接：https://blog.csdn.net/guesshat/article/details/106119369

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

盒子模型

盒子模型准则：盒子不设宽高，宽度由父级元素决定，高度由包含的内容决定

1.概念

盒子模型主要用于html中的封装，主要包括：外边距，边框，内边距，和实际内容。

2.布局介绍

在这里插入图片描述
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。 margin:0px auto;盒子针对容器居中
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
实例：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

3.盒子实际大小占地

不设置初始盒子width,height
盒子宽度方向：内容宽+左内边距+右内边距+左右边框线宽+左外边距+右外边距
盒子高度方向：内容高+上内边距+下内边距+上下边框线宽+上外边距+下外边距
设置初始盒子width,height相当于只是设定了内容的宽高
盒子宽度方向：weight+左内边距+右内边距+左右边框线宽+左外边距+右外边距
盒子高度方向：height+上内边距+下内边距+上下边框线宽+上外边距+下外边距

4.外边距（三个问题）扩展

行内元素对垂直外边距无效
例如对span标签设定margin-top,不会发生变化，但设定margin-left,会有效果显示

margin-top  无效
margin-right 有效

垂直外边距合并
当两个外边距相遇时，会形成一个外边距，数值为其中最大值（只针对垂直方向）
外边距溢出
因为父元素没有加边框设置，写给子元素的垂直外边距会作用在父元素上
例：box 没有设定边框属性，而d1设定了垂直的外边距的值会作用在box与body之间

	<body>
		<div class="box">
			<div id="d1"></div>
			<div id="d2"></div>
		</div>
	</body>

.box{		
	background-color: yellow;
}
#d1,#d2{
	width: 800px;
	height: 300px;
}
#d1{
	border: 1px solid red;
	margin-top: 150px;
	margin-bottom: 150px;
}
#d2{
	border: 1px solid green;
	margin-top: 150px;
}