Web--弹性布局---5月17日

1.分两部分  弹性父级  弹性子元素

2.给父级设置  display:flex或inline-flex

  (1) Flex-direction  指定弹性盒子中子元素的排列方式;

 (2)Display 属性 flex  指定父元素为弹性盒子模型 display:flex;

 内部元素按行排列,变成了行级块元素

 (3)flex属性  设置弹性盒的子元素如何分配空间  属性值是数字,flex1:1

3.

(1)Flex-direction 指定弹性盒子中的子元素的排列方式:

  row : 默认值,灵活的项目将水平显示,正如一个行一个样;

  row-reserve:与row相同,但是以相反的顺序;

  column:灵活的项目将垂直显示,一个列一样

  column-reverse:与column相同,但是以相反的顺序。

(2)Justify-content 指定弹性盒子元素在x轴上的对齐方式:

  flex-start:默认值,项目位于容器的开头;

  flex-end:项目位于容器的结尾;

  center:项目位于容器的中心;

  space-between:项目位于各行之间留有空白的容器内;

  space-around:项目位于各行之前,之间,只后都留有空白的容器内;

(3)Aligin-items:指定弹性盒子在y轴上的对齐方式

  stretch:默认值,元素被拉伸以适应容器。如果指定侧轴大小为auto,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照‘min/max/height’属性的限制;

  center:元素位于容器的中心。  弹性盒子元素在该行的侧轴(纵轴)上居中放置,(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度);

  flex-start:元素位于容器的开头;

         弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

4.表格

  display:table;display:table-cell;

  

5.h5中语义化标签

header footer  nav  aside   section  article  hgroup  adress;

Figure  用于组合元素的  常用在图片和视频中;

datalist:

list的值和id的值必须一样;

--------------------------------------------------------------------------------------------------------

 对上篇关于 canvas的回忆;

Canvas  画布   位图

1.不要再style中给canvas设置宽高,会有位移差;、

2.给图中的c设置一个绘图环境,得到的是一个对象;

.

3.fillRect()  绘制一个填充的方块   默认颜色是黑色;

strokeRect()绘制带边框的方块;

4.绘制线条

  moveTo()绘制线段的起点;

  lineTo()绘制线段的领点;

  每个线条只能有一个moveTo可以有多个lineTo

  Stroke()绘制线段

  beginPath()起始点

  closePath()结尾点;

  二者同时出现,将绘制路径闭合;起始点结尾点首尾相连

  Rect()绘制方块  

  clearRect(0,0,width,height)清除画布

  Can.save()

  Can.restore()二者成对出现  中间的属性样式只影响内部  不影响外部;

5.画圆:

  

200,200是圆心坐标,50是半径,0是起始弧度,Math.PI是结束弧度;

True 是逆时针方向;

注意  角度有正负之分,顺时针转的角度是正的,逆时针转的角度是负的;

6.画布的平移和旋转:

  平移:translate  画布大小位置不变   起始坐标  变了

  

  相对于原坐标平移;

rotate()画布的旋转都是以0,0起始点为中心点旋转

Scale(0.5,0.5)

画布的缩放  就是将画布向后移动   跟人的视距就变远了,近大远小;

7.画布中插入图片:

  

插入字体:

  

字体的起始点默认在字体的左下角,而方块和圆等其他形状默认都是在左上角;

原文地址:https://www.cnblogs.com/lovels/p/10881608.html