浮动与定位

一   、  浮动（float）

         1.子级浮动，父级元素塌陷。（如li浮动，在ul边框之下显示，并且ul高度为0）

         2.包裹性：若浮动元素没有设置宽高，会折叠到最小宽度。

         3.元素浮动后，横向的margin叠加

         4. 浮动元素影响其他元素的位置与布局 

         5.何时使用margin和padding

              （1）margin：border需要空白距离时，空白距离不需要背景色，纵向重叠，取大值，横向叠加。

                                      margin用来隔开元素与元素之间的距离。

                                      margin用户布局，元素与元素之间互不相干。

              （2）padding：border内测需要空白距离时，空白距离需要背景色，横向纵向都叠加。

                                        padding是用来隔开元素与内容之间的距离

                                        padding元素与内容之间的间距，让内容与元素之间有一段所谓的“呼吸距离”。         

           6.displaydisplay：

                                        display：block 以块元素显示；

                                        display：none 内容消失，不占空间；

                                        display：inline 以行内元素显示；

                                        display：inline-block 对内块，对外行。

二   、 定位（position）

         1.定位 position

                 relative：相对定位，按照自己的位置移动，别且不改变布局，依旧占据空间。一般不用来独立调整位置。

                                 还可以作为absolute定位的子标签的定位基点；

                 absolute：绝对定位，脱离正常流，且不在浮动流中，不占布局空间，可堆叠，以relative的父标签的（0,0）为基点，

                                   通过调整top,right,bottom,left来移动位置。绝对定位后，可通过z-index来调整层次顺序，并且只对同级标签有用。               

                  z-index：正常流永远在最底层，与z-index无关。relative层的默认index为0；               

                  opacity：不透明度在    CSS3.0中   取值范围   0~1