我的CSS备忘录---高级选择器、框模型、定位

学习CSS以前总感觉是设计人员的事情，这种想法随着时间的向后推移，发现根本不是那会事，这不，赶紧找了本精通CSS看了起来，也从中学到了不少东西。
我把关键的部分也记录下来，方便自己，方便大家！

页面导航：
高级选择器：子选择器 | 相邻同胞选择器 | 属性选择器
框模型：正确的框模型 | 空白边叠加
定位：相对定位 | 绝对定位

1、高级选择器
1.1子选择器

子选择器的一个小例子代码片断
#nav > li
{
    border:1px solid #ccc;
}

<ul id="nav">
<li>home</li>
<li>services
<ul>
<li>Design</li>
<li>Consultancy</li>
</ul>
<li>Contact Us</li>
</ul>

 外层外表中的列表项均有一个边框，而嵌套列表中的列表项没有。
注意：在IE6或更低版本中，不支持子选择器，可以使用通用选择器模拟子选择器的效果。使用通用选择器覆盖子元素的后代上的样式来实现

IE6模拟实现的效果（我没试成功）
#nav li 
{
    border:1px solid red;
}
#nav li *
{
    border:0px solid red;
}

1.2相邻同胞选择器
adjacent sibling selector可用于定位同一个父元素下某个元素之后的元素。IE6或更低版本同样不支持，所以在实际的运用中，大家更喜欢为这一个要特殊设置样式的元素重新设置样式

1.3属性选择器
1.3.1元素中含有某个属性
可以根据某个属性是否存在或包含一个值来寻找元素，可以实现强大的效果。属于CSS2 ，IE6或更低版本不支持。但是感觉还是有必要介绍一下
<abbr title="Cascading style Sheets">CSS</abbr>
在支持CSS 2.0的浏览器中，当鼠标放到abbr上时，会显示这个帮助提示，但是如果想让它更醒目一些，如，对具有title属性的元素应用与其他元素不同的样式，以显示出来它有提示
abbr[title] {border-bottom:1px  dotted #999;}
abbr[title]:hover{cursor:help;}
在这个例子中，FF支持的比较完美，IE7一般情况下是可以的，如果abbr后面没有内容，可能下划线不会显示出来（待定，我测试的结果），IE6不支持。

1.3.2元素中的这个属性值等于特定值

元素中某一属性值等于特定值的例子片断
a[rel="abc"]
{
    background-color:#ccc;
    padding-left:20px;
}

<a href="http://www.cnblogs.com/bit-sand" rel="abc">cnblogs.com</a><br />
<a href="http://www.baidu.ocm">baidu</a>

cnblogs链接会有背景，而下面这个没有

1.3.3元素中的这个属性值含有这个值

Code
a[rel~="abc"]
{
    background-color:#ccc;
    padding-left:20px;
}

<a href="http://www.cnblogs.com/bit-sand" rel="I am abc !">cnblogs.com</a><br />
<a href="http://www.cnblogs.com/bit-sand" rel="I am abc!">cnblogs.com</a><br />
<a href="http://www.baidu.ocm">baidu</a>

1.3.4元素中的这个属性值以这个值开头

Code
a[rel^="abc"]
{
    background-color:#ccc;
    padding-left:20px;
}
<a href="http://www.cnblogs.com/bit-sand" rel="abcsdfdsfsd !">cnblogs.com</a><br />
<a href="http://www.cnblogs.com/bit-sand" rel="I am abc!">cnblogs.com</a><br />
<a href="http://www.baidu.ocm">baidu</a>

这个东西在链接上面比较有用，可以分辨出来这个链接中转向哪里的，设置不同的属性，可IE6不支持！现在有点越来越看不起IE6了，~~~

1.3.5元素中的这个属性值以特定词结尾

Code
a[href$="bit-sand"]
{
    background-color:#ccc;
    padding-left:20px;
}

<a href="http://www.cnblogs.com/bit-sand" rel="I am bit-sand">cnblogs.com</a><br />
<a href="http://www.baidu.ocm">baidu</a>

这个东东也非常有用，在用户体验上面，如果下载的文件是doc格式的，或者pdf格式的，我们就可以根据不同的格式设置不同的样式，用户感觉是不是非常好呀？可IE6仍然不支持。

关于选择器的用法我就了解这么多，如果您有什么意见或想法，在下面一起讨论。。。

返回顶部         

2、框模型需要注意的地方
2.1正确的框模型
在CSS中，width和height指的是内容区域的宽度和高度。增加填充、边框和空白边不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
举个例子：假设框的每个边上有10像素的空白边和5像素的填充，如果希望这个框达到100像素宽，就需要将内容的宽度设置为70像素（标准是这样的，如果浏览器不按规则出牌，我们也没办法，IE6就是这样）
注意：IE6的Width不仅仅包括内容的宽度，还包括填充和边框宽度。
解决方法：目前最好的解决办法就是回避这个问题，也就是，不要给元素添加具有指定宽度的填充，如果必须为指定宽度的元素添加填充，则尝试将填充或空白边添加到元素的父元素或子元素。
2.2空白边叠加
当两个垂直空白边相遇时，它们将形成一个空白边，这个空白边的高度等于两个发生叠加的空白边的高度中的较大者。
这个叠加可以发生在：

1. 元素的顶空白边与前面元素的底空白边发生叠加
2. 元素的顶空白边与父元素的顶空白边发生叠加
3. 空元素，在没有边框或填充的情况下，顶空白边与底空白边发生叠加
4. 空元素中已经叠加的空白边与另一个空元素的空白边发生叠加

返回顶部      

3、定位
3.1相对定位
相对定位可以这么理解：如果对一个元素进行相对定位，它将出现在它所在的位置上，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。
3.2绝对定位
相对定位实际上被看作是普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。而绝对定位使元素的位置与文档流无关，故不占据空间。
绝对定位的元素的位置相对于最近的已定位祖先元素。由于它与普通流（文档流）无关，故有可能存在覆盖的问题，通过设置z-index属性来控制这些框的堆放次序。
注意 ：相对于相对定位的祖先元素对框进行绝对定位，在大多数浏览器中实现的很好。但是IE6及其更低版本有一个bug。如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置，需要确保相对定位的框已经设置了尺寸，如果没有，则会相对于画布定位这个位置。

解决方法：解这个Bug的原因在于相对定位的元素没有获得IE/Win的内部hasLayout属性。它们不创建新的定位上下文，所有绝对定位无素相对窗口进行定位。一种解决方法是为容器上显式的设置Width和Height。如果不知道容器的Width和Height的话，可以用Holly招数为容器提供一个任意的高度，让容器拥有此布局。

 

对于IE6一些常用的解决方案是将position属性设置为relative，将display属性设置为inline，或者设置宽度或高度尺寸，就可以修复许多Bug。

4、断行处理

1，word-wrap:是控制换行的。
normal：正常情况；
break-word：将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，FF不起作用。. 必要时会触发word-break。

2，word-break:是控制是否断词的。
normal：默认情况，英文单词不被拆开。 好像是只对Asian text起作用。
break-all：是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题，对FF不起作用。
keep-all：是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）

总结如下：
ie下：
    使用word-wrap:break-word;所有的都正常。
ff下：
    如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。

为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（仅指IE），但这样做笔者认为无意义。　　
对于长串英文，就是恶意的东西（并不是所有的都是这样），自然不用去管了。但是，也要想些办法，不让它把容器撑大。
用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。

所以，综上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下，长串会被遮住部分内容。