css小知识点

canvas知识点总结：

• 判断画笔是否存在

connt ctx=canvas.getContext("2d")

• 画矩形，方式一 api画 方式二路径 rect(x,y,w,h) fill()

//样式
fillStyle("red")//实心填充
strokeStyle("#ccc")//空心 
lineCap="butt"//线端
lineWidth=10//线宽

fillRect(x,y,w,h)
strokeRect()

clearRect()

• 画圆

arc(100,100,50,0,360*Math.PI/180,true)
moveTo()
arcTo(x1,y1,x2,y2)

• 路径

beginPath()//清空路径容器
moveTo(50,50)
lineTo(50,100)
lineTo(100,100)
closePath()//stroke需要手动闭合
stroke()//
fill()//自带闭合路径，不需要closePath()

• 作用域

// save 保存样式,restore弹出样式
save()
//样式
todo
beginPath()
//路径
todo
restore()

web端尺寸位置api：

offsetTop
offsetLeft

scrollTop
scrollLeft

innerHeight//视口的高度
innerWidth //

cliectX
clientY

flex布局

• 父元素属性：

display:flex; //开启弹性布局

flex-flow:row cente; //缩写
flex-wrap:nowarp; //nowrap（不换行） | wrap（向下换） | 
flex_direction:row; //排列方向row | row-reverse | column | column-reverse;
justify-content:flex_start; //主轴对齐方式 flex-start | flex-end | center | space-between | space-around;
wrap-reverse（向上换）;
align-items: stretch; // 交叉轴对齐方式flex-start | flex-end | center | baseline | stretch;
align-content：flex-start； //多根交叉轴线的对齐方式 | flex-end | center | space-between | space-around | stretch;

• Flex布局子元素属性

flex：0 1 auto;//缩写flex-grow, flex-shrink 和 flex-basis，默认值为0 1 auto。后两个属性可选
flex-grow:1;
flex-shrink:1;//定义了空间不足时自身缩小比例，默认为1自动缩小，0不缩小
flex-basis:auto;//默认值为auto，即自身的本来大小
order:1;//定义自身排列顺序。数值越小，越靠前，
align-self:auto; //可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

超出文本，显示省略号

    overflow:hidden;
    space-white:nowarp;
    text-overflow:ellipsis
    
    
    display: -webkit-box;  /*  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  */
    -webkit-box-orient: vertical; /*  -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式  */
    -webkit-line-clamp: 3; /*  -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */

清除浮动：

• 1.父级设置宽高
• 2.父级设置overflower:hidden;
• 3.当前元素设置浮动。float：left

清除浮动以后脱离文档流，高度塌陷,解决方法清除浮动

.clear-fix {
        *zoom: 1
 }
.clear-fix::after {
    content: '';
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
 }

input背景透明：

background:transparent !important;//最高优先级
background:rgb(0,0,0,0.3);//黑色背景半透明

响应式

        @media screen and (min-width:960px){
            html{
                font-size: 20px;
            }
        }
        @media screen and (max-width: 500px) {
            html{
                font-size: 10px;
            }
        }
        @media screen and (max-width: 320px) {
            html{
                font-size: 5px;
            }
        }
      transform: translateX(-1px)translateY(2px);

栅格布局神器

https://grid.layoutit.com/