16.隐藏元素的三种方法
1）display：none 元素在页面上将消失，不占据页面空间，会导致浏览器的回流与重绘,不能响应交互类事件；
2）visible:hidden 元素在页面占据的空间不变，所以它只会导致浏览器重绘而不会回流，也不能响应交互类事件；
3）opacity：0 元素在页面占据的空间不变，不会导致浏览器回流或重绘，可以响应交互类事件。
17.HTML5新增内容
1）语义化标签
2）增强型表单
常用placeholder：输入框默认提示，在用户输入后消失。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
3) websocker
4) localstorage和sessionstorage
5）canvas绘图
6）拖拽
7）地理位置
window.navigator.geolocation
8）DOM扩展
9）媒体元素
video audio
18.BOM和DOM的区别
BOM是浏览器对象模型：提供了独立于内容与浏览器窗口进行交互的方法和接口
DOM文档对象模型：处理网页内容的方法和接口
DOM的最根本的对象是BOM的window对象的子对象
19. window.location
url = window.location.href; /* 获取完整URL */
/* http://127.0.0.1:8020/Test/index.html#test?name=test */
url = window.location.pathname; /* 获取文件路径（文件地址） */
/* /Test/index.html */
url = window.location.protocol; /* 获取协议 */
/* http */
url = window.location.host; /* 获取主机地址和端口号 */
/* http://127.0.0.1:8020/ */
url = window.location.hostname; /* 获取主机地址 */
/* http://127.0.0.1/ */
url = window.location.port; /* 获取端口号 */
/* 8020 */
url = window.location.hash; /* 获取锚点（“#”后面的分段） */
/* #test?name=test */
url = window.location.search; /* 获取属性（“?”后面的分段） */
/* 如果需要URL中的某一部分，可以自己进行处理 */
url = window.location.pathname;
url = url.substring(url.lastIndexOf('/') + 1, url.length);
/* /index.html */
20. window.navigation
navigation.appcodename :返回浏览器的代码名
navigation.appname: 返回浏览器的名称
navigation,appVersion: 返回浏览器的平台和版本信息navigation.cookieEnabled:
navigation.platform: 返回运行浏览器的操作系统平台
navigation.userAgent: 返回由客户机发送服务器的user-agent 头部的值
21.herf和src的区别
href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上
22.link和@import的区别
1）从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。
2）加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。
3）兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别；而link是 HTML 标签，所以不存在兼容性问题。
4)DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。
5)link方式的样式权重高于@import的权重。
23. css画一个三角形
.box1{
width: 0;
height: 0;
border: 10px solid ;
border-color: red transparent transparent transparent;
}
24.实现三栏布局
(9条消息) 布局：三栏布局（7种方法）_Ying（英子）的博客-CSDN博客_三栏布局
左右两边宽度固定，中间自适应
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="main">Main</div>
</div>
1）position和margin
/*左右进行绝对定位*/
.left,.right{
position: absolute;
height:100%;
top: 0;
background: #ff69b4;
}
.left{
left: 0;
width: 100px;
}
.right{
right: 0;
width: 200px;
}
/*中间用margin空出左右元素所占的空间*/
.main{
height:100%;
margin: 0 100px 0 200px;
background: #659;
}
2）float和margin
/*左边栏左浮动*/
.left{
float:left;
height:100%;
width:100px;
background:#ff69b4;
}
/*中间栏自适应*/
.main{
height:100%;
margin:0 200px 0 100px;
background: #659;
}
/*右边栏右浮动*/
.right{
float:right;
height:100%;
width:200px;
background:#ff69b4;
}
3）flex
.container{
display: flex;
}
.left{
width:200px;
background: red;
}
.main{
flex: 1;
background: blue;
}
.right{
width:200px;
background: red;
}
4）gird
.container{
display: grid;
width: 100%;
grid-template-rows: 100px; /*设置行高*/
grid-template-columns: 100px auto 200px; /*设置列数属性*/
}
.left{
background: red;
}
.main{
background: blue;
}
.right{
background:red;
}
5）圣杯布局
<div class="container">
<div class="main col">Main</div>
<div class="left col">Left</div>
<div class="right col">Right</div>
</div>
/* 两边定宽，中间自适用 */
body,html,.container{
height: 100%;
padding:0;
margin: 0;
}
.col{
float: left; /* 三个col都设置float: left,为了把left和right定位到左右部分 */
position:relative;
}
/*父元素空出左右栏位子: 因为上一步中，左右栏定位成功了，但是中间栏的内容会被遮盖住*/
.container{
padding:0 200px 0 100px;
}
/*左边栏*/
.left{
left:-100px;
width: 100px;
height:100%;
margin-left: -100%;
background: #ff69b4;
}
/*中间栏*/
.main{
width:100%;
height: 100%;
background: #659;
}
/*右边栏*/
.right{
right:-200px;
width:200px;
height:100%;
margin-left: -200px;
background: #ff69b4;
}
6）双飞翼布局
<div class="container">
<div class="main col ">
<div class="main_inner">Main</div>
</div>
<div class="left col ">Left</div>
<div class="right col ">Right</div>
</div>
body,html,.container{
height: 100%;
padding:0;
margin: 0;
}
.col{
float: left; /* 把left和right定位到左右部分 */
}
.main{
width:100%;
height:100%;
background: #659;
}
.main_inner{ /* 处理中间栏的内容被遮盖问题 */
margin:0 200px 0 100px;
}
.left{
width: 100px;
height: 100%;
margin-left: -100%;
background: #ff69b4;
}
.right{
height:100%;
width:200px;
margin-left: -200px;
background: #ff69b4;
}
25.transition（过渡）
transition:属性 时间 延迟时间 时序
transition-property: 执行过渡的属性 属性之间用“，”隔开，所有属性可以用all
transition-duration:执行过渡的时间
transition-delay: 过渡延迟，等待一段时间再过渡
transition-timing-function:过渡的时序方式
贝塞尔曲线：cubic-bezier（）
ease 默认值 慢-块-慢
linear 匀速运动
ease-in 慢-快 加速运动
ease-out 快-慢 减速运动
ease-in-out 加速-减速
step（2，end/start） 分步执行
26.animation（动画）
animation-name: 动画名字 ;
animation-duration: 执行时间 ;
animation-delay: 延迟执行时间 ;
animation-timing-function: 执行的时序;
animation-iteration-count: 动画执行的次数; infinite 无限次
animation-direction:执行的方向
normal
reverse 反方向
alternate 重复执行时反向执行
alternate-reverse 重复执行时反向执行
animation-play-state: 动画执行的状态 running; paused；
animation-fill-mode:填充方式
none 结束回到from位置
forwards 结束回到to位置
backwards 动画延时等待时，就会到from位置
both 结合了forwards backwards
关键帧 @keyframes run（动画的名字）{
from{}
to{}
}
26.transform（变形）
通过css改变元素的形状和位置，不会脱离文档流，不会影响页面布局
transform-origin 指定变形的原点
1）transform:平移 平移元素是相对于自己来定位的
translateX() translateY() translateZ()：元素和人眼之间的距离，近大远小
2）transform:旋转
rotateX() rotateY() rotateZ()
deg 度数 turn 圈
3）transform:缩放
scale（） 双方向的缩放
scaleX（） 水平缩放
scaleY() 垂直缩放
27.水平垂直居中
1）flex
2）positiong
3）transform
28.文字省略
1）单行
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2）多行
overflow:hidden
text-overflow:ellipsis
display:-webkit-box
-webkit-line-lamp:2 第几行
-webkit-box-ovient:verficat
28.meta标签属性
29.实现边框0.5PX
1）渐变
原理：高度1px,背景渐变，一半有颜色，一半透明。
.border-gradient:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
}
2）缩放
.border-scale:after{
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #f00;
/* 如果不用 background-color, 使用 border-top:1px solid #f00; 效果是一样的*
transform:scaleY(.5);
}
30.grid网格布局
CSS Grid 网格布局教程 - 知乎 (zhihu.com)
1）容器属性
1.display：grid
2.gird-template-colums：repeat（3，300px）设置列
3.gird-template-row：200px 300px 设置行
4. grid-row-gap 行间距
grid-column-gap列间距
grid-gap列间距
5.repeat(3,33.33%)：复制，使用绝对单位，也可以使用百分比
6. auto-fill ：repeat(auto-fill, 100px); 如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
7.fr 关键字:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
8.minmax():
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
minmax(100px, 1fr)表示列宽不小于100px，不大于1fr
9. auto 关键字：
grid-template-columns: 100px auto 100px;
auto关键字表示由浏览器自己决定长度。
10. 网格线的名称
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。
11. grid-template-areas 属性
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c' 'd e f' 'g h i';
}
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。gridtemplate-areas属性用于定义区域。上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。
12.多个单元格合并成一个区域的写法如下。
grid-template-areas: 'a a a' 'b b b' 'c c c';
13. grid-auto-flow 属性
row：默认，先行后列 放不下就换行
row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。
column:先列后行
column dense，表示"先列后行"，并且尽量填满空格。
14. justify-items 属性，置单元格内容的水平位置（左中右
align-items 属性，元格内容的垂直位置（上中下
place-items 属性, 简写
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
15.grid-auto-columns 属性，
grid-auto-rows 属性
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px;
}
上面代码指定新增的行高统一为50px（原始的行高为100px）。
2）项目属性、
1. grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
2. grid-column 属性，grid-column-start和grid-column-end的合并简写
grid-row 属性，grid-row-start属性和grid-row-end的合并简写形式
.item {
grid-column: / ; grid-row: / ;
}
3.grid-area 属性
grid-area属性指定项目放在哪一个区域。
.item-1 {
grid-area: e;
}
31.canvas
1、矩形（唯一一个可以直接绘制的形状）
* 绘制一个填充矩形 fillRect（x,y,width,height）
* 绘制一个描边矩形 strokeRect（x,y,width,height）
* 清除一个矩形形状的区域 clearRect（x,y,width,height）
<canvas id="canvas">
你的浏览器不支持
</canvas>
<script type="text/javascript">
let canvas=$('#canvas').get(0);
let ctx=canvas.getContext('2d');
canvas.width=300;
canvas.height=300;
ctx.fillRect(50,50,50,50);
ctx.strokeRect(100,100,50,50);
ctx.clearRect(75,75,25,25);
<script>
2、路径（一个路径不会显示出来，需要描边和填充的配合）
a）矩形路径
* rect(x,y,w,)绘制一个矩形路径,没有填充和描边
* fill()填充
* stroke()描边
ctx.beginPath(); //路径开始
ctx.rect(75,75,25,25); //绘制矩形路径
ctx.stroke(); //描边
ctx.closePath(); //路径闭合
b）直线路径
* 绘制一条直线 moveTo（）：起点 lineTo（）：终点
ctx.beginPath();
ctx.moveTo(200,100); //起点，直线是默认的两像素的宽
ctx.lineTo(100,200); //终点
ctx.moveTo(50,200.5); //起点，宽1像素
ctx.lineTo(150,200.5); //终点
ctx.stroke();
ctx.closePath();
c）三角形路径
* 绘制三条直线 moveTo（x,y）：起点 lineTo（x,y）：终点
ctx.beginPath();
ctx.moveTo(50,100);
ctx.lineTo(150,100);
ctx.lineTo(100,200);
ctx.lineTo(50,100);
ctx.stroke();
ctx.closePath();
d）圆和圆弧
* 绘制圆弧、圆 arc(圆心x，圆心y，半径，起始角度，结束角度，旋转方向);
* 旋转方向取值：true（逆时针）|false（默认，顺时针）
ctx.beginPath();
ctx.arc(150,150,100,Math.PI/2,Math.PI,false);
ctx.fill();
ctx.closePath();
3、绘制文本（处理文本能力很弱）
* font 字体的样式（有一定的顺序 斜体-大小-字体）
* textAlign 文本对齐方式（以起始点做为参考）,取值left|center|right|start|end
* fillText("文本"，起始x，起始y，宽度) 填充字体，这里的宽度是只能压缩不能放大
* strokeText("文本"，起始x，起始y，宽度) 描边字体，同上
ctx.font='italic 50px Arial';
ctx.textAlign='end';
ctx.fillText('Hi,there!',100,50);
4、绘制图片
/*
* let img=new Image(); ①、创建对象，获取图片
* img.src='../images/image03.jpg';
* img.addEventListener('load',function () { ②、当图片加载完成开始绘制
* …………………… ③、绘制图片有三种类型
* =>绘制默认大小的图片：ctx.drawImage(图片，起始x，起始y)
* =>绘制经过缩放的图片：ctx.drawImage(图片，起始x，起始y，缩放后的宽，缩放后的高)
* =>绘制经过切片的图片：ctx.drawImage(图片，sx，sy，sw，sh，dx，dy，dw，dh)
* s ==> 原始图片资源 d ==> 画布
* });
* */
let img=new Image();
img.src='../images/image03.jpg';
img.addEventListener('load',function () {
ctx.drawImage(img,100,100,100,100,50,50,200,200);
//先把原图片切片之后，在放在画布上面去具体操作
5、视频绘制
视频绘制其实就是视频一帧一帧的绘制，在利用定时器显示出来
6、canvas内容样式设置
a）、颜色
/*
* fillStyle 填充颜色，取值与在css里面相同
* strokeStyle 描边颜色，同上
* */
ctx.fillStyle='rgba(150,50,50,.5)'; //设置颜色
ctx.beginPath();
ctx.arc(100,100,50,Math.PI/2,Math.PI*2,true);
ctx.fill(); //开始填充
ctx.closePath();
b）、透明度
/*
* globalAlpha 透明度，取值0~1
* */
ctx.strokeStyle='#ccc'; //设置颜色
ctx.globalAlpha=.6; //设置透明度
ctx.beginPath();
ctx.moveTo(50,100);
ctx.lineTo(50,200);
ctx.stroke(); //开始描边
ctx.closePath();
1
9
10
c）、线形设置
/*
* 线宽：lineWidth 取值0~正无穷
* 线两端样式：lineCap 取值butt（默认值，方的）|round（圆的）|square（方的，但是会比butt宽一点）
* 线拼接样式：lineJoin 取值miter（默认值，方的）|round（圆的）|bevel（带棱角的）
* */
ctx.strokeStyle='#ccc'; //颜色
ctx.globalAlpha=.5; //透明度
ctx.lineWidth=10; //线宽
ctx.lineCap='round'; //线两端
ctx.lineJoin='miter'; //线连接方式
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,100);
ctx.lineTo(100,100);
ctx.stroke();
ctx.closePath();
e）、线性渐变
/*
* createLinearGradient（渐变起始x，渐变起始y，渐变终止x，渐变终止y）创建渐变
* addColorStop（位置，颜色）开始设置渐变，位置取值为0~1
* fillStyle添加渐变
* */
let linearGradient=ctx.createLinearGradient(50,50,150,150);
linearGradient.addColorStop(0,'green');
linearGradient.addColorStop(.25,'yellow');
linearGradient.addColorStop(.5,'blue');
linearGradient.addColorStop(.75,'black');
linearGradient.addColorStop(1,'red');
ctx.fillStyle=linearGradient;
ctx.beginPath();
ctx.rect(50,50,100,100);
ctx.fill();
f）、阴影
/*
* shadowOffsetX x方向的阴影
* shadowOffsetY y方向的阴影
* shadowBlur 模糊程度，取值0~正无穷
* shadowColor 阴影颜色
* */
ctx.fillStyle='#ccc';
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowBlur=10;
ctx.shadowColor='black';
ctx.beginPath();
ctx.rect(50,50,100,100);
ctx.fill();
ctx.closePath();
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
