菜鸟看前端（盒模型）

盒模型

1. 什么是盒模型

在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。

2.盒模型有几种

1. 怪异盒模型

   一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

2. 标准盒模型

   一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

3. js盒模型

   指的是通过JS中提供的一系列的属性和方法,获取页面中元素的样式信息值

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#app{
		width: 100px;
		height: 100px;
		border: 5px solid #DDDDDD;
		margin: 10px;
		padding: 15px;
		background-color: #0088DD;
	}
</style>

<script type="text/javascript">
	let box = document.getElementById('app')
	
	console.log('clientWidth' + app.clientWidth) // 宽度+左右padding
	console.log('clientHeight' + app.clientHeight) // 高度+上下padding
	console.log('offset')
	console.log('offsetWidth' + app.offsetWidth) // 宽度 + 左右padding + 左右边框
	console.log('offsetHeight' + app.offsetHeight) // 高度 + 上下padding + 上下边框
</script>

js获取盒模型

var box = document.getElementById('box');
		// ie获取盒子宽度
		let wIe = box.currentStyle.width
		 console.log(wIe)  // 100px
		// 非IE 获取盒子模型宽度
		let w = window.getComputedStyle(box,null).width  
		console.log(w) //100px

3. 标准和怪异模型的转换

box-sizing:content-box将采用标准模式的盒子模型标准
box-sizing:border-box 将采用怪异模式的盒子模型标准
box-sizing:inherit 规定应从父元素继承 box-sizing 属性的值。