本周学习总结

渐变

1、线性渐变

通过方位值确定渐变方向（颜色至少两个）

  background-image: linear-gradient(to right, yellow,green,red,pink);

通过角度定义方向

从左往右

background-image: linear-gradient(90deg,pink,greenyellow);

从上到下

background-image: linear-gradient(180deg,pink,greenyellow);
background-image: linear-gradient(-70deg,pink,greenyellow);

角度单位deg

重复

background-image: repeating-linear-gradient(135deg,pink 0,pink 200px,green 200px, green 400px);

2、径向渐变

使用关键字定义渐变形状 circle表示圆形 ellipse表示椭圆（默认情况）

默认从中心渐变

圆形

background-image: radial-gradient(circle,yellow,green);

椭圆

background-image: radial-gradient(ellipse,pink,blue);

定义渐变开始位置

background-image: radial-gradient(circle at 80% 80%,yellow,green);

定义渐变的形状大小

background-image: radial-gradient(circle 80px at 80% 80%,yellow,green);

背景

背景色

opacity:0.2; (透明度，子元素和文本会一起透明)

背景图

background-image:url( )

控制背景图是否重复

默认重复

background-repeat:repeat;

不重复

background-repeat:no-repeat；

只有水平方向重复

background-repeat:repeat-x;

只有垂直方向重复

background-repeat:repeat-y;

控制背景图的位置

使用方位值

background-position:right bottom;

使用长度（可以为负）

background-position:20px 50px;

控制背景图附着情况

background-attachment:scroll; 默认情况 随着页面一起滚动

background-attachment:fixed; 不随页面滚动

控制背景图尺寸（css3新增)

可以通过长度、百分比和关键字（contain和cover）控制

长度

background-size：；

百分比

background-size：50% 80%；

关键字

等比例缩放，尽可能缩放背景图，但不会超过盒子

background-size：contain；

等比例缩放，尽可能缩放背景图，直到盒子占满，背景图超出部分不可见

background-size：cover；

属性简写

 background: url(./background.jpeg) no-repeat 20px 40px ;

只设置图片的宽或者高时，图片会等比例的缩放，让图片不会失帧

图片拼合技术 雪碧图sprite

一般放雪碧图用span

1、定视口

显示图片的大小

2、插图片

background-imge:url( )

3、调整位置

background-position:-20px -50px;

flex-grow(把空白部分按比例分配给子元素的宽)写在子元素里面

flex-grow:1;

表格元素

table：定义一个表格，表格元素最外层的元素

th：定义表格的表头

tr：定义表格的行

td：定义表格的单元格

caption：定义表格的标题

thead：定义表格的页眉

tbody：定义表格的主题内容

tfoot：定义表格的页脚

表格的相关属性

colspan：规定单元格可横跨的列数

rowspan：规定单元格可横跨的行数

border-collapse：边框塌陷

表单元素

form：定义一个表单区域，可以获取用户输入的数据

input：输入框，不同的类型会让该元素有不同的含义

select：下拉列表

option：下拉列表的选项

textarea：多行文本框

input

placeholder 文本框 提醒输入内容

password 密码框 maxlength设置可输入的长度

<input type="password" name="" id="" maxlength="6">

button 按钮 没有提交功能

<input type="button" value="单纯的按钮">

submit 按钮，具有提交功能，会发生跳转

<input type="submit" value="提交按钮1">
<button>也是提交按钮</button>

reset 重置按钮

<input type="reset" value="重置">

单选框

通过name属性实现单选效果 有同一个name时只能选一个

<input type="radio" name="gender" id="">男>
<input type="radio" name="gender" id="">女>

通过id绑定label标签的文字，使点击文字时也可以选中

<label for="male">男</label>
<input type="radio" name="gender" id="">男>
<label for="female">女</label>
<input type="radio" name="gender" id="">女>

多选框

 <input type="checkbox">

提交文件

<input type="file" name="" id="">

下拉列表

<select name="" id="">
<option value="">成都</option>
<option value="">上海</option>
<option value="">北京</option>
<option value="">重庆</option>
</select>

多行文本框

resize:none; 控制多行文本框尺寸

<textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea>
                         列         行                 

新增表单控件

<input type="email" name="" id="">
邮箱框
<input type="month" name="" id="">
年月框
<input type="range" name="" id="">
滑块
​

<select name="" id="">

只读

<input type="text" value="此框内容只读" readonly>

标志性属性

selected

required 必填

readonly