Web前端基础Day06

这是一个关于Web前端基础Day06的思维导图，包含CSS 浮动、 滑动门、 CSS 精灵等内容。

Day06

• 1、CSS 浮动
  • 1.1、浮动的概念:浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。
  • 1.2、浮动属性:float left 左浮动 right 右浮动 float:none 不浮动(默认值)
  • 1.3、浮动的基本特性：脱离文档流 提升层级 可以使块元素在一行排列
  • 1.4、浮动的问题（为什么要清浮动）：子元素浮动导致父元素高度塌陷 影响之后元素的布局
  • 1.5、清浮动的方法
    • 父元素固定高度法 描述：给浮动元素的父元素固定高度 缺点：不够灵活
    • 父元素overflow方法 描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现 缺点：可能会隐藏内容或触发不需要的滚动条
    • 额外标签法 描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式 clear:both 缺点：代码冗余，影响代码可读性
      • clear属性说明 作用：清除浮动 取值left | both | right 提示通常使用both!
    • 伪元素:after 描述：给浮动标签的父标签添加 优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用 作为通用代码总结
  • 1.6、浮动特性总结
    • 脱离文档流
    • 提升层级
    • 对块元素的影响 使块元素在一行排列 未定宽度的块元素适应内容题
    • 对行内元素的影响
      • 生成了一个块级框即： （1）支持宽高 （2）支持垂直方向的margin,padding （3）支持行高、text-align等文本属性
      • 脱离文档流不脱离文本流
  • 1.7、浮动特性应用实例
    • 1.7.1、 应用实例图文绕排
      • 总结：浮动脱离文档流不脱离文本流 扩展了解：最初只用于在成块的文本内浮动图像，现在它已成为在网页上创建多列布局的最常用工具之一
    • 1.7.2、两列自适应
      • 实现要点：单列定宽，单列自适应
      • 浮动实现 说明：左侧列固定，左侧浮动，右侧列使用margin-left预留位置， 右侧列固定同理
• 2、滑动门
  • 笔记：
    • 概述： 为了使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，出现了CSS滑动门技术。最常见于各种导航栏的滑动门。
    • 实现要点 特殊背景拼合 内容自适应：浮动 ； 行内块
  • 简答：
    • 滑动门技术： 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，出现了CSS滑动门技术。 最常见于各种导航栏的滑动门。
    • 一般来说导航都是可以点击的，我们选择使用a标签 a标签：控制左半边背景的显示，padding-left撑开文字与背景盒子的左侧间距 span标签：控制右半边背景的显示，padding-right撑开文字与背景盒子的右侧间距
• 3、CSS 精灵
  • 简答：
    • 1、什么是精灵技术 英文名：css sprites 也叫做雪碧图、精灵图、css图像拼合、css贴图定位
    • 2、精灵技术的实现原理 将很多张小图片拼合到一张大图上，通过背景相关属性，例如background-image、background-repeat、background-position等将小图片正确显示到页面中
  • 笔记：
    • 概述： CSS精灵英文叫法 CSS sprites ，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中 一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”， “background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。
    • 3.1、精灵图的原理