CSS基础学习——浮动

一. 浮动

    1.传统网页的三种布局方式

      1》标准流

            标签按照规定好的默认方式排列

            块级元素独占一行，从上向下顺序排列    常用元素：div hr,p,h1~h6,ul,ol,dl,form,table

            行内元素会按照，从左到右顺序排列，碰到父元素边缘会自动换行 常用元素:span a i em 等

       2》浮动：标准流无法完成的布局效果，可以用浮动来完成布局，浮动可以改变元素标签默认的排列方式。

             多个块元素纵向排布找标准流，横向排列找浮动

      3》 定位

  2. 浮动（float）

         

        

    1》浮动特性

         特性：浮动脱离标准流控制，移动到指定位置（脱标）

                    浮动之后不保留原先位置

                    都设置浮动特性的盒子，在同一行显示，顶端对齐

                   

                    不管原先是什么元素，添加浮动特性会具有行内块元素的特性

                    块级元素未设置宽度，默认宽度与父亲一样，添加浮动提醒后，大小根据内容决定

                    浮动的盒子中间没有空隙

     2》浮动元素与父元素搭配使用

         约束浮动位置，先用标准流排列上下位置，之后内部元素采取浮动排列左右位置

         

   3》浮动布局特点

         先用标准流排列上下位置，之后内部元素采取浮动排列左右位置

         浮动盒子只会影响浮动后面的盒子

3. 清除浮动

    父盒子不给高度，后面添加浮动会导致父元素高度为零进而影响后面的高度

    浮动元素不占有原文档位置，对排版产生影响

    

    语法：（闭合浮动）

    

  方法：

     

   1>.格外标签法（闭合浮动：只在父盒子内浮动，不影响外面的盒子）

        

    最后添加的标签只能是块级元素

     

  2>.父级添加overflow

    

  3>.父级添加:after伪元素

     .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

     .clearfix { *zoom: 1; }

     直接用此代码即可，给父级添加一个类名.clearfix

  4>.父级添加双伪元素的方法 

 .clearfix:before, .clearfix:after {
    content: "";
    display: table;
  }

 .clearfix:after {
    clear: both;
  }

 .clearfix {
    *zoom: 1;
  }

    与方法三使用方法相同

二.PS切图

  1》.常见的图片格式

     jpg:色彩保留程度高，产品的图片经常使用

     gif:最多储存256色，实际用于一些图片小动画

     png:结合了GIF和JPG的优点，如果想要切透背景透明的图片，选择它

     PSD:PS的专用格式，可以直接从图片上复制文字，还可以测量大小距离

 2》PS切图

   1. 图层切图

    

    

   2.切片切图

      

  3.PS插件切图

     

三.学成在线案例

   1.CSS书写顺序

 

 2.导航栏注意点