CSS基础学习——定位与与元素的显示与隐藏 案例

一.定位

  1》为什么需要定位

     当标准流和浮动无法实现时，定位就是将盒子中定位在屏幕中的位置不动

 2》定位组成

     定位= 定位模式+位偏移

     定位模式：指定元素在文档中的定位方式，通过position属性实现，下面为其职

                    （static： 静态定位   relative ：相对定位  绝对定位：absolute  固定定位：fixed ）

     边偏移：决定元素的最终位置，有top bottom left right

     

3》定位模式的四

     2. 相对定位：

        元素移动位置是相对于自己本身的位置来说的，而且不脱标保留了他原先的位置。

        

  3.绝对定位（absollute）

      移动位置以他的祖宗为基准

      注意：

           如果父元素没有定位或者没有父元素，则以浏览器为基准  

           绝对定位会以最近一级有定位的为基准

           绝对定位会脱标，不占用原来的位置

4.子绝父相的由来：

     儿子绝对定位，父亲相对定位

      

5.固定定位（fixed）

    固定在浏览器的可视区的位置，多用于广告

    特点：与父元素没有关系，不随滚动条的滚动而滚动，脱标（可将其看成一种特殊的绝对定位）  

   选择器 {position:fixed;}

6.固定定位到版心得一半（绝对定位可实现居中）

   1》left:50%;

   2》margin-left:版心的一半

   position: fixed;
   left: 50%;
   margin-left: 版心的一半

7.粘性定位

   选择器 {  position：sticky;top:10px}

   以浏览器可视窗口为准，占有原先位置，必须有top bottom left right其中一个才有效  ，与页面滚动搭配使用  

8.定位叠放顺序 z-index

   定位布局是可能会出现盒子重叠的情况，则可用z-index来选择谁在上面

   

  默认为auto:0,数值越大盒子越靠上，只有定位用到

9.定位特性

  1》 行内元素加了绝对定位或相对，则可以直接设置高度和宽度

  2》块级元素添加绝对或相对定位，若不给高度和宽度，则默认文字内容大小则为盒子高度和宽度

  3》浮动只会压住标准流的盒子，但是不会压住标准流盒子里面的文字

  4》绝对定位会压住标准流的所有内容

 二. 元素的显示隐藏

    1》display属性

      display:none  // 隐藏元素
      block : 　CSS1　块对象的默认值。用该值为对象之后添加新行，显示对象
      none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

  2》visibility属性

     inherit : 　继承上一个父对象的可见性
     visible : 　对象可视
     hidden : 　对象隐藏（ 与display属性不同，此属性为隐藏的对象保留其占据的物理空间。）
     collapse : 　主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于                   hidden。IE5.5尚不支持此属性。

  3》overflow属性（溢出隐藏）

     visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。
     auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
     hidden : 　不显示超过对象尺寸的内容
     scroll : 　总是显示滚动条
     示例：
        body { overflow: hidden; }
        div { overflow: scroll; height: 100px; width: 100px; }
       对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，           scroll或者 ，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置         而定）的单元格。
 三.显示与隐藏案例