学习总结第七周（前端基础）

页面知识补充

1.按钮

2.简写属性

通过background可同时设置所有背景相关的样式，用空格隔开

没有顺序要求，也没有数量要求，不同的样式就使用默认值

3.命名规范

页面拓展（通过写页面学到的）

1 transform

1）scale

scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

eg：scale（1.1）表示水平和竖直方向均扩大，当值小于1时，为缩小

2）translate

translate(x,y) 定义 2D 转换

以原来位置为原点，建立一个坐标系
若x为正向右移动，y为正，下移动
x和y可以设置为百分比，百分百则表示移动自身一个单位长度

2.transition

实现动画效果的延迟

1）transition all

(transition过度）all:所有的全部 
       transition:all ； 给所有过度效果（单位s）                                                                                     
       transition：all ease；（默认效果慢快慢）
       transition：all linear;（匀速变换）                                                
       transition：all ease-in;（低速开始）                                                                              
       transition：all ease-out:（低速结束）  

-webkit表示兼容性

3.伪类元素（::before和::after）

伪类元素默认是inline 元素，使用这两个元素要添加content
通过display：block来让其变成块元素，content也有加入图片的属性

4.盒模型

1）标准盒模型

总宽度=width+margin+padding+border

2)怪异盒模型

总宽度=width+margin（width已经包含了padding和border ）

5.vh和vw

视口单位，即相对于视口的单位

6.form表单

action 设置表单提交的服务器地址
method：设置提交方式，有get和post两种方式
input标签：表示表单标签的用户输入，定义不同类型的用户输入方式
type属性：type=“text” 定义单行文本输入框
type=“password” 定义密码输入框\ntype=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传文件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义一个普通按钮
元素属性设置：
name属性：设置表单元素的名称，该名称是提交数据时的参数名
value属性：设置表单元素的值，该值是提交数据时参数名所对应的值

注意：百度默认的name属性的名字为word

<form action="http://www.baidu.com/baidu" target="_blank">
						     <input type="text" placeholder="请输入内容" class="frame" autocomplete="off" name="word"/>
							 <button class="research">搜索</button>
							</form>

7.圆角(border-radius)

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同

8.渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

从上到下渐变

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

从左到右渐变

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

从左上角到右下角的线性渐变：

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

9.阴影

向 div 元素添加阴影：

div
{
    box-shadow: 10px 10px 5px #888888;
}

前两个值代表阴影相对原来位置的偏移量，第三个值表示阴影的模糊程度 第四个值表示颜色

10.相对路径和绝对路径

1）绝对路径

指文件在硬盘上真正存在的路径

2)相对路径

相对于自己的目标文件位置

3)区别

①绝对路径是一个文件实际存在于硬盘中的路径。②相对路径，指的是与自身的目标档案相关的位置。③绝对路径是指可以从这个路径上查找文件夹，不管是从外部或内部存取。而相对路径则是与它本身相关的，其它地方的档案和路径，则只能在内部存取。

本周总结

这周在上周完成了前端基础的情况下写了一个页面，在写页面的过程中也学到了很多东西，希望这次分端能正确选择适合自己的，下周希望能顺利完成学习计划