技術標籤：css

文章目錄

• 盒模型
• • 1. 什麼是盒模型
  • 2.盒模型有幾種
  • 3. 標準和怪異模型的轉換

盒模型

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 屬性的值。