H5笔记-02

day6，
一，定位
position: static/relative/absolute/fixed/sticky
静态定位
1、默认定位

相对定位
1、占原来的位置
2、移动时参照的是自己本来的位置

绝对定位
1、不占位置
2、移动时参照物为html或者包含块

固定定位
1、不占位置
2、移动时参照物为html

粘性定位
1,不脱离文档流
2，到设置位置时保持不动
定位position：relative absolute fixed 可用z-index来设置上下显示关系

二，Marquee跑马灯
<marquee direction=“up” behavior=“slide” scrollamount=“5” scrolldelay=“90” loop=“2”>我想上滚动</marquee>
direction:滚动方向4个值 up down left right 默认从右向左
behavior:scroll循环滚动/slide只滚动一次/alternate来回滚动 默认循环滚动
scrollamount:值越大，滚动速度越快 一般5-10比较适宜消息观看
scrolldelay:值越大，滚动速度越慢，通常不设置
loop:默认值-1或infinite 表示无限循环滚动 loop=“数值” 表示滚动相应的次数
三，解决图片3px方法:
1、display:block;
2、float:left/right(可能要解决高度塌陷父元素加overflow:hidden)
3、给父元素加font-size:0
4、vertical-align:top;
四，<!-- 写多个class名，每个class名需要使用空格隔开 -->
<h1 class=“logo fl com”>
可以写负值的属性
text-indent background-position margin z-index
day7，
1、自适应
(1)宽度自适应
元素宽度设置为100%。(块元素宽度默认为100%)
(2)元素高度自适应窗口高度
设置方法：html,body{height:100%;}
自适应元素高度：height:100%;
2、高度塌陷
原因: 父元素不写高度，子元素全部浮动
解决方式:
(1)给父元素加overflow:hidden;

(2)给内容后面加空div,并添加声明clear:both;height:0;overflow:hidden;

(3).clean:after{content:’.’;display:block;clear:both;height:0;overflow:hidden;visibility:hidden}
.clean{zoom:1}
给当前的class名clean加给父元素
3、伪对象选择符
1）、:after 与content属性一起使用，定义在对象后的内容。
如：div:after{content:url(logo.jpg);} div:after{content:“文本内容”;}
2）、:before 与content属性一起使用，定义在对象前的内容。
如：div:before{content:“在其前放内容”;}
3）、：first-letter 定义对象内第一个字符的样式。
4）、：first-line定义对象内第一行的样式。
说明：
*(该伪元素只能用于块级元素。)
*ie6以下版本浏览器不支持伪对象选择符。
4、兼容元素具备最小高度自适应的方法：
hack1:min-height:value; _height:value;
对于ie6来说，height本身具有min-height的作用
hack2:min-height:value; height:auto!important; height:value;(建议使用)
day8，
1、单选按钮：
<input type=“radio” name=“” checked=“checked” />
单选框生效：加name属性属性值相同
复选框：
<input type=“checkbox” name=“” checked=“checked” />
(disabled=“disabled” :禁用)
(checked=“checked” :默认选中)
2、文件上传：
<input type=“file” name=“” accept=“image/gif，image/jpeg” /> 允许gif、jpeg格式

限制图像的格式，可以写为：accept=“image/~”
图像形式的提交按钮：
<input type=“image” src=“submit.gif” alt="Submit” />

隐藏字段：
<input type=“hidden” name=“country” value=“Norway” />
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用（一般在地址栏可见）

下拉列表（菜单）：
<select name="">
<option>菜单内容</option>
</select>

文本域/多行文本框：
<textarea name=“名” cols=“宽度” rows=“行数” ></textarea>

表单字段集
<fieldset></fieldset>
相当于一个方框，在字段集中可以包含文本和其他元素。
字段集标题
<legend><legend>
legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset里的第一个元素。
提示信息标签
<label for=“绑定控件id名”></label>
功能：点击文字也能选中标签，为页面上的其他元素指定提示信息。
3、表格补充
border-spacing = cellspacing
border-collapse:separate(边框分开)/collapse(边框合并)
empty-cells:show/hide
table-layout:auto/fixed

标题 caption caption-side(标题位置，上下左右)

table tr td = th
属性 rules=“rows、cols、all、none、groups”

行组 thead tbody tfoot
列组 colgroup span=""
col span=””
4、BFC 块级格式化上下文

生成条件:
1、根元素
2、float不为none
3、overflow不为visible
4、display为inline-block、table-cell、table-caption
5、position为absolute或fixed

应用:
1、防止margin上下重叠
使用方式: 给其中一个元素外面套一个div，把这个div变成BFC
2、高度塌陷第一种解决方式
3、自适应两栏布局
使用方式: 侧边栏浮动，重要内容区域变成BFC
5、水平垂直居中
文本水平垂直居中
text-align:center;line-height:value;

图片水平垂直居中
text-align:center
加span{height:100%;display:inline-block;vertical-align:middle}
img{vertical-align:middle;display:inline-block;}

元素水平垂直居中
(1)position:absolute/fixed;top:50%;left:50%;margin-left: -(width/2)px;margin-top: -(height/2)px;
(2)position:absolute/fixed;top:0;left:0;right:0;bottom:0;margin: auto;
(3)position:absolute/fixed;top:50%;left:50%;transform:translate(-(width/2)px,-(height/2)px);
day9，
渐变
线性渐变
background：linear-gradient(direction,color1,color2…)
direction:to top/…/to top left/to top right
重复线性渐变
background: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变
background: radial-gradient(center, shape, size, start-color, …, last-color)
shape:ellipse表示椭圆形，circle表示圆形
例：background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。
重复径向渐变
background: repeating-radial-gradient(red, yellow 10%, green 20%);

2D变换
属性transform
属性值
rotate() 旋转函数 取值度数，rotate(30deg)
Transform-origin 旋转的基点top(50% 0)/…center(50%)(50% 50%)
skew() 倾斜函数 取值度数 (扭曲) skewX() skewY()
例、值 skew(30deg,20deg) 围绕 X 轴把元素翻转（倾斜/扭曲） 30 度，围绕 Y 轴翻转（倾斜/扭曲） 20 度。
scale() 缩放函数 取值 正数、负数和小数 scaleX()scaleY()
例、值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
translate() 位移函数 translateX()translateY()
例、值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

过渡
transition
transition-property 要运动的样式 （all || [attr] || none）
transition-duration 运动时间 transition-delay 延迟时间
transition-timing-function 运动形式
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
简写：transition:all 1s 1s ease;

pointer-events：auto/none(阻止触发事件)
backface-visibility: visible|hidden;
visible 背面是可见的
hidden 背面是不可见的

day10，
3D转换属性transform
属性值
rotate3d(x,y,z,angle)
rotateX(angle) 定义沿 X 轴的 3D 旋转。正值前，负值后
rotateY(angle) 定义沿 Y 轴的 3D 旋转。正值右，负值左
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

translate3d(x,y,z)
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z轴的值。

scale3d(x,y,z)
perspective 设置从何处查看一个元素的角度
语法： perspective: number|none;
perspective-origin:50% 50%;
表示浏览器从正中心观察这个世界
transform: perspective(400px) ;

transform-style 规定被嵌套元素如何在 3D 空间中显示

语法： transform-style: flat|preserve-3d;
flat 表示所有子元素在2D平面呈现
preserve-3d 表示所有子元素在3D空间中呈现

动画
创建动画
浏览器兼容@-webkit-keyframes name{}
@keyframes name{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;} }
调用语法：animation：name duration timing-function delay iteration-count；
name 动画名称
duration 动画指定需要多少秒或毫秒完成
timing-function 动画效果的速度
delay 延时
iteration-count：value/infinite 动画播放次数
animation-direction: normal|alternate; 是否反向播放动画
animation-play-state: paused|running; 动画正在运行还是暂停
动画关键帧(start播放第一帧)
animation-timing-function：step-start/step-end
过渡和动画区别
1、过渡需要触发，动画不需要
2、过渡不能分段，动画可以