Web前端基础Day14

这是一个关于 Web前端基础Day14的思维导图，包括CSS3 媒体查询、 CSS3 弹性盒、过渡动画等。

Day14

• 1、CSS3 媒体查询
  • 1.1、概述
    • media type(媒体类型)是css2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS3的重要内容之一。 多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false 。 如果指定的多媒体类型匹配设备类型则查询结果返回 true ，文档会在匹配的设备上显示指定样式效果。
  • 样式表内引入媒体查询
    • @media 媒体类型 and|not|only (媒体特性表达式) { CSS样式； }
    • 媒体类型(media type)： all所有设备 screen 用于电脑屏幕，平板电脑，智能手机等 print 用于打印机和打印预览 speech 应用于屏幕阅读器等发声设备
    • 操作符： and(与、和) not：not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备) only： 用来定某种特别的媒体类型
    • 设备特性(media feature)： width视口宽度 / height视口高度 device-width设备宽度/ device-height设备高度 orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape
  • 2、在不同的媒体上使用不同的样式文件
    • <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
• 2、CSS3 弹性盒
  • 2.1、概述
    • Flex布局主要思想是提供一个更加有效的方式制定、调整和分布一个容器里的项目布局。 使容器有能力改变项目的大小、排列方向、对齐等，以最佳方式填充可用空间（因此可以适应设备屏幕 大小的变化）。
  • 2、基本概念
    • 容器：给元素设置display:flex | inline-flex，那么这个元素就会成为flex容器(flex container);
    • 项目：该容器下的直接子元素（亲儿子），包括 文本节点，伪元素。
    • main axis 主轴：默认主轴的方向是从左到右的（项目的排列跟主轴有关）
    • cross axis 侧轴（交叉轴）：侧轴与主轴垂直，默认情况下侧轴是从上到下的方向
    • 主（侧）轴起点：main start / cross start
    • 主（侧）轴终点：main end / cross end
    • 注意： 将元素设置为弹性盒子后，只会影响直接子元素的排列 项目身上的float、vertical-align、clear属性都会失效
  • 3、设置为弹性盒子： display：flex(块级特点) | inline-flex（行级特点）;
  • 容器属性：
    • 1、flex-direction 设置主轴的方向
      • row：横向从左到右排列（左对齐），默认的排列方式
      • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
      • column：纵向排列。
      • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
    • 2、 justify-content 弹性项沿着弹性容器的主轴线对齐
      • flex-start：弹性项目向行头紧挨着填充。这个是默认值。
      • flex-end：弹性项目向行尾紧挨着填充。
      • center：弹性项目居中紧挨着填充。
      • space-between：弹性项目平均分布在该行上,相邻项目的间隔相等。
      • space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间
      • space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等
    • 3、align-items 设置弹性盒子元素在侧轴 （纵轴）方向上的对齐方式
      • flex-start：侧轴起始位置对齐。
      • flex-end：侧轴末端位置对齐。
      • center：项目沿侧轴居中紧挨着填充。
      • baseline：基线对齐。
      • stretch：如果指定侧轴大小的属性值为auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸。
    • 4、flex-wrap 指定弹性盒子的子元素换行方式
      • nowrap  默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
      • - wrap                   弹性容器为多行。
      • - wrap-reverse     反转 wrap 排列。
    • 5、align-content 多根轴线的对齐方式
      • stretch - 默认。各行将会伸展以占用剩余的空间。
      • flex-start - 各行向弹性盒容器的起始位置堆叠。
      • flex-end - 各行向弹性盒容器的结束位置堆叠。
      • center -各行向弹性盒容器的中间位置堆叠。
      • space-between -各行在弹性盒容器中平均分布。
      • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
      • 注意：如果Flex容器没有额外的剩余空间，或者说剩余空间为负值时，justify-content 的值表现形式： flex-start 会让Flex项目在Flex容器主轴结束点处溢出 flex-end 会让Flex项目在Flex容器主轴起点处溢出 center 会让Flex项目在Flex容器两端溢出 space-between 和 flex-start 相同 space-around 和 center 相同 space-evenly 和 center 相同
  • 项目属性：
    • 1、order :定义项目的排列顺序
      • 默认是0，数值越大排列越靠后，可以出现负值
    • 2、align-self 用于设置弹性元素自身 在侧轴（纵轴）方向上的对齐方式
      • auto：为元素的父元素的'align-items'值。
      • flex-start：弹性盒子元素侧轴起始边对齐。
      • flex-end：弹性盒子元素侧轴结束对齐。
      • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。
      • baseline：该值将参与基线对齐。
      • stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸。
    • 3、flex属性
      • flex-grow 分配空白空间，默认值是0
        • 取值： 默认值是 0，表示即使有剩余空间也不扩展。 不带单位的数值。
        • 注意：当容器有剩余空间时有效。
      • flex-shrink 缩小比率，默认值是1（如果某一个元素不想缩小给0）
      • flex-basis 定义弹性盒子元素的默认基准值
        • 取值： auto默认值。 number一个长度单位或者一个百分比。
        • 注意：与width同时存在时覆盖width值参与剩余空间计算。
      • 简写: flex：flex-grow flex-shrink flex-basis; 默认值为0 1 auto。
        • 取值： 默认值为0 1 auto。 none与 0 0 auto 相同。 auto与 1 1 auto 相同。
        • 注意： 如果元素不是弹性盒对象的元素，则以上属性不起作用。
• 3、calc函数 calc() 用于动态计算长度值。
  • 3.1、概述 calc 是英文单词 calculate( 计算 ) 的缩写，是 CSS3 的一个新增的功能。 calc() 用于动态计算长度值。
  • 3.2、语法 .box { width: calc(100% - 100px); }
  • 3.3、说明 任何长度值都可以使用calc()函数进行计算。 calc()函数支持 "+" ，"-"， "*"，"/" 运算。 calc()函数使用标准的数学运算优先级规则。 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)。
• 4、过渡动画
  • 4.1、语法 指定要添加效果的CSS属性。 指定效果的持续时间
    • 例：div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; }
  • 1、transition-property 规定应用过渡的 CSS 属性的名称。
    • 常用值： all 默认值,所有能过渡的css属性都完成过渡效果 property 需要过渡宽度，就写width
  • 2、transition-duration 定义过渡效果花费的时间。默认是 0。单位是秒（s）或者毫秒(ms)
  • 3、transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
    • 常用值： ease 默认值，慢速开始---加速---慢速结束 ease-in 慢速开始 ease-out 慢速结束 ease-in-out 慢速开始，慢速结束 linear 匀速
  • 4、transition-delay 规定过渡效果何时开始。默认是 0。单位是秒（s）或者毫秒(ms)
  • 5、简写：transition: width（属性名称） 5s（过度时间） linear（时间曲线） 1s（过渡延迟时间）;