盒子模型

盒子模型

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

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;
}
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值