关于css浮动、清除浮动、css精灵、滑动门的一些知识

1、CSS 浮动

概述

网页中有很多布局效果，标准流没有办法完成，可以利用浮动改变元素默认的排列方式，

浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】（只能左或者右），直到遇到父元素的边界或另一个浮动元素【停止】

浮动属性

• float

  • left 左浮动 【从左向右排】

  • right 右浮动 【从右向左排】

  • none 不浮动(默认值)

  div{
  /* float:right;
  float:none; */
  width: 100px;
  height: 100px;
  }
  .box{
  background-color: red;
  }
  ​
  .box2{
  background-color: green;
  }
  .box3{
      background-color: blue;
  }

  <div class="box"></div>
  <div class="box2"></div>
  <div class="box3"></div>

浮动的基本特性

• 可以使块元素在一行排列

• 脱离文档流 【不再占原来位置】

• 提升层级【浮动元素会覆盖普通元素】

文档流

• 所有可见元素在文档中排列占位称为文档流

标准流（普通文档流）

• 块元素从上向下排列

• 行内元素从左向右排列

浮动的问题（为什么要清浮动）

• 子元素浮动导致父元素高度塌陷 （背景、边框无法正常）

• 影响之后元素的布局

清浮动的方法

解决浮动问题即清除动的方法

• 父元素固定高度法

  • 描述：给浮动元素的父元素固定高度

  • 缺点：不够灵活

• 父元素overflow方法

  • 描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现

  • 缺点：可能会隐藏内容或触发不需要的滚动条

• 额外标签法

  • 描述：在浮动元素的【最后】，父元素之内，加一个空【不浮动块元素】，且添加样式【clear:both】;

  • clear属性说明

    • 作用：清除浮动

    • 取值

      • left 清除左浮动

      • right 清除右浮动

      • both 清除左、右浮动

      • 提示通常使用both,

  • 缺点：代码冗余，影响代码可读性

• 伪元素:after清浮动

  • 伪元素：after介绍

    语法：.box:after{ content:"123";}

    • 表示在元素内部的最后位置生成一个内容是123，默认以行内形式存在

  • 描述：给浮动标签的父标签添加 .clearfloat

    .clearfloat:after{           
              content:"";
              display: block;
              clear:both;
   }

  • 优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用

浮动特性总结

• 脱离文档流

• 提升层级

• 对块元素的影响

  • 使块元素在一行排列

  • 未定宽度的块元素适应内容

• 对行内元素的影响

  • 生成了一个块级框即 （1）支持宽高 （2）支持垂直方向的margin,padding （3）支持行高、text-align等文本属性

• 浮动包含浮动子元素高度不塌陷

• 浮动不会出现margin值塌陷

• 浮动脱离文档流不脱离文本流 （引起文本绕排）

浮动特性应用实例

应用实例-----图文绕排

• 总结：浮动脱离文档流不脱离文本流

• 扩展了解： 最初只用于在成块的文本内浮动图像， 现在它已成为在网页上创建多列布局的最常用工具之一

应用实例-----两列自适应

• 实现要点：单列定宽，单列自适应

• 浮动实现

  • 说明： 左侧列固定，左侧浮动，右侧列使用margin-left预留位置。 右侧列固定同理

  • 代码演示

2、CSS 精灵（雪碧图、精灵图）

概述

css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就 是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置

精灵图的原理

• 将页面中的背景图合并成一张图片

• 利用背景属性，使不同元素显示图片的不同部分

实现步骤：

(1)通常要限定容器大小

(2)图片拼合

(3)背景定位

优缺点

优点

（1）减少网页的 http 请求，从而大大的提高页面的性能； （2）图片命名上的困扰； （3）更换风格方便。

缺点

（１）必须要限定容器大小 （２）需要计算位置。

- 应用场景：适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。

3、滑动门（不常用）

概述：

为了使特殊形状的背景使能够自由拉伸滑动，以适应元素内部的文本内容，出现了CSS滑动门技术。 最常见于各种导航栏的滑动门

实现要点

• 利用css精灵(主要是北京图的位置)和盒子padding撑开宽度，以便能适应不同字数的导航

实现步骤

• 先给一个a标签，用来装北京图的左边背景，a不给宽度，有文字撑开宽度，在a里面包含一个span盒子

• span盒子还是用之前的背景图，但是装背景图的右边背景，字写在span里面，此时span又是属于a的

• 里面装上字就会把他的宽度撑开

关于PS的一些快捷键：

ps切图：

选择切图工具----》选择要切图形-----》ctrl+alt+shift+s 保存

ctrl+n 创建画布--》将图标放入画布，使用移动工具移动到合适位置

F7调出图层面板---》关闭背景图层

思维导图：