css问题

盒模型:

在IE5.5和IE6的quirks Model下:

width = 内容长度+padding+border

在w3c的标准模式下:

width = 内容长度

因此,如果涉及如下代码:
<style type="text/css">
*{margin:0px;
  padding:0px;}
  
#out{
	width:100px;
	margin:20px;
	padding:20px;
	border:10px #666 solid;
	background-color:red;
}
#inner{
	background-color:blue;
}
</style>
</head>
<body>
	<div id ="out">
		<div id ="inner">wo shi nei rong</div>
	</div>
</body>

在IE5.5和IE6的quirks Model下out总的宽度是:
20 +100+ 20 =140px

在w3c下总的宽度是:

20+10+20+100+20+10+20 =200px

关于float

一旦某个html元素被标记为float,他就会变成块元素,浮在原来所在的位置上(类似于到了一个Z轴更高的层,覆盖在原来的层上),即他的坐标左上方不变(所以它之前的元素不受影响),它后面的元素会认为他不存在,也就是自动的去填充他的位置(除非后面的元素也是float,这样就和他在一个层)。

如果后面的元素不希望受到float的印象,可以用
clean:both;清除前面元素的左右浮动
clean:right;清除前面元素右浮动
clean:left;清除前面元素左浮动

这样元素就不会收到浮动的影响了


关于quirks Model


IE6如果不加上<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
就会进入Quirks Model

你可能感兴趣的:(css)