css标题，链接等

有序列表

无序列表

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

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

  区域
  加粗 斜体 中横线
  换行符
  布局

  段落

  标题

  链接

   空格

  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);

  扫描二维码关注公众号，回复： 11938973 查看本文章

  //背景颜色
  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) 旋转当前的绘图

  //js
  定义 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()