CSS学习笔记(3)

36、如果想让多个块显示在同一行中，可以将这些块设置成浮动，并且浮动方向相同。

37、清除浮动

      当元素有浮动属性时，会对其父元素或者后面的元素产生影响，会出现一个布局错乱现象，可以通过清除浮动的方法来解决，

浮动元素的影响

      浮动的清理(clear)：

          none：默认值。允许两边都可以有浮动对象

          left：不允许左边有浮动对象

          right：不允许右边有浮动对象

          both：左右两侧不允许有浮动对象

38、浮动浮动，先浮后动，浮动的对象，会先漂浮起来，离开原来的位置。后动，就是它后面的对象，会向它原来的位置上，动起来。

39、当父元素没有指定高度时，并且它的子元素有浮动时，父元素的高度不会自动增加。

40、清除浮动的方法

      1）、额外标签法：

            这种方法应该说是最简单的一种了，W3C建议在容器的末尾增加一个"clear:both"的元素，强迫容器适应它的高度以便装下所

       有的float元素。缺点：会增加代码。

             <div id="main">

                  <div id="left">左盒子</div>

                  <div id="right">右盒子</div>

                  <div class="clear"></div>  增加一个空div

            </div>

            <div id="footer">底部</div>

      2）、父元素使用overflow的方法：

           通过设置父元素overflow值设置为hidden，是最简单的清除浮动方法，但如果子元素使用了定位布局，就会很难实现

           *{margin:0padding:0;}

           #main,#footer{margin:0 auto;}

           #main{width:800px;background:#CCC;overflow:hidden;zoom:1;position:relative;}

           #left{width:200px;height:200px;background:blue;position:absolute;left:-100px;top:100px;}

           #right{width:300px;height:300px;background:green;float:right;}

           #footer{width:800px;height:50px;background:red;}

      3）、利用伪对象after方法：

          义一个类，使用伪对象after，控制浮动元素的影响。

          网上最流行的清除浮动代码：

              .clearFix:after{

                     clear:both;

                     display:block;

                     visibility:hidden;

                     height:0;

                     line-height:0;

                     content:"";

               }

            .clearFix{zoom:1;}/*解决IE6/7兼容问题*/

            zoom只有IE内核的浏览器支持，缩放比例

                 功能                                         语法

                 设置或检索对象的缩放比例      normal：默认值。使用对象的实际尺寸

                                                                  number：百分比|无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性

                                                                                 的normal值

                                                                   zoom：1解决IE6高度自适应问题

41、CSS中溢出的使用

      功能 ：设置当对象的内容超过其指定高度及宽度时如何管理内容

      语法 ：overflow:visible[默认值。不剪切内容也不添加滚动条]，auto[在必需时内容才会被裁切或显示滚动条]，

                                 hidden[不显示超过对象尺寸的内容]，scroll[总是显示滚动条]

42、定位：position

      属性：position

      描述：设置对象的定位方式

      值：static  静态定位：页面中的每一个对象的默认值。

             absolute  绝对定位：将对象从文档流中分离出来，通过设置left，right，top，bottom四个方向相对于父级对象进行绝对定

                            位。如果不存在这样的父对象，则依据body对象。

              relative  相对定位：对象不从文档流中分离，通过设置left，right，top，bottom四个方向相对于自身位置进行相对定位。

      **当使用绝对定位时，必须要有两个条件

              a、必须给父元素加定位属性，一般建议使用 position:relative；

              b、给子元素，加绝对定位position:absolute；同时要加方向属性。

43、相对定位与绝对定位区别

       绝对定位是父元素为基准点，进行定位。---会脱离文档流。

       相对定位是根据其自身为基准点。----离开原位置，但还占着原来的空间。

44、在IE6中出现双倍边距时（兼容性问题），在该对象上加上display:inline; 变成行内元素可解决该问题。