css笔记

yuan

浏览: 273960 次
性别:
来自: 尤溪

最近访客更多访客>>

ling_yuan

iamjustlyl

jiaoronggui

Hooopo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS IE Firefox 浏览器 C

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

=================================
果然是书上的问题：http://www.douban.com/review/1663995/

分享到：

Hpricot笔记 | o6z说code review

2009-12-27 01:22
浏览 1248
评论(17)
分类:Web前端
查看更多

17 楼 yuan 2010-01-12

引用

即使在不太复杂的样式表中，也可能有两个或更多规则寻找同一元素。CSS通过一个称为层叠（cascade）的过程处理这种冲突。层叠给每个规则分配一个重要度。作者的样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表。为了让用户有更多的控制能力，可以通过将任何规则指定为!important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important标志的规则。
因此，层叠采用以下重要度次序：
　标为!important的用户样式。
　标为!important的作者样式。
　作者样式。
　用户样式。
　浏览器/用户代理应用的样式。

16 楼 yuan 2010-01-12

原来还有“用户样式”这么个概念：http://www.mb5u.com/divcssjiaocheng/14011.html

15 楼 yuan 2010-01-09

又有一个地方只有IE下有效果……

14 楼 yuan 2009-12-27

严重打击我对这本书的信心啊。。

13 楼 yuan 2009-12-27

84页到85页的那几个对比也有问题，我全部试了一遍，实际上我在电脑里运行的结果是：IE系列的所有浏览器的表现都与书中IE5的描述一致。

第99页的第二段也有问题，我怀疑作者是在IE下写代码，然后把结果写到书上。因为到目前为止，有两个地方作者说的跟IE下的表现一样，但FireFox的表现却不是这样。

12 楼 yuan 2009-12-27

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

11 楼 yuan 2009-12-27

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

10 楼 yuan 2009-12-27

一旦对象被设置了绝对定位，它就完全脱离了文档流与浮动模型，独立于其它对象而存在。
相对定位使得被设置元素保持与其原始位置相对，并不破坏其原始位置的信息，如：

<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的右侧。

9 楼 yuan 2009-12-27

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

8 楼 yuan 2009-12-27

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

7 楼 yuan 2009-12-27

好吧，当作是书上错了，这个笨蛋作者。。

6 楼 yuan 2009-12-27

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

5 楼 yuan 2009-12-27

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

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

4 楼 yuan 2009-12-27

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

3 楼 yuan 2009-12-27

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

2 楼 yuan 2009-12-27

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

1 楼 yuan 2009-12-27

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

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css笔记

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css笔记

评论

发表评论

相关推荐

最近访客更多访客>>