DIV学习笔记.doc

float属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局方式，我们的大部分div布局基本上都通过float的控制来实现布局float的可选参数为：none/left/right 清除浮动。如class是设置标签的类 id是设置标签的标识 class属性用于指定元素属于何种样式的类。 如样式表可以加入 .baobaocolor:lime;background:#ff80c0使用方法：class=baobao id属性用于定义一个元素的独特的样式。如一个CSS规则#binbinfont-size:larger使用方 法：id=binbin id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆； class是一个样式，可以套在任何结构和内容上，就象一件衣服； 概念上说就是不一样的： id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。 id属性是定义标签的名字，这样javascript就可以利用id来调用标签的其他属性了，class是定义改标签的CSS样式的。 绝对定位使用position属性来实现。position用于设置对象的定位方式可用值：static/absolute/relative对页面中的每一个对象而言，默认position属性都是static。如果将对象设置为position:absolute，对象将脱离文档流，根据整个页面的位置进行重新定位。当使用此属性时，可以使用top,right,bottom,left即上右下左四个方向的距离值，以确定对象的具体位置，看如下CSS：新的元素ul，在导航之前，先简要了解一下ul元素。ul是css而已中使用得很广泛的一种元素主要用来描述列表型内容，每一个表示其中的内容为一个列表块，块中的每一条列表数据用来描述display:inline-block简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但是这个属性目前不是所有的浏览器都支持，只有Opera和Safari支持，FireFox3和IE8据说将会支持，Firefox2和IE使用特殊办法可以实现这种效果，下面就来探讨一下在Firefox2中有-moz-inline-stack和-moz-inline-box实现，但是这两个私有属性在某些情况下都会有异常，具体如下：1、display:-moz-inline-stack“当它所应用的外包装器（wrapper）的display为inline的时候，它所包含的a或button将无法点击或无法选取，需要通过position:relative还hack掉这个bug”-乌龙茶2、display:-moz-inline-box使用这一属性后，text-align就会出问题，必须使用Firefox的私有属性 -moz-box-align来解决所以，建议不要使用-moz-inline-box，还是使用-moz-inline-stack在IE（以下IE8除外）下，如果对内联元素，比如a或span元素，使用inline-block属性是有效的，似乎IE是支持的，其实是触发了IE的layout，从而拥有了inline-block属性的表症。这样我们就有了一种在IE下实现display:inline-block效果的两种方法：1、先用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（原理：这是IE的一个经典bug，如果先定义了display:inline-block，然后再设置display回inline或block，layout不会消失），代码如下：div display:inline-block;div display:inline;2、直接让块元素设置为内联对象(display:inline)，然后通过zoom:1触发块元素的layout，代码如下：div display:inline; zoom:1;那么为了能够让所有浏览器支持display:inline-block，综合一下，最终的实现代码如下（参考怿飞：模拟兼容性的 inline-block 属性）：display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持，另一方面下触发IE下inline 元素的 hasLayout*/display:-moz-inline-stack; /* Firefox 的私有属性，需要时还必须用到position:relative解决上面提到的bug */zoom:1; /*同样是IE 下触发 hasLayout*/*display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/*扩展一下一些其他可能用到的属性*/text-indent:-9999px;*text-indent:0;font-size:0;line-height:0; /* 如需隐藏文字，可用这四个属性 */*另外上面隐藏文字，还可以用更简化的方法：line-height:超级大值;font-size:0; */overflow:hidden; /* 隐藏溢出的内容 */vertical-align:middle; /* 行内垂直居中，针对 Opera 比较大的偏离 */width:？px; /*？为任意非auto值*/height:？px; /*？为任意非auto值*/margin是外部距离，而padding则是内部距离 那么前面就没有小圆点。list-style:none，这一 句是取消列表前点，因为我们不需要这些点。margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。 clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/rightdiv ul li 的嵌套顺序 就是的三角关系。我的经验就是在最外面，里面 是，然后再是，当然里面又可以嵌套什么的，但是并不建议你嵌套很多 东西。当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是里面放，而不 用的时候，你会发现你的间隙十分难控制，一般情况下，IE6和IE7会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前 面的内容又空了很大一块，出现这种情况虽然你可以改变IE的Margin，然后调整Firefox下面的Padding，以便使得两者显示起来得效果很相 似，但是你得CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。具体嵌套写法遵循上面得嵌套方式， 然后在CSS 里面告诉 ul Margin:0px;Padding:0px;list-style.:none;，其中list-style.:none是不 让标记的最前方显示圆点或者数字等目录类型的标记，因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手 脚，你的IE6、和IE7、Firefox显示出来的东西(外距，间距，高度，宽度)就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的 差别，但那已经很完美了，不需要你通过调整大片的CSS来控制它们的显示了，你愿意，你可以仅仅兼容一两个地方，而且通常这种兼容可以适应各