代码改变世界

CSS 必知的7个知识点

2012-04-13 13:52  @影子@  阅读(2691)  评论(8)  编辑  收藏  举报


无敌的老公昨天给俺进行了一堂css的培训~~哎，为神马老公啥都知道，我神马都不懂，自愧不如啊~~555

好记性不如烂笔头，遂在此一一总结。本人小菜，从最基础的内容开始。

1、width是个雷

　　很多页面要求宽度自适应，那么width设百分比吧，否则块元素很容易变成粘着不走的狗皮膏药
　　当没有定义元素宽度时，浏览器撑满整行，实际上执行的是width：auto，宽度自适应。

2、IE6不认识min-height

　　解决办法就是_height，有时候明明不需要可变高度，如果喜欢没原则的min-height，那么记得用_height对付下IE6这个屌丝。

3、float和clear

　　float和绝对定位都会破坏正常的文档流，正常流自上而下，而float是一个自左而右或者自右而左的流。

　　clear仅仅是针对上一个浮动元素而言，如果上面没有元素浮动，那么你要清除啥呢？

　　所谓清除浮动，个人认为就是相对于上一个浮动元素，另起一行。

4、position的relative和static的区别

　　relative是相对于自己普通流所在位置的定位，而static是文档普通流，即文档流的默认情况。

　　一般情况，relative跟随top和left两个值，当然也可以用right和bottom，但切记，一切都是相对于自己的普通流。

　　如果将 position 设为 relative , absolute 或 fixed,那么元素会覆盖没有设置 position 属性的元素，姑且把static当没设position吧。

　　这说明层级关系中position的权重是较高的。当然如果position有z-index，z-index高的优先，否则，设置了position的比没设的高，

　　再然后，如果没设position，则按文档流顺序，位于后面位置的元素会覆盖前面的元素。

5、z-index和overflow

　　用z-index 属性设置元素的堆叠顺序。那么拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

　　不过z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时有用哦。

　　当正常流溢出时，可以选择overflow的scroll或者hidden属性。

　　什么是溢出？比如父级元素定义的高度是100，子级元素定义的高度是150，这撑不住的50就是溢出。

　　所以溢出只出现在子级元素溢出父级元素的情况。一般想解决溢出问题 就只要在父级元素上加一个overflow属性。

　　兄弟元素之间按照正常的普通的流走不会出现溢出的情况，但当子级元素relative时候，也会出现覆盖，但这已经脱离了溢出的管辖范围。

      当然父级的overflow对因relative而溢出的子级元素同样有效。

6、IE有bug就找haslayout
　　haslayout是IE特有的属性，很多IE神奇的BUG都和haslayout有关，要记住，有些样式会触发haslayout，最常用的是zoom:1

　　下列元素默认 hasLayout=true 
　　　　<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>

　　有些属性可以触发hasLayout 
　　------------------------------------- 
　　display 
　　启动haslayout的值:inline-block 
　　取消hasLayout的值:其他值 
　　-------------------------------------- 
　　width/height 
　　启动hasLayout的值：除了auto以外的值 
　　取消hasLayout的值：auto 
　　--------------------------------------- 
　　position 
　　启动hasLayout的值：absolute 
　　取消hasLayout的值：static 
　　---------------------------------------- 
　　float 
　　启动hasLayout的值：left或right 
　　取消hasLayout的值：none 
　　--------------------------------------- 
　　zoom(IE专有属性)
　　启动hasLayout的值：有值 
　　取消hasLayout的值：narmal或者空值 
　　---------------------------------------- 
　　ie7还有一些额外的属性可以触发该属性： 
　　min-height: (任何值) 
　　max-height: (任何值除了none) 
　　min-width: (任何值) 
　　max-width: (任何值除了none) 
　　overflow: (任何值除了visible) 
　　overflow-x: (任何值除了visible) 
　　overflow-y: (任何值除了visible)5 
　　position: fixed

 

7、神奇的w3c塌陷
　　什么都不说，先看看效果吧

<style>
#a{
background-color: red;
height:130px;
width:200px;
margin-bottom: 20px;
}
#sub_a{
margin-top:30px;
background-color: blue;
height:100px;
width:150px;
}
</style>
<div id="a">
<div id="sub_a"></div>
</div>

　　这是外边距叠加collapsing-margin问题，collapsing不是浏览器bug而是W3C标准哦。请看如下这段：

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

　　在CSS中，两个或多个毗邻（父子元素或兄弟元素）的普通流中的块元素垂直方向上的 margin 会发生叠加。这种方式形成的外边距即可称为外边距叠加(collapsed margin)。

　　和我一样的菜鸟直接去研究下这篇好文章吧

 　　　　　　http://www.smallni.com/collapsing-margin/

　　避免外边距叠加，其实很简单：外边距发生叠加的4个必要条件（2个或多个、毗邻、垂直方向、普通流），破坏任一个即可。

我们主要来谈一下“毗邻”，只有理解“毗邻”的概念之后，让元素互相之间不毗邻才能元素避免外边距的叠加。

毗邻不仅仅是兄弟元素之间，也有可能在父子元素之间，元素之间的外边距叠加只有在四种情况下才能叫毗邻：

  • 一个元素的margin-top和它的第一个子元素的margin-top
    top margin of a box and top margin of its first in-flow child
  • 普通流中一个元素的margtin-bottom和它的紧邻的兄弟元素的的margin-top
    bottom margin of box and top margin of its next in-flow following sibling
  • 一个元素（height为auto）的margin-bottom和它的最后一个子元素的margin-bottom
    bottom margin of a last in-flow child and bottom margin of its parent if the parent has ‘auto’ computed height
  • 一个没有创建BFC、没有子元素、height为0的元素自身的margin-top和margin-bottom
    top and bottom margins of a box that does not establish a new block formatting context and that has zero computed ‘min-height’, zero or ‘auto’ computed ‘height’, and no in-flow children

以上4种情况之间的元素都可能会发生外边距的折叠(最后一个是元素自身)，但还要注意的是以上4种关系形成毗邻还要加一个条件：元素之间没有被非空内容、padding、border 或 clear 分隔开。