day13

作业笔记：

doctype document type
文档类型（规定使用w3c标准）
严格模式和混杂模式

lang="en"告诉搜索引擎爬虫页面关于什么内容 language 语言 en english zh 中文 根标签 html-hypertext markup language 超文本标记语言由一对对具有语言化的标签组成 头标签：左尖角号< 加上 右尖角号 > 尾标签：左尖角号< 加上 结束符/ 加上 右尖角号 >

head/body结构化标签

页面布局先定义HTML框架和预定义Css样式，再给html框架添加属性，结构划分完成
在添加框架内的内容与样式;
1.浮动float属性造成的塌陷解决方案
使用伪元素::after,::befor定义在浮动标签，父元素上设置属性。
使用.clearfix
预定义样式
.fl{
float:left;
}
.fr{
float.right;
}
.clearfix::after{
content="";
display=block;
clear=both;
}
2.元素过度transition属性（复合属性）
配合伪元素::hover使用
transition: name tiem 曲线 开始时间;
(百度菜鸟教程)
transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

3.盒模型
宽度white + 左右border + 左右margin + 左右padding
高度height + 左右border + 左右margin + 左右padding

4.文本三件套:
overflow: hidden;
溢出隐藏
text-overflow:ellipsis;
溢出打点
white-space: nowrap;
文本不换行
/文本三件套/

5：文档流
浏览器是按照规范规定元素默认属性，可以通过display属性改变其默认属性。
浏览器在初始化的时候标签都是存在默认属性的，在开发的时候添加的属性覆盖了浏览器的默认属性，才显示出了设置的内容与样式。

行内元素一般是内容的容器，而块级元素一般是其他容器的容器。
一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行；
块级元素可以包含行内元素和其它块级元素，占据父元素的整个空间，可以设置 width 和 height 。

行级元素默认属性
display:inline; //不可以设置width、height

块级元素默认属性
display:block; //可以设置width、height

行块级元素默认属性display:inline-block;

ps:

分辨率是值设备像素（pt)，厂商出产生设置的屏幕发光点

css像素是相对像素，对比设备像素进行调整

像素比（DPR）
CSS显示与设备像素之间的对比关系
一个css像素占据的设备像素的多少

ps:iphone6(1334/750)

一个css像素对一个发光点
<!-- 点越大越模糊 -->

ps：
canvas 画布
var cavs = 获取canvas
var ctx = cavs.getContext(‘2d’)//画笔

ctx.beginPath();//开启当前画画路径
ctx.moveTo(100,100);//落笔点
ctx.lineTo(200,100);//两点之间的连线
ctx.lineTo(200,200);//两点之间的连线
ctx.lineTo(100,100);//两点之间的连线
ctx.lineWidth = 20;//线条粗细
ctx.strokeStyle = ‘#f00’;//颜色
ctx.closePath();//闭合当前的路径
ctx.stroke();//实际落笔功能
var imgDate = ctx.getImageData(70,70,160,160);//获取某个区域的像素数据
//sx-x坐标 sy-y坐标 宽和高
console.log(imgDate);
ctx.putImageData(imgDate,300,300)//把获取到的像素数据放到画板的300*300的位置
ctx.clearRect(0,0,500,500);//清除画板矩形区域
//sx-x坐标 sy-y坐标 宽和高