前端大杂烩笔记

有序列表

<ol>
	<li></li>
</ol>

无序列表

<ul>
	<li></li>
</ul>

属性:
align=“center”//居中排列
bgcolor=“yellow”//背景颜色
style=“color:green;font-size:50px”

ul>li*10>a{商品$}

<div>区域</div>
<strong>加粗</strong>
<em>斜体</em>
<del>中横线</del>
<br>换行符
<div>布局</div>
<p>段落</p>
<h1>标题</h1>
<a>链接</a>

&nbsp;空格

body{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}(充满第一屏)

css
width=100px
height=100px

z-index: 100;(比其他盒子更靠前)
top:50%; 是父元素height的50%

//背景
背景图片 background-image:url("")
平铺图片 background-repeat:repeat-y(y轴平铺)//no-repeat(没有平铺)
移动图片 background-position:100px 100px//50% 50%//left"center"right//top"center"bottom
滚动固定 background-attachment:fixed(固定)
background: linear-gradient(to right, yellow 50%, green 90%, red); (线性)
top right/bottom/top/48deg
background: radial-gradient(circle 100px at 200px 200px, yellow 50%, green, red, transparent); (圆形)
background:
radial-gradient(ellipse 50px 100px at 50% 50%, yellow 50%, green, red, transparent),
radial-gradient(ellipse 50px 100px at 75% 75%, yellow 50%, green, red, transparent),
radial-gradient(ellipse 50px 100px at 100px 100px, yellow 50%, green, red, transparent); (椭圆形)
background: url(‘1.jpg’) ;(背景图片)

background-origin: border-box/padding-box/content-box;(背景图像的起点)
background-clip: border-box/padding-box/content-box; (背景图像的显示范围)

background-size: 100% 100%;
/* 图片占满 */
background-size: 200px;(以指定像素按比例缩放)
cover(用一张图片铺满盒子)/contain(让盒子保留一张完整背景图片)
//透明度
background-color: red;
opacity: 0.5; (透明度继承)
background-color: rgba(255, 0, 0, 0.5);

//背景颜色
background: rgb(0, 255, 242);

//border
border: 50px solid rgba(189, 178, 234, 0.5);
border-width: 50px;
border-style: solid;
//border color
border-top-color: rgba(189, 178, 234, 0.5);
border-right-color: rgba(100, 178, 234, 0.5);
border-bottom-color: rgba(0, 178, 234, 0.5);
border-top-color: rgba(189, 0, 234, 0.5);

border-image: url(‘beijing.jpg’) 27;
border-image: url(‘beijing.jpg’) 27 round(平铺);repeat(平铺哪算哪) stretch(拉伸)

圆角
border-radius: 50%;(正圆)
border-top-left-radius: 20px 20px; /* x,y /
border-top-right-radius: 15px 15px;
border-bottom-right-radius: 40px 50px;
border-bottom-left-radius: 30px 80px;
/ border-radius: 20px 15px 40px 30px/20px 15px 50px 80px; */

文字阴影
text-shadow: 10px 10px 3px red,10px -10px 3px green;

文字
常用的字体:font-family:arial;
字符间距 letter-spancing:10px //可负数
空格间距 word-spancing:10px //可负数
顺序 direction:ltr(left to right)//
划线 text-decoration:none(啥没有)//line-through(穿过字)//overline(在字的上面)//underline(在字的下面)
文字对齐方式 text-align:left//center//right//justify两端对齐
文字缩进 text-indent:60px
英文大小写字母 text-transform:uppercase(全大写)//lowercase(全小写)//capitalize(首字母大写)
强制换行: word-wrap: break-word;
强制不换行: white-space: nowrap;
多出来的隐藏: text-overflow: clip;
overflow: hidden;

单行打点: text-overflow: ellipsis;(多出来的替换省略号)
overflow: hidden;
white-space: nowrap;

多行打点: -webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
/* 子元素被垂直排列 */
-webkit-box-orient: vertical;
overflow: hidden;

文字与图片
垂直对齐 vertical-align:top//center//bottom//100%=1个行高
文字围着图片 float:left/right

链接 鼠标
状态区分 link默认//visitde被访问//hover移动鼠标上前//active点击 例子: a:link{ }

盒子
框 border:5px solid black//
内边距 padding:10px/上下左右//20px 50px/上下 左右// 上 左右 下//上 右 下 左上坐标
外边距 margin:30px//auto/居中
解决margin上下不移动的问题/嵌套封闭 bfc
float:left/right
overflow:hidden
position:absolute
display:inline-block
定义显示方式 box-sizing: content-box(标准型) | border-box(IE6)
可控大小：resize: nont(不可改变)/horizontal(水平)/vertical(垂直)/both(任意方向);
overflow: hidden;
定义输入框的轮廓颜色：input:focus{
outline: 3px solid red;
}
标题
text-align: center;(居中)
column-span: all(横跨所有列);none(默认，只在第一列)
段落
column-width: 300px;(固定列宽)
column-count: 3;(显示几列)
column-gap: 0;(列间隙)
column-gap: 16px;(默认值)
column-rule: 1px dashed #666;(分割线)

弹性盒子
容器属性
display: flex(块元素) | inline-flex(行级块元素)
flex-direction: row(从左向右)/row-reverse(从右向左)/column(从上到下)/column-reverse (从下到上);
flex-wrap: wrap(多行)/nowrap(单行);
justify-content: flex-start(默认首对齐)/flex-end(尾对齐)/center(居中)/space-between(两端对齐，每两个flex元素之间的空隙相等
)(不留边)/space-around(每个项目两侧的距离相等)/space-evenly(间距均相等);
align-items: flex-start(默认上面对齐)/flex-end(下面对齐)/center(居中)/baseline(和第一行文本对齐)/stretch(未设置高度时，高度充满容器高度);
多行
align-content: flex-start(无间隙上齐平)/flex-end(无间隙下齐平)/center(无间隙居中)/space-between (散开两端对齐)/space-around(两侧空隙相等
)/stretch (未设置高度时默认占满)/auto(设置高度时的默认状态);
元素属性
flex-basis: 50px;(主轴方向尺寸)
flex-grow: 1;(拉伸充满整个父级)(当数值不一样时将剩余空间按等量平均分配)(默认值为0,不拉伸)
flex-shrink: 1; //(压缩比例，默认值为1)
align-self: center;(设置单个项目在cross轴上的对齐方式，其他同上)
order: 10;(按数值从小到大的方式排列)
transform: translate(100px,100px);(向右移动100px，向下移动100px)
transform: translate(-50%,-50%);(挪回已知宽高的一半)
水平垂直居中：
justify-content: center;
align-items: center; /align-self: center;

浮动
float:left///clear:bath
伪元素清理浮动和margin
.xxxx::before,.xxxx::after{
content:"";
display:block;
clear:bath
}
.xxxx::after{
clear:bath
}

定位
固定定位 position:fixde;//left:50px(距离左边50)/right/top/bottom/
相对定位 position:relative;
绝对定位 position:absolute;

圆角/border-radius:50%
媒体查询
@media screen and (min-width: 600px) and (max-width: 800px) {}
@media all and (orientation: landscape), screen and (max-width: 600px) {} (或)
@media not all and (orientation: landscape) {} (取反)

布局
百分比布局和flex布局更适合于局部的布局
html{
font-size: 30px;
}
font-size: 2rem; /1rem=30px/
body{
font-size: 60px;
margin: 0;
}
font-size: 2em; (由父级决定，若父级没有则往上继承)
10vw 宽度的10% 10vh高度的10%

border: 1px solid #000000; (dpr=2找一物理像素) (dpr=3找一物理像素) 若不识别0.5，则均放大两倍后再缩一半。 transform: scale(0.5,0.5); transform-origin: 0 0;

transform:
transform: translate() | scale() | rotate() | skew() ;
transform:translateX(100px/100%(自身宽度长度))|translateY(100px/100%(自身高度长度));
transform: translateX(100%) translateY(100%);

top: 50%;
left: 50%;
width: 200px;
transform: translateX(-50%) translateY(-50%);/ transform: translate(-50%, -50%); (居中)
transform: scaleX(2); (是原来两倍)
transform: scaleX(-2); (翻转,且是原来两倍)
transform: translateX(100%) translateY(100%) scale(2,0.5);

transform: rotateX(45deg); (沿X轴旋转45度)
transform: skewX(45deg); (沿X轴倾斜45度)
transform-origin //设置元素原点位置
transform-origin: 50% 50% 0; //默认值

transform-origin: 0 0;(改变中心点)
X轴方向：left | center | right | length | %
Y轴方向：top | center | bottom | length | %
Z轴方向：length
transform-origin: center top;

transition: transform 1s, height 0.5s;
transition: transform 4s linear,height 2s linear 2s;
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-
bezier(n,n,n,n);
linear //匀速, cubic-bezier(0,0,1,1)
ease //慢快慢， cubic-bezier(0.25,0.1,0.25,1)
ease-in //慢速开始的过渡， cubic-bezier(0.42,0,1,1)
ease-out //慢速结束的过渡， cubic-bezier(0,0,0.58,1)
ease-in-out //慢速开始和结束的过渡， cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n) //在 cubic-bezier 函数中定义自己的值。可能的值是 0 ~1 之间的数值。

animation: move 2s linear;
@keyframes move{
	0%{
		left: 100px;
	}
	50%{
		left: 500px;
	}
	100%{
		left: 600px;
	}
}
@keyframes move{
	from{
		left: 100px;
	}
	to{
		left: 600px;
	}
}

animation: move 2s linear infinite alternate;

animation-direction: normal //从左到右 reverse //从右到左 alternate //奇数次正向，偶数次反向播放 alternate-reverse //奇数次反向，偶数次正向播放
animation: move 2s linear forwards;(停在运动的地方)
animation: move 2s linear 1s backwards;(在第一个关键帧等待延迟)
animation: move 4s linear 2s both;(结合了forwards和backwards)

3D
perspective: 600px;(元素所在空间距离)
transform-style: preserve-3d; (放在父级中)
perspective-origin: center;(视点，人所看的地方)
backface-visibility: hidden(翻面不可见);

视频/音频
autoplay/controls/loop
preload(none/metadata/auto):是否预加载
none:不进行预加载。
metatata:部分预加载。
auto:全部预加载

画布
ctx.rect(200,200,100,100);//矩形
ctx.fill();
ctx.fillStyle = ‘green’;

stroke()描边画
fill()填充画
lineWidth = 20;设置线宽
strokeStyle = 'red’线的颜色
closePath()闭合路径

fillStyle = ‘red’;填充颜色

createLinearGradient(x1, y1, x2, y2); 线性渐变
createRadialGradient(x1, y1, r1, x2, y2, r2); 径向渐变。

createPattern(img, ‘repeat|repeat-x|repeat-y|no-repeat’);

1、translate(dx, dy) 重新映射画布上的 (0,0) 位置
2、scale(sx, sy) 缩放当前绘图
3、rotate(Math.PI) 旋转当前的绘图

JavaScript
定义 var
控制台显示 console.log()
网页打印 document.write()
弹窗显示 parseInt(window.prompt(“input”))
switch case/break 如果没有值用default
继续 continue

类型转换
Number(mix)
parseInt(string,radix)
parseFloat(string)
toString(radix)
String(mix)
Boolean()
类型查看
typeof()
函数sum=function(a) {
arguments=>1,2,3
return //终止函数 返回值
continue //从头继续函数,不会执行下面的内容
}
sum(1,2,3)
循环 for(定义;条件;执行){内容} while(条件){内容} 跳出break 继续continue

弹窗alert("")//只显示内容
var a=confirm("")//返回布尔值
promt(“输入内容”,“可选默认值”)//输入框

获取浏览器导航栏的信息 window.location
刷新页面:location.reload()
loaction.replace(“网址”)
前进后退;history.back()/后退 history.forward()/前进 history.go(-2)/数值,前进为正,后退为负,数字代表几次
浏览器的信息,厂家版本 navigator
分辨率大小 screen
计时器:循环执行: var sil = setInterval(函数名,时间)
停止:clearInterval(sil)
一次执行:var sil = setTimeout(函数名,时间)
停止:clearTimeout(sil9)

DOM树
找到节点:通过id document.getElementById(“id名”)
通过标签 document.getElementsByTagName(“标签名”)//数组
通过class document.gerElementByClassName(“class名”)//数组
创建节点:var p = document.createElement(“p”)//创建一个p标签
创建文本节点:var ptxt = document.createTextNode(“文本内容”)
添加节点:div1.appendChild§//div1内添加一个p标签
删除节点:removeChild(删除的节点)
获取节点属性(自定义的属性):p.getAttribute(“属性名”,“属性值”)//p为获取的标签
删除节点属性: p.removeAttribute(“属性名”)
插入html: p.innerHTML=“插入的内容,可以附加标签”
只插入文本: p.textContent=“插入纯文本”

事件
1.在html属性内修改
属性名:on + 属性名字 (onclick)
属性值:方法 function a(){}
onclick = “a” p.onclick = a
2.通过调用系统提供的方法
p.addEventListener(时间类型如"click",函数,处理方式布尔值可不填默认false冒泡执行’后’//true捕获阶段执行’先’) //ie8支持 attachEvent() datachEvent()
删除 p.removeEventListener(时间类型如"click",函数,处理方式布尔值可不填默认false冒泡执行’后’//true捕获阶段执行’先’)

具体时间发生的内容 event //包含鼠标位置,操作状态…//兼容ie8 var a = event||window.event;
取消默认操作 event.preventDefault() onclick = “a” 取消用 return false ie8兼容用 event.returnValue = false;

事件流
可看上面调用系统提供方法
终止冒泡事件: event.stopPropagation()