css笔记
yuan
posted @ 2009年12月26日 23:24
in css
, 1544 阅读
问题1：有如下代码
#left{
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
float:left;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
height:300px;
}
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
float:left;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
height:300px;
}
我期望的结果是left宽度固定，right宽度自适应，并紧挨着left，但在ff里，估计right已经跟left重叠了。因为以下代码的结果是重叠的：
#left{
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
float:left;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
width:300px;
height:300px;
}
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
float:left;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
width:300px;
height:300px;
}
2009年12月27日 05:06
IE8的padding和boder值不影响整个盒模型的大小，但margin值会影响整个盒模型的大小。
FireFox下这3个值都会影响整个盒模型的大小。
2009年12月27日 05:14
Firefox浏览器的盒模型解释完全符合w3c的设计目标。
2009年12月27日 05:20
两个盒模型的位置为上下关系时，并且这两个盒模型都具备margin属性的时候，由margin所造成的外边距将会叠加。
引发这种问题的原因是由CSS设计所造成的，CSS设计者考虑到我们要对段落进行控制，比如多个p标签形成段落，如果这些p标签都具备margin:10px属性的话，那么它们中第一个段落的顶部外边距是10px，而第一个段落与第二个段落之间的margin就成了20px，由此造成排版距离不一致，所以设计出这种空白边叠加规则。
空白边叠加时，以较大的margin值为准。
但是一旦把某个元素设定了float属性，那么它们将不再进行空白边叠加。
2009年12月27日 05:38
当盒对象为浮动状态时，在IE6中，盒对象的左右margin会加倍。
可以把display属性设置为inline来解决。
2009年12月27日 05:56
名词解释——文档流：
对于一个XHTML网页，body元素下的任意元素，根据其前后顺序，组成了一个个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它们在网页之中的位置。文档流是浏览器的默认显示规则。
CSS网页布局只能以两种方式存在：一种是浮动式布局，另一种则是定位布局。这两种定位方式的核心都脱离于文档流的控制。
2009年12月27日 09:09
主帖的问题目前实在无法解释……按书上说的“当a浮动为左侧时，右侧的清空可以让文档流继续显示上来。但由于a占据了页面位置，因此b紧贴在a的右侧显示”。可是FireFox下，当a有float:left，b没有float属性时，b和a会重叠，IE下则正常。FireFox要达到同样的效果必须给b也加上float:left。不知道是书上说错了还是……
2009年12月27日 20:53
CSS允许我们通过设置对象的z-index属性，以设置其重叠的先后顺序，也就是z轴的顺序。以z-index的数值大小为准，大值对象的层级位于小值对象之上。
2009年12月27日 21:07
z-index值只有在绝对定位或者相对定位时（即设置了position值时）才有效。
2009年12月27日 22:15
一旦对象被设置了绝对定位，它就完全脱离了文档流与浮动模型，独立于其它对象而存在。
相对定位使得被设置元素保持与其原始位置相对，并不破坏其原始位置的信息，如：
<html>
<head>
<style>
#a,#b,#c,#d{
background-color:#eee;
border:2px solid #aaa;
width:100px;
height:100px;
margin: 2px 2px 2px 0px;
float:left;
}
#b{
position:relative;
top:50px;
left:50px;
}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
</body>
</html>
当元素b设置为相对定位时，它将相对于自身的原始位置进行定位，而其原始的占位信息依然存在，所以元素c和d继续浮动在b的右侧。
2009年12月27日 22:15
我靠，果然作者是笨蛋：http://www.douban.com/review/1663995/
2009年12月27日 22:15
98页所谓的“不占位的相对定位”，愣是没看明白意思……