DIV学习笔记.doc

float属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局方式，我们的大部分div布局基本上都通过float的控制来实现布局 float的可选参数为：none/left/right div style=clear:both;/div 清除浮动。如div?id=main?class=main_body/divclass是设置标签的类 id是设置标签的标识 class属性用于指定元素属于何种样式的类。 如样式表可以加入 .baobao?{?color:?lime;?background:?#ff80c0?}?使用方法：class=baobao id属性用于定义一个元素的独特的样式。如一个CSS规则#binbin?{?font-size:?larger?}?使用方 法：id=binbin id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；? class是一个样式，可以套在任何结构和内容上，就象一件衣服； 概念上说就是不一样的： id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。 id属性是定义标签的名字，这样javascript就可以利用id来调用标签的其他属性了，class是定义改标签的CSS样式的。  position　　用于设置对象的定位方式　　可用值：static/absolute/relative 对页面中的每一个对象而言，默认position属性都是static。 如果将对象设置为position:absolute，对象将脱离文档流，根据整个页面的位置进行重新定位。当使用此属性时，可以使用top,right,bottom,left即上右下左四个方向的距离值，以确定对象的具体位置，看如下CSS： 新的元素ul，在导航之前，先简要了解一下ul元素。ul是css而已中使用得很广泛的一种元素主要用来描述列表型内容，每一个ul/ul表示其中的内容为一个列表块，块中的每一条列表数据用li/li来描述 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-inl