css样式
1.圆角
border-radius
border-top-left-radius
两个角一起写需要上下在前，左右在后
2.渐变
线性渐变
background:linear-gradient(red,green);从上到下
background:linear-gradient(to left,red,green)从左到右
径向渐变
background:radial-gradient(yellow,purple);
3.盒子阴影
box-shadow: apx bpx cpx dpx yellow;
a 控制水平位置 正值偏左 0 两边均等
b 控制水平位置 正值靠下 0 上下均等
c 模糊程度
d 阴影范围
4.过渡
transition:all 1s; all所有 1s 时间
transition-delay: 1s; 1s 延迟
5.2d 3d 转换
transfrom
- translate 位移 translateX translateY
transform: trans000late(200px,200px);
- rotate 旋转 rotateX rotateY
transform: rotate(200deg,200deg); deg度数
- scale 缩放 scaleX scaleY
transform: scale(2,2); x,y
- skew 倾斜 skewX skewY
transform:skew(30deg,30deg);
- maxtrix 矩阵 (兼容不好) 组合起来
- 组合
transfrom：translate(200px,200px) rotate(200deg,200deg) scale(2,2) skew(30deg,30deg);
! 多个显示只有最后一个实现，想要多个实现，组合成一个
6.动画
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。 3 事件
animation-timing-function 规定动画的速度曲线。 3 ease ease-in进入慢 ease-out出去慢 ease-in-out 进入出去慢
animation-delay 规定动画何时开始。 3 延迟
animation-iteration-count 规定动画被播放的次数。 3 infinite循环播放
animation-direction 规定动画是否在下一周期逆向地播放。 3 alternate 交替 alternate-reverse反向交替 normal正序
animation-play-state 规定动画是否正在运行或暂停。 3 running 运行 paused 暂停
animation-fill-mode 规定对象动画时间之外的状态。(动画保持) backwards 默认回到第一帧 forwards 动画结束保持最后一帧
/* 透视距离，物体越远显示越小 */
！！！/* perspective: 800px; */
/* 透视基点 水平，垂直*/
/* perspective-origin: 186px 112px; */
animation-fill-mode: forwards;
/* backwards 默认回到第一帧 */
/* 动画结束保持最后一帧 */
transform-origin: left; 基点
animation-delay: 1s;延迟加载
7.弹性盒子
父类设置
display:flex/inline-flex
flex:弹性布局
inline-flex 内联块级弹性布局
控制主轴方向
flex-direction:row/column/row-reverse/column-reverse 竖列反向
控制换行
flex-wrap:
nowrap 不换行
wrap 换行
wrap-reverse
可用替换成 （控制主轴方向，控制换行）
flex-flow:row wrap;
控制主轴排序方式(对齐)
jistify-content
flex-start 左对齐（靠上）
flex-end 右对齐 （靠下）
center 居中
space-between 两端靠边中间平分（项目之间间隔相等）
space-around 两侧间隔相等，（项目边距与边框间隔大一倍）
控制轴线之间的距离
algin-content
flex-start 左对齐（靠上）
flex-end 右对齐 （靠下）
center 居中
space-between 两端靠边中间平分（项目之间间隔相等）
space-around 两侧间隔相等，（项目边距与边框间隔大一倍）
stretch 拉伸至父级
align-items
flex-start 上对齐
flex-end 下对齐
center 中对齐
stretch 不设高度或为 auto 是充满整屏
baseline 根据基线 和 flex-start 基本一致
子类设置
flex 设置宽度比例
flex:1/2/3/4
order排序
1234
可以设置order:-1;提到前面
用弹性盒子不生效的属性
float：浮动
清除浮动
vertical-align
@media 媒体查询
响应式布局
同一个网页用于多个设备，手机，ipad，pc
<meta name="viewport" content="width=device-width, initial-scale=1.0">
移动端head设置
<meta name="viewport" content="width=device-width，initial-scale=1.0,maximun-scale=1,minimun-scale=1,user-scalable=no" />
width=device-width 移动端自适应
initial-scale=1.0,不缩放
user-scalable=no yes,no是否可以缩放
@media only screen and (min-width:960px) and (max-width:1200px){}
伪类
伪类 :
伪元素 ::
h5 移动端
1.语义化更好的内容标签
header 头部信息
footer 底部信息
nav 导航
section 段，节，区域
2.带功能
progress 进度条
- 属性 max value
/* 改变进度条样式 */
progress {
width: 168px;
height: 5px;
color: #f00;
background: #efeff4;
border-radius: 0.1rem;
}
progress::-webkit-progress-bar {
background-color: burlywood;
border-radius: 0.2rem;
}
/* 表示已完成进度背景色 */
progress::-webkit-progress-value {
background: red;
border-radius: 0.2rem;
}
dialog 对话框
- 默认样式 diaplay:none;
details 带详细信息标题 默认隐藏,只显示里面 summary 标签 open='open' 打开
- 里标签 summary 标题标签
bdi 可拖拽 默认无作用
- 属性 draggable='true' 可拖拽
figure 放图片，图表，代码等
- 里标签 figcaption 图表的标题 可以放图表的上或下
article 文章/博客标签
section 电池电量控制
- 里标签 meter 属性 max value low 警告 high 也是警告
aside 侧边栏
canvas 画布容器 属性 width height ????
embed 属性 src
3.input 新增属性 type 类型
color 拾色器
date
datetime
datetime-local
email
month
number
range
search
tel maxlength
url 统一资源定位符 协议名、域名，文件夹，文件名
week
time
4.视频和音频
video
- 属性
src 引入地址
controls='controls' 控制器
autoplay='autoplay' 自动播放
loop='loop'循环播放
muted='muted' 静音播放
preload 刷新网页是否加载 'metadata'加载 'none'不加载
poster='地址' 封面
audio
- 属性
src 引入地址
controls='controls'
autoplay='autoplay' 自动播放
loop='loop'循环播放
muted='muted' 静音播放
preload 刷新网页是否加载 'metadata'加载 'none'不加载
rem
px 像素是兼容所有浏览器，是一个固定值
em 是根据父级缩放字体比例，每次都需要设置父级的宽度
rem 是根据根元素 html 的缩放比例，ie6-ie8 不兼容热门，所以为了兼容性 rem px 都会写，移动端用 rem 比较方便网页默认字体 16px,html 100%
100%=16px 1px=6.25$, 10px=62.5%
1rem=10px 12px=1.2rem
注意：谷歌浏览器有默认最小值 12px,当到达最小值就不会再小了
移动端问题
移动端文件命名标准;
- css
common.css 公共的
base.css 基础的
文件.css
标准盒模型和怪异盒模型如何设置？
标准盒模型
box-sizeing:content-box
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
怪异盒模型
box-sizing:border-box;
一个块的总宽度= width + margin(左右)（即 width 已经包含了 padding 和 border 值）
移动端 a 标签点击有背景如何去除？ 1.取消 a 标签在移动端点击时的蓝色
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none; 2.使用图片作为 a 标签的点击按钮时，当触发 touchstart 的时候，往往会有一个灰色的背景
a,a:hover,a:active,a:visited,a:link,a:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline:none;
background: none;
text-decoration: none;
}
input 框点击时边框颜色统一，如何实现？
input{outline:none}
input:focus { outline: none; }
自己添加的样式 公共样式
eg:
l_left{
float:left;
}
l-right{
float:right;
}
清除浮动
学海石崖
背景图
background:url() no-repeat;
background-position:5px 5px;
background-size:;
input{
outline:none;
}
input:focus{
outline:none;
border:1px solid #666;
}
base.css\
/_ 禁用 iPhone 中 Safari 的字号自动调整 /
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/ 解决 IOS 默认滑动很卡的情况 _/
-webkit-overflow-scrolling : touch;
height: 100%;
width: 100%;
}
/_ 禁止缩放表单 _/
input[type="submit"], input[type="reset"], input[type="button"], input {
resize: none;
border: none;
}
/_ 取消链接高亮 _/
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
注意
1.0 img{
vertical-align:baseline; baseline 按基线 bottom 下
}
2.0 img{
display:block;
}
3.0 父级{
font-size:0;
}
清除浮动
img
.clearfix:before,.clearfix:after{
clear:both;
}
left:calc(50% -29)
设置省略号
兼容
xxx {
width: xx;
height: xx;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
}
不要兼容
xxx {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
pc 移动端
鼠标事件
mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。
mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。
click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着 onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。
dblclick:双击鼠标左键时触发。
mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
mouseout:鼠标移出目标元素上方。
mouseenter:鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发。
mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。
pc 端网页事件
click 当鼠标点击时触发
mouseover 当鼠标指针移动到元素上时触发
mouseout 当鼠标指针移出元素时触发
mouseenter 当鼠标指针移动到元素上时触发（不支持冒泡）
mouseleave 当鼠标指针移出元素上时触发（不支持冒泡）
mousemove 当鼠标指针移动到元素上时触发
mousedown 当元素上按下鼠标按钮时触发
mouseup 当在元素上释放鼠标按钮时触发
mousewheel 当鼠标滚轮正在被滚动时运行的脚本
keydown 在用户按下按键时触发
keyup 当用户释放按键时触发
load 页面结束加载之后触发
scroll 当元素滚动条被滚动时运行的脚本
blur 元素失去焦点时运行的脚本
focus 当元素获得焦点时运行的脚本
change 在元素值被改变时运行的脚本
移动端事件
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
click 当点击时触发（单击）
load 页面结束加载之后触发
scroll 当元素滚动条被滚动时运行的脚本
blur 元素失去焦点时运行的脚本
focus 当元素获得焦点时运行的脚本
change 在元素值被改变时运行的脚本
input 代替 keyup、keydown
touch 事件模型 处理单手指操作
最基本的 touch 事件包括 4 个事件： - touchstart
当在屏幕上按下手指时触发 - touchmove
当在屏幕上移动手指时触发 调用 preventDefault()可以阻止滚动 - touchend
当在屏幕上抬起手指时触发 - touchcancel
当系统停止跟踪触摸时触发（电话进来结束）\
touchenter
移动手指进入一个 dom 元素 - touchleave
移动手指离开一个 dom 元素-
移动端事件列表
- touches
当前操作的 touches 数组 - ！targetTouches（触摸点）
特定于事件目标的 touch 对象的数组 - changedTouches（手指个数）
上次触摸改变的 touches 数组
//判断是否是一个手指 if (e.targetTouches.length > 1) { return; } - touches
d1.addEventListener("touchstart", function(e) {
console.log(e.targetTouches[0]);
});
d1.addEventListener("touchmove", function(e) {
console.log(e.targetTouches[0]);
});
d1.addEventListener("touchend", function(e) {
console.log(e.changedTouches[0]);
});
属性 identifier:
表示每一个 touch 对象的独一无二的 identifier，可以保证跟踪到 touches 数组
移动端
offsetX
相对于屏幕左边缘的距离
pageX
触摸点相对于 docuemnt 左侧边缘的距离，与 clientX 不同的是，当有滚动条是 page 包括滚动条距离，client 不包括
clientX
触摸点相对于视口（窗口）的距离
outcomplate ='off'取消自动 from 那个啥
window.onresize=fn 屏幕改变触发
zepto
5 个基本模块
- !* zepto 核心模块，包含大多数方法‘
- !* event 事件 通过 on()& off()处理事件
- !* ajax XMLHttpRequest 和 JSONP 实用功能
- !* form 序列化 & 提交 web 表单
- !* ie 增加支持桌面的 Internet Explorer 10+和 Windows Phone 8。
其他模块
- detect 提供
.browser 消息
- fx The animate()方法
- fx_medthods 以动画形式的 show, hide, toggle, 和 fade*()[褪色淡化]方法.
- assets 实验性支持从 DOM 中移除 image 元素后清理 iOS 的内存。
- data 一个全面的 data()方法, 能够在内存中存储任意对象。
- deferred 提供
.ajax() 支持 promise 接口链式的回调。
- callbacks 为"deferred"模块提供 $.Callbacks。
- selector 实验性的支持 jQuery CSS 表达式 实用功能，比如 $('div:first')和 el.is(':visible')。
- touch 在触摸设备上触发 tap– 和 swipe– 相关事件。这适用于所有的
touch(iOS, Android)和pointer事件(Windows Phone)。 - gesture 在触摸设备上触发 pinch 手势事件。
- stack 提供 andSelf& end()链式调用方法
- ios3 String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ，以兼容 iOS 3.x.
修改引入
make 文档
target.build = ->
cd __dirname
mkdir '-p', 'dist'
modules = (env['MODULES'] || 'zepto event ajax form ie selector fx touch').split(' ')
node 修改
npm install
npm run-script dist
引包
- click 与 touch
click 在移动端有延迟
touch 事件在 pc 端无效，在移动端的优先级比移动端高
- 移动端点击注意事项 touchstart touchend
单个手指
e.targetTouches.length>1
时间范围 150-200
Date.now()
抖动距离 6
e.targetTouches[0].clientX
li[i].classList.remove('class')//去除 class 样式
li[i].classList.add('class)//添加 class 样式
zpto
父类.removeClass('类名').eq(下标).addClass('类名')
//解决 pc 端 touch 点击无效
//点击穿透 tap 事件的缺点
https://www.npmjs.com/package/fastclick
使用 https://www.jianshu.com/p/67bae6dfca90
web 移动端的插件
zepto (类似 jquery)
https://www.html.cn/doc/zeptojs_api/
iScroll(平滑滚动网页)
https://github.com/cubiq/iscroll
swip 轮播
https://github.com/thebird/swipe
