注意：以下前缀兼容性写法注释
-o-：Opera
-ms：//IE10
-moz：//火狐
-webkit：//Safari 4-5, Chrome 1-9
行内元素有：head meta title lable span br a style em b i strong
块级元素有:body from select textarea h1-h6 html table button hr p ol ul dl cnter div
行内块元素常见的有：img input td
给图片设置
img {
max-width: 100%;
max-height: 100%;
} 可以让图片的大小自适应本身
clear: both清除浮动
box-sizing: border-box;元素将会有边框
user-select: none;==> 禁止选中文本
-webkit-transform: translateZ(0);==> 开启硬件加速
-webkit-backface-visibility: hidden;==> 去除动画加载闪烁
outline: none;==> 可以去除浏览器的框
设置绝对定位的时候，可以把left和right设置为0；这样就可以使用margin： auto；来居中
div * {pointer-events: none;}==> 禁止点击事件/鼠标事件“穿透”, 都将不能使用
.main{-webkit-overflow-scrolling: touch;}==> 移动端滚动顺滑
zoom: 2;==> 可以放大和缩小元素
<progress value="22" max="100"></progress>==> 进度条
在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。
物理像素 css像素
设备独立像素 计算机中的点
设备像素比 = 物理像素 / 设备独立像素;
位图像素 一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。
浏览器的本地存储功能:
localStorage: 一直存在
sessionStorage: 本页面不销毁的话一直存在
小技巧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 禁止百度转码 -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->
</head>
<body></body>
</html>
<meta name="viewport" content="user-scalable=no"> 禁止缩放
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 --><!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit"><!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true"><!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320"><!-- uc强制竖屏 --><meta name="screen-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait"><!-- UC强制全屏 -->
<meta name="full-screen" content="yes"><!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true"><!-- UC应用模式 -->
<meta name="browsermode" content="application"><!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app"><!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no"><!-- 适应移动端end -->
元素水平排列方法
//==> float: left;
//==> display: flex;
//==> display: inline;
//==> position: relative;
- 图片代替文字
使用图片代替文字的做法： 使用a标签，背景图片使用css添加
·1 图片和文字都要有，然后图片代替文字之后隐藏文字 设置文字的首行缩进为盒子宽度，到外面，然后隐藏
·2 设置容器的高度为0 然后设置内部上边距为图片的高度
单行文本溢出问题
white-space:nowrap; 文本禁止换行
Overflow:hidden; 超出范围剪切
Text-overflow:ellipsis
多行文本溢出问题
.box{
width: 100%;
overflow: hidden;
display: -webkit-box; //将对象作为弹性伸缩盒子模型显示 *必须结合的属性*
-webkit-box-orient: vertical; //设置伸缩盒对象的子元素的排列方式 *必须结合的属性*
-webkit-line-clamp: 3; //用来限制在一个块元素中显示的文本的行数
word-break: break-all; //让浏览器实现在任意位置的换行 *break-all为允许在单词内换行*
}
移除浏览器默认的样式 ：
input, button, textarea, select {
*font-size: 100%;
-webkit-appearance:none;
}
边距塌陷:
//==> 给父盒子添加border border: 1px solid transparent;
//==> 父盒子添加 overflow: hidden;
//==> 设置padding值
//==> 添加 position: flxed;
//==> 添加 display: table;
//==> 在子元素前面添加空元素 .son::before { content:""; overflow:hidden; }
手写表格中的内容随着表格的宽度变细自动换行增加行高: 使用display: table; display : table-cell;
控制图片缩放比例的方法： 使用padding-top百分比：
.容器 {
padding: 15.15% 0 0;
position: relative;
}
.容器 > img {
position: absolute;
width: 100%; height: 100%;
left: 0; top: 0;
}
// 设置一个盒子等比例缩放的方法
内下边距如果是宽度的二倍,高就是宽度的二倍
{
width 50%;
height: 0;
padding-bottom: 50%;
一个盒子上下左右居中:
已知宽度: ==>>
.box {
width: 100px;
height: 100px;
background-color: #eee;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.box {
width: 100px;
height: 100px;
background-color: #eee;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
未知宽度: ==>>
.box {
background-color: #eee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
-- 使用弹性布局
文字竖着排列
p {
height: 210px;
line-height: 30px;
text-align: justify;
writing-mode: vertical-lr; 左-右
writing-mode: tb-lr; IE 左-右
writing-mode: vertical-rl; 右-左
writing-mode: tb-rl; IE 右-左
}
点击打开QQ进行聊天
<a href="http://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&menu=yes" target="_self"><img border="0" src="http://wpa.qq.com/pa?p=2:qq号:51" title="在线客服" /></a>
<a href="tencent://message/?uin=2402475176&Site=Sambow&Menu=yes">80080088</a>
div{
//把div元素中的文本划分为4列
-moz-columns: 4;
-webkit-columns: 4;
columns: 4;
//将div元素中的文本分为三列，并列间30px的间隔
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px;
//规定列之间的宽度、样式和颜色
-moz-column-rule: 1px outset #fff;
-webkit-column-rule: 1px outset #fff;
column-rule: 1px outset #fff;
}
实现页面中左边盒子宽度固定, 右边盒子宽度撑开, 全部高度自适应
一个盒子设置 display: table;
剩下的两个盒子: display: table-cell;
固定宽的盒子设置宽度就可以
实现页面中左边盒子宽度固定,高度随内容变化, 右边盒子自适应
左边盒子设置宽度和向左浮动,右边盒子margin-left: 左边盒子宽度
让一个盒子上下撑满的方法: 设置一个盒子绝对定位,然后上下左右填写距离就会自动撑开
- position: absolute;
top : 0;
bottom : 0;
- .box {
position: absolute;
height: 100%;
width: 100%;
}
- 设置html 和 body: height: 100%;
高级滚动视觉差效果:
<div class="demo">
<div class="box">
<div class="p">最前方主体内容</div>
<div class="i">后排滚动</div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
</div>
</div>
首先给最大的滚动添加: perspective: 1px; overflow: scroll;
真正要滚动的部分添加: transform-style: preserve-3d; position: relative;
主体滚动添加: position: absolute;
left: 50%;
transform: translate3D(-50%, -120px, -1px) scale(2);
其他辅助内容自行添加
创建一个打点动画:
.loading::after {
display: inline-table;
content: "...";
animation: spin4 2s infinite step-start;
}
@keyframes spin4 {
33% {
content: '.';
}
66% {
content: '..';
}
}
创建一个背景滚动变换
.box {
width: 100%;
height: 200px;
background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
animation: hue 6s linear infinite;
}
@keyframes hue {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
文字背景颜色渐变
.box {
width: 100px;
height: 100px;
background: linear-gradient(to right, red, blue, yellow);
-webkit-background-clip: text;
color: transparent;
}
好玩儿的：
控制台返回一个键盘图形：// 用字符串返回一个键盘图形
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()
画布
···创建一个画布Canvas···
http://www.runoob.com/tags/ref-canvas.html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
一个简单的画布，需要用这个框架，具体的实现必须使用脚本编写 js
var c=document.getElementById("myCanvas");------找到canvas元素
var ctx=c.getContext("2d"); -------创建对象
ctx.fillStyle="#FF0000";-----设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
ctx.fillRect(0,0,150,75);-----fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
ctx.shadowBlur=20; 值的大小代表阴影大小
ctx.shadowColor="black”; 创建阴影-颜色
ctx.shadowOffsetX=20; 水平方向的距离
ctx.shadowOffsetY=20; 垂直方向的距离
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);创建最基本的样式 起始坐标和长宽
ctx.strokeStyle="#FF0000”; 创建轮廓颜色
ctx.strokeRect(20,20,150,100); 创建一个框框
=================================================================================
Canvas 线条
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 "ink" 的方法，就像stroke().
创建一个线条：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();-----开始
ctx.lineWidth=5;——线条的宽度
ctx.lineCap="butt”;——线条的样式
ctx.lineCap="round”; 圆帽子
ctx.lineCap="square”; 直线
ctx.moveTo(20,20);———线条开始的坐标
ctx.lineTo(200,20);———线条结束的坐标
ctx.stroke();-----结束
线条的转弯：
ctx.beginPath();
ctx.lineWidth=10;
ctx.lineJoin="bevel”; ---斜角
ctx.lineJoin="round”;——圆角
ctx.lineJoin="miter”;——尖角
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.lineTo(120,120); ------可以创建坐标然后会自动相连
ctx.stroke();
=================================================================================
Canvas 矩形：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,190,110);
ctx.stroke();
ctx.clearRect(20,20,100,50);-----指定一段距离内没有样式
=================================================================================
Canvas 圆形
在canvas中绘制圆形, 我们将使用以下方法:
arc ( x , y , r , start , stop)
实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().
var c=document.getElementById("myCanvas"); ---找到元素
var ctx=c.getContext("2d"); ---创建对象
ctx.beginPath(); ---开始
ctx.arc(95,50,40,0,2Math.PI，true); -----X Y 半径 控制圆的显示部分 1或者21的时候是显示半边 true逆时针
ctx.stroke(); ----开始
创建圆圈的时候，开始位置为0的时候，是在最右边的点上，结束的位置为Math.PI ( 代表180度)，最后的一个值
默认的属性是顺时针方向，为true的时候是逆时针方向。角度都是按照顺时针的方向来计算的。
Math.PI 180度
2Math.PI 360度
0.5*Math.PI 90度
1.5*Math.PI 270度
=================================================================================
Canvas 文本
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText():--------------------------实心文本
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial"; ---字体和样式
ctx.fillText("Hello World",10,50); -----文本 距离左边的距离 距离上边的距离
使用 strokeText():--------------------------空心文本
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial"; ----字体和样式
ctx.strokeText("Hello World",10,50); ----文本 距离左边的距离 距离上边的距离
=================================================================================
Canvas 渐变
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用 createLinearGradient(): ------------------线性渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0); 括号里面的是起始坐标和结束坐标
grd.addColorStop(0,"red");——开始颜色
grd.addColorStop(0,"red”);
grd.addColorStop(1,"white"); ——结束颜色 多个这个的时候可以添加多个渐变颜色
// 填充渐变
ctx.fillStyle=grd; -----运用样式 grd
ctx.fillRect(10,10,150,80);
使用 createRadialGradient():-----------------------圆形渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
x.fillRect(10,10,150,80);
网友评论