css问题

最新推荐文章于 2022-10-05 21:35:57 发布

ralflee

最新推荐文章于 2022-10-05 21:35:57 发布

阅读量84

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/ralflee/article/details/83981968

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

[size=large][b]盒模型：[/b][/size]

在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

[size=large][b]关于float[/b][/size]

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

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

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

[size=large][b]
关于quirks Model[/b][/size]

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

ralflee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css问题

[size=large][b]盒模型：[/b][/size]在IE5.5和IE6的quirks Model下：width = 内容长度+padding+border在w3c的标准模式下：width = 内容长度因此，如果涉及如下代码：[code="html"]*{margin:0px; padding:0px;} #out{ ...
复制链接

扫一扫

专栏目录