前端面试之盒子模型

CSS盒子模型

盒子模型算是前端基础，是写css样式常用到的属性，几乎每个元素都会用到。盒子模型有哪些呢，也许你常用到它，但不知道它就是盒子模型，可能只是我不知道而已。

前段时间找工作，自以为自己已经很好的掌握了前端知识，没有很好的复习前端基础知识，就去面试了，当面试官问到我CSS盒子模型的时候，我懵逼了，什么是盒子模型，CSS知识我应该大多了解了，没听过盒子模型是什么，就说了一大堆其它的，想糊弄过去。结果可想而知了，回去等消息，然后就没消息了。

于是，我马上回去把前端基础知识看一遍，这才知道盒子模型是什么，明明每天都在打代码，每天都用到它们，就是不知道它们是盒子模型，这个教训告诉我，基础知识也要常常复习，温故而知新。

果然，再一次面试，面试官也问了CSS盒子模型，这次我不会懵逼了，很自然的回答了盒子模型是哪些属性。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

如上图，浅绿色是一个父元素，电话图片为它的子元素，但子元素的大小不止于图片的大小，而是比图片大小更大，其它区域为子元素的盒子模型属性的占比。

电话图片就是这个子元素的内容。

灰色部分就是子元素的内边距padding，它在图片的四周都隔开一定的边距，那是因为子元素给四边都添加了内边距，它们可以单独使用。

蓝色部分是子元素的边框border，它可以给元素添加边框，可以单独使用

子元素距离父元素的大小是外边距margin，它可以清除边框外的区域，使子元素不贴合父元素边框。

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

box-sizing: border-box;

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

值	说明
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	指定 box-sizing 属性的值，应该从父元素继承

如上图，已经定义了元素的宽高，再给元素添加边框，内边距和外边距，左边的是添加了box-sizing: border-box属性，右边没有添加，左边的元素指定的宽度和高度包括了元素的padding和border，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。右边的元素会在指定的宽度和高度的基础上再加上padding和border的大小。

边距重叠

有时候，我们给子元素设置margin的时候，会发现子元素没有和父元素边框分离，而是父元素带着子元素一起出现了外边距的分离。这是因为父元素和子元素的边距重叠了，根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。

解决方案1：
为父元素设置padding

	#fa{
			width: 500px;
			height: 500px;
			background-color: aquamarine;
			padding-top: 50px;
		}
	
	#ch{
		padding: 30px;
		background-color: gray;
		width: 133px;
		height: 133px;
		border: 20px solid lightskyblue;
		box-sizing: border-box;
	}

解决方案2：
为父元素设置border

	#fa{
			width: 500px;
			height: 500px;
			background-color: aquamarine;
			border: 1px solid #7FFFD4;
		}
			
	#ch{
		padding: 30px;
		background-color: gray;
		width: 133px;
		height: 133px;
		border: 20px solid lightskyblue;
		margin: 50px;
		box-sizing: border-box;
	}

解决方案3：
为父元素设置 overflow: hidden

	#fa{
		width: 500px;
		height: 500px;
		background-color: aquamarine;
		overflow: hidden;
	}
	
	#ch{
		padding: 30px;
		background-color: gray;
		width: 133px;
		height: 133px;
		border: 20px solid lightskyblue;
		margin: 50px;
		box-sizing: border-box;
	}

以此来记录一些知识点，如有错误，请指教，如有相似，请告知。