《
CSS 必知的7个知识点》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331S2013.htm
--> [
网站建设之]CSS 必知的7个常识点
好记性不如烂笔头，遂在此逐一总结。自己小菜，从最基本的内容开端。
1、width是个雷
许多页面请求宽度自适应,
CSS 常用信息速查手册，那么width设百分比吧，否则块元素很轻易变成粘着不走的狗皮膏药
当没有定义元素宽度时，阅读器撑满整行，实际上履行的是width：auto，宽度自适应。
2、IE6不意识min-height
解决措施就是_height，有时候明明不须要可变高度，如果爱好没准则的min-height，那么记得用_height凑合下IE6这个?丝。
3、float和clear
float跟相对定位都会损坏正常的文档流，正常流自上而下，而float是一个自左而右或者自右而左的流。
clear仅仅是针对上一个浮动元素而言，假如上面不元素浮动，那么你要肃清啥呢？
所谓扫除浮动，个人以为就是相对上一个浮动元素，另起一行。
4、position的relative和static的差别
relative是相对于自己普通流所在位置的定位，而static是文档普通流,
CSS 区分IE版本的三个方法，即文档流的默认情况。
个别情形，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 时有用哦。
当畸形流溢出时,
CSS 入门教程 纵向导航菜单，能够抉择overflow的scroll或者hidden属性。
什么是溢出？比方父级元素定义的高度是100，子级元素定义的高度是150，这撑不住的50就是溢出。
所以溢出只出当初子级元素溢出父级元素的情况。普通想解决溢出问题 就只有在父级元素上加一个overflow属性。
兄弟元素之间依照正常的普通的流走不会呈现溢出的情况，但当子级元素relative时候,
css sprites适用范围和css sprites的利弊，也会涌现覆盖，但这已经脱离了溢出的管辖范畴。
当然父级的overflow对因relative而溢出的子级元素同样有效。
6、IE有bug就找haslayout
haslayout是IE特有的属性，良多IE神奇的BUG都和haslayout有关，要记住，有些款式会触发haslayout，最常用的是zoom:1
下列元素默认 hasLayout=true
<table> <td> <body> <img> <hr> <,
CSS Sprites技术及图片优化;input>,
CSS Sprites技术以及图片优化; <select> <textarea> <button> <iframe> <embed> <object> <,
CSS Sprites技术;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",
CSS Sprites图片合并技术减少请求优缺点;>
<div id="sub_a"></div>
</div>,
css reset重置基础代码;
这是外边距叠加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,
CSS position属性定位总结. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
在CSS中，两个或多个毗连（父子元素或兄弟元素）的一般流中的块元素垂直方向上的 margin 会产生叠加。这种方法构成的外边距即可称为外边距叠加(collapsed margin)。 Tag：
(责任编辑：网站建设)
CSS 必知的7个知识点相关文章