css笔记

yuan posted @ 2009年12月26日 23:24 in css , 1507 阅读

问题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;
      }

 

 

我期望的结果是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;
      }

Avatar_small
yuan 说:
2009年12月27日 05:06

IE8的padding和boder值不影响整个盒模型的大小,但margin值会影响整个盒模型的大小。
FireFox下这3个值都会影响整个盒模型的大小。

Avatar_small
yuan 说:
2009年12月27日 05:14

Firefox浏览器的盒模型解释完全符合w3c的设计目标。

Avatar_small
yuan 说:
2009年12月27日 05:20

两个盒模型的位置为上下关系时,并且这两个盒模型都具备margin属性的时候,由margin所造成的外边距将会叠加。
引发这种问题的原因是由CSS设计所造成的,CSS设计者考虑到我们要对段落进行控制,比如多个p标签形成段落,如果这些p标签都具备margin:10px属性的话,那么它们中第一个段落的顶部外边距是10px,而第一个段落与第二个段落之间的margin就成了20px,由此造成排版距离不一致,所以设计出这种空白边叠加规则。
空白边叠加时,以较大的margin值为准。
但是一旦把某个元素设定了float属性,那么它们将不再进行空白边叠加。

Avatar_small
yuan 说:
2009年12月27日 05:38

当盒对象为浮动状态时,在IE6中,盒对象的左右margin会加倍。
可以把display属性设置为inline来解决。

Avatar_small
yuan 说:
2009年12月27日 05:56

名词解释——文档流:
对于一个XHTML网页,body元素下的任意元素,根据其前后顺序,组成了一个个上下关系,这便是文档流。浏览器根据这些元素的顺序去显示它们在网页之中的位置。文档流是浏览器的默认显示规则。

CSS网页布局只能以两种方式存在:一种是浮动式布局,另一种则是定位布局。这两种定位方式的核心都脱离于文档流的控制。

Avatar_small
yuan 说:
2009年12月27日 09:09

主帖的问题目前实在无法解释……按书上说的“当a浮动为左侧时,右侧的清空可以让文档流继续显示上来。但由于a占据了页面位置,因此b紧贴在a的右侧显示”。可是FireFox下,当a有float:left,b没有float属性时,b和a会重叠,IE下则正常。FireFox要达到同样的效果必须给b也加上float:left。不知道是书上说错了还是……

Avatar_small
yuan 说:
2009年12月27日 20:53

CSS允许我们通过设置对象的z-index属性,以设置其重叠的先后顺序,也就是z轴的顺序。以z-index的数值大小为准,大值对象的层级位于小值对象之上。

Avatar_small
yuan 说:
2009年12月27日 21:07

z-index值只有在绝对定位或者相对定位时(即设置了position值时)才有效。

Avatar_small
yuan 说:
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的右侧。

Avatar_small
yuan 说:
2009年12月27日 22:15

我靠,果然作者是笨蛋:http://www.douban.com/review/1663995/

Avatar_small
yuan 说:
2009年12月27日 22:15

98页所谓的“不占位的相对定位”,愣是没看明白意思……


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter