Day 4

定位

移动和定位有什么区别？

• 移动是真的移动，定位只是改变了位置，再次打开的时候就是新的位置
• 移动最好的提现方式就是动画

几种定位方式：可以设置几个正方形演示，容易理解

• 固定定位：根据浏览器的窗口（边缘）进行定位

  • position：fixed；说明方式

  • right：100px；至少要有一个水平设置（也可以left）

  • top：200px；和垂直方向设置（也可以用bottom

    • 上下左右的距离指的是离上下左右边的距离，而不是移动的距离

  • 相对浏览器边缘固定，意味着窗口滚动时也不会变化，常用于侧边导航栏，所以才叫固定定位

    • 所以也是脱离了正常的文档流

  • <style>
    img{
                position: fixed;
                right: 50px;
                top: 70px;
            }
    </style>
    

• 相对定位：

  • position：relative；
  • right：100px；right的意思和固定定位的一样，是距离自己原来的右边100px，也就是往左移动100px
  • top：200px；同上
  • 相对是相对什么呢？是相对自己原来的位置进行定位
  • 但是定位的时候可以发现，原来的位置还是占据着。，不会脱离正常的文档流

• 绝对定位：

  • position：absolute；
  • 虽然是绝对，但实际上是相对于设置了定位的父元素或祖先元素进行定位
    • 会一层层往上找，直到找HTML根为止，所以如果父元素都没有设置定位的话，就相对于HTML定位
  • 绝对定位会脱离正常的文档流的。而且由于必须根据设置了定位的的元素来定位，所以一般会给父元素设置一个相对定位，
  • 和固定定位不一样的话，如果上下滚动窗口的话是会变化的，而固定定位就不会变
  • 关于对定位距离的理解，如果（相对于父元素）移动的距离太大的话，要考虑反向思考

• 静态定位（默认情况，不做定位）

• 粘性定位（不多用，了解即可）

定位的层级

• 属性z-index：1（默认都是0，越大层越在上面
  • 当两个定位定位到同一个位置的时候，就会有层级的概念

项目·做一个500x2000的纯色背景图，放上一张图片（100x100），并定位到背景图的右下角.再做一个右侧回到top按钮

动画

要点：要设置的元素中，设置animation属性，然后再设置新的关键帧选择器

<style>		
.animation{
			width: 100px;
			height: 100px;
			background-color: orange;
			animation: test 1s;综合设置名称和时间周期
		}
		
		@keyframes test{	这里的名字替换成上面动画的名称，比如这里的是test
			from{
				transform: translate(0,0);
			}
			to{
				transform:translate(200px,200px);
			}
		}
</style>

那如果想要三次变化（多段动画）怎么设置呢？

<style>
@keyframes test{
				0%{
					transform: translate(0,0);
				}
				33.3%{
					transform:translate(200px,0px);
				}
				100%{
					transform:translate(200px,200px);
				}
</style>				

具体的属性设置：

• animation-name：XXX；设置动画名称

• animation-duration：ns；设置动画的时间周期

• animation-time-function：ease；默认ease，这个和移动一样可以设置贝塞尔曲线

  • 贝塞尔曲线还可以设置弹性的效果

• animation-delay：ns；设置动画的延迟生效时间

• animation-iteration-count：n；设置动画的循环次数

  • 也设置无限循环infinite

• animation-direction：alternate；设置动画的运动方向，默认normal

  • alternate：第奇数次是正常方向，偶数次反方向，也即往返效果
  • reverse：反方向运动
  • alternate-reverse：第偶数次是正常方向，奇数次反方向

• animation-fill-mode：使得动画保留最后一帧的效果，不会再回到开头

  • 也就是运动一次之后就停住

综合项目·做一个八个小圆点一闪一闪组成的loading“加载图”

思路：其实并不是真正旋转，而只是每个点在“重复变化”，再加上一点延迟，就有一种在旋转的感觉。想象核弹起爆器的自检灯的场景。

难点：

• 如何画圆？

  • 圆角属性

• 如何将八个小圆点排成圆？

  • 定位
  • 旋转

• 如何选择到每一个小圆点？

  • 选择器

• 如何产生变化？

  • 动画

• 如何表现变化？

  • 一闪一闪暗灭暗灭，不就是透明吗

项目进阶·圆点的变化不仅是亮灭，还有样式的变化放大缩小、颜色

帧动画animation：steps

给你一张画着每一帧画面竖着（横着）排列的图片，如何变成动画？

• 为什么放在一张图片而不是每帧一张？
  • 我猜测，一是避免创建多个div，二是放太多图片也命名什么的也有点麻烦
• 创建一个div设定每一帧画面的宽高，然后加上边界，当作一个展示窗，然后这个div设置这张图片为背景图。让图片从上往下移动。
• 但如果还是按照之前的移动来思考的话，会遇到一个问题。就是窗口里出现两帧画面一上一下的时候，因为这个是线性变化的，不管你怎么调节贝塞尔曲线都没用。
  • 这时候就要用到animation的steps（帧数）
  • 使得这一帧画面可以停留一段时间，而不是线性的过渡到下面的另一帧画面

字体图标

为什么不用图片？

• 图片占用带宽较高
• 图片多数像素固定，放大会失真
  • 字体图标都是矢量的不会失真
• 图片不好改颜色，例如鼠标放上去的变化（如apple官网的首页苹果图形
  • 字体图标可以通过文字属性来改变样式

素材可以到icon font字体图标库查找

字体图标引用的三种方式

• Unicode引用
  • 最原始但是也最兼容（甚至可以IE6）
  • 缺点只能使用单色图标
  • 使用方法：（方法在下载icon font会有说明）
    • 声明字体名称
    • 定义字体样式（这个可以自定义）
    • 添加要使用字体图标的元素的类为样式的类
  • 如果将素材文件放到别的目录，记得改声明的路径
• font-class引用（目前常用）
  • 相比Unicode的编码更容易理解，不需要去记编码
  • 替换图标只需要替换类名即可
  • 缺点还是只能使用单色图标
  • 使用方法：（方法在下载icon font会有说明）
    • 引入css文件
    • 这时候只要将要用到的元素添加图标的类即可
  • css源码中的声明那么多路径不会错误吗？
    • 不会，这些路径只是匹配不同浏览器的兼容字体而已
    • date开头的那个，实际上就是字体文件了。。。
• symbol引用（未来的主流）
  • 但是兼容性较差（IE9），而且渲染svg的性能一般，不如png。不过现在手机电脑性能都不是啥问题了
  • 支持多色图标
  • 使用方法：
    • 引入js
    • 添加。icon类的样式
    • 按照说明获取类名应用即可
      • 获取类名是可以自动补全的

弹性布局

如果用浮动做页面的话，会有高度塌陷的问题困扰

所以就诞生了弹性布局的方式，使得页面布局更加方便更加简单

弹性容器：设置了dispaly:flex；的即为弹性容器

• 主轴方向。默认为水平（一行）方向
  • 所谓一行的意思是，如果多个弹性子元素的宽度总和大于弹性容器的宽带，那么最终会按比例压缩弹性子元素的宽度

弹性子元素：弹性容器的直接子元素即弹性子元素

<style>
    .parent{			parent元素为弹性容器
        dispaly:flex；
    }
</style>
	
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

属性：

• 主轴侧轴默认是从左上角往下往右

• 主轴的另一轴就是侧轴

• flex-direction：设置主轴排列方向

  • row从左到右（column从上到下）
  • row-reverse：从右到左
  • column-reverse：从下到上

• justify-content：flex-start；设置主轴的内容分布

  • flex-start：向主轴的开始位置靠拢（默认）
  • center：居中
  • flex-end：向主轴的结束位置靠拢
  • space-around：平均分布，两边有间距，且为中间间距的一半
  • space-between：平均分布，两边没间距
  • space-evenly（新出的）：平均分布，间距也平分

• align-items：flex-end；设置侧轴的内容分布

  • 可以用来设置弹性子元素水平垂直居中
  • flex-start：向侧轴的开始位置靠拢
  • center：居中
  • flex-end：向侧轴的结束位置靠拢
  • stretch：拉伸（默认），但如果设定了高度/宽度则无效
  • 一行的话是不用考虑侧轴分布的，因为没东西可分布

• flex-warp：wrap；设置允许换行

  • 默认nowarp，所以默认是只有一行的

• align-content：center；设置多行内容的侧轴分布

  • flex-start：向侧轴的开始位置靠拢
  • center：居中
  • flex-end：向侧轴的结束位置靠拢
  • space-around：平均分布，两边有间距，且为中间间距的一半
  • space-between：平均分布，两边没间距
  • space-evenly（新出的）：平均分布，间距也平分

• flex：n；设置剩余空间的n份/占比

  • 剩余空间指的是其他元素设置了宽度（高度）后，剩下的宽度（高度）

项目·写一个左中右结构的网站页面，

• 最左侧是导航（宽度为内容区的一半），中间是内容区，右边是固定的200px宽度的广告区

• order：n；设置弹性子元素的自定义的排序位置，n越大排越前

  • 默认是按照HTML页面的顺序排列的

• align-sele：center；设置侧轴单独子元素的位置

  • flex-start：向侧轴的开始位置靠拢
  • center：居中
  • flex-end：向侧轴的结束位置靠拢
  • stretch：拉伸
  • 这样就可以设置弹性子元素（三个的话）斜着排成一排了

  继承

继承默认仅继承文字相关的属性，与盒子相关的都不继承

示例：只对h1设置样式，包含盒子和文字的样式

<h1>
        <span>
            helloword
        </span>
    </h1>

在浏览器调试工具上可以看到之集成到了文字相关的属性

移动端与响应式

历史回顾：同一个h1在PC上和手机上显示，PC的正常能看，但是在手机上就显示很小。这是因为以前是直接把pc上的页面等比例缩小导致的。

现在：声明meta两个属性，在hbuildX中输入meta：vp自动补全

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

• name：viewport
• content：
  • width=device-width宽度等于设备宽度，浏览器宽度分辨率等于系统分辨率（不是物理分辨率）（这里的device-width是需要自己根据设计稿设置的还是会自动？）
  • initial-scale=1初始化比例是1
  • minimum-scale=1最小的缩放比例是1
  • maximum-scale=1最大的缩放比例是1
  • user-scalable=no不允许用户缩放

在用浏览器调试工具查看移动端模拟器的时候，会发现iPhone6/7/8的分辨率只有375*667？而实际上真机的分辨率是750*1334？

这里就有物理分辨率和系统分辨率的概念。

物理分辨率：750*1334（刚好两倍

• 例如更大尺寸的显示器分辨率一样，但是里面的字尺寸一样吗？所以为了显示成一样，那么就要用四个像素显示一个像素

系统分辨率：375*667

这么多设备，有这么多分辨率，难道每个分辨率都要画一张图？

• 显然不可能，那么怎么办呢，就是定死width宽度等于设备宽度

项目·做一个百度的移动端首页

响应式

为什么浏览器调试工具可以模拟移动端呢？用调试工具切换设备后，刷新，是因为模拟发送了一个user-angent为手机的请求（在network的www.baidu.com中的header上可以看到。

但是响应式页面，不需要刷新就能切换成移动端页面，说明没有发送请求，说明他本身就能适应移动端的显示。典例：苹果官网

一般情况下，一个项目会划分为pc页面和移动端页面

但还有一种情况，设计一种pc和移动端都适应的页面，如苹果官网。这是用到了媒体查询

<style>
			.d1{
				width: 25%;
				height: 100px;
				background-color: blue
			}
			
			@media only screen and (min-width:500px) and (max-width:1000px){
                width:50%（当处于这个范围内，就显示一半）
                width:100%（当小于某像素值时全部显示，也就是移动端显示的样子）
                width：33%(当大于某像素值时显示1/3，因为pc屏幕大，可以显示小一点)
    		}

大于某像素值：min-width:100设置最小值，当大于这个最小值时发生什么

小于某像素值max-width:1000px

处于某像素值范围时：(min-width:500px) and (max-width:100px)

1. 写响应式时需要注意，必须要声明移动端viewport
2. 虽然响应式可以一套兼容pc和移动端，但是也仅适用于页面结构简单的网页，复杂的页面写起来代码量大，消耗过多带宽

更多响应式网站可以直接搜索响应式网站

苹果官网

页面设计思路：

0.分析页面结构

1.写结构

• .nav>a*10
  • a标签做页面跳转

2.写样式

导航栏(创建图片链接)

0.分析导航栏结构

1.写结构

• .nav>a*10
  • a标签做页面跳转

2.写样式

• 观察布局，平均分布，可以用弹性布局来写

  • 主轴水平分布
  • 侧轴（垂直）居中

• 如果要写响应式，要加上viewport

• 初始化

  • *{
                margin: 0;
                padding: 0;
            }
    

  • 清除a标签默认属性(下划线)

• 设置宽高颜色透明度（用F１２来看）

• 设置a标签宽高

  • 为什么这里能设置宽高?因为这是弹性子元素,所以可以设置
  • 如何设置图片链接?
    • 设置background-image:url()
    • 例如苹果图标,这里会遇到一个问题,会出现很多个重复的苹果
      • 要设置background-repeat:no-repeat
    • 然后又发现图标跑到最左边了
      • 那么又要设置background-position:center;

• 设置响应式

  • 问题,缩小后,导航栏新增一个菜单按钮,只剩下苹果图标在最中间,最右边是购物车按钮
    • 而且展开菜单按钮还会变成X按钮收起菜单
  • F12看菜单按钮,发现他是一个两条横线组成的,X按钮就是这两条横线旋转
  • 如何在正常的时候不显示菜单按钮呢?以及如何隐藏其他图片链接呢?
    • 正常的时候:display:none
    • 然后@media响应式的时候,在显示出来,其他的则隐藏
      • 怎么判断一个要显示,一个要隐藏呢,那就需要进行判断了,怎么判断?当然是根据选择器
      • 所以@media时要用选择器,对不同的元素进行设置
  • 缩小后,三个图标平均分布,两边是没间距的
  • 注意,缩小后购物车的位置变化了,如何表现这种变化?
    • 这还是@media之后的事情,调整顺序呗,弹性子元素的顺序调整
  • 点击菜单按钮展开页面如何做到,还有两条横线变成交叉
    • js的点击事件
    • 还有就是checkbox的label也能有这种效果

• 设置点击按钮展开的页面

  • 分析结构为上下结构(搜索框和其他链接)
  • 占据整个页面,设置width:100%;height:100%?
    • 这样不行,因为父元素没有整个窗口(是这原因吗?
    • 要用到vw和vh单位,width:100%vw;height:100%vh,这样就是占据整个窗口了
    • 还需要定位,这里就可以固定定位
      • 然后又发现一个问题,被这个页面全部覆盖了!!!
        • 这就又涉及到层级了
  • 下部分结构时弹性垂直主轴布局,但是设置了下半部分为垂直主轴,但这些连接文本还是水平分布的?
    • 因为弹性子元素是直接子元素,对孙子元素不起作用
  • 搜索框为水平结构的左右两部分,搜索图标和搜索框组成
    • 需要改变默认搜索框的样式
    • 搜索框厦门还有横线
  • 注意苹果的展开效果

banner图

0.分析接结构

• 上下结构,两个a标签和两个小尖括号

1.写结构

2.写样式

• 注意如何设置两个a标签水平放置
• 注意hover有下划线

banner图(水平多副图)

注意:一行一幅图片和一行两幅图片最好不要放到同义容器

要么一个容器里的都水平,要么就都水平,例如品字形图片排列

可以先一个大的容器上下,然后下面的再水平