css_html总结

IE盒子模型 vs w3c标准盒子模型

为什么博客网站图片都要防外链呢？还好哥有七牛图片云存储

IE盒子宽度 = content_width + 2*（padding-left + border-left）；假设left right数值一样 w3c盒子宽度 = content_width;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>IE盒子模型 vs W3C盒子模型</title>
</head>
<style>
	div{
		width:200px;
		height:100px;
		margin:20px;
		padding: 20px;
		border: solid 10px green;
		background-color: white;
	}
</style>
<body>
	<div>我快要连div标签都快不会写了</div>
</body>
<script>
	var myDiv = document.createElement('div');
	myDiv.innerHTML = '我是新创建的div';
	myDiv.style.width = '100px';
	myDiv.style.height = '100px';
	myDiv.style.border = 'solid 1px red';
	myDiv.style.padding = '10px';
	myDiv.style.margin = '20px';
	document.body.appendChild(myDiv);

	var doc = document.getElementsByTagName('div');
	alert(doc[0].offsetHeight);//160px
	alert(doc[1].offsetHeight);//122px
</script>
</html>

那么问题又来，如何获得margin padding值？