xhtml是xml的进化 和html 不同类 更严格一些
五大浏览器 ie(t) ff,opera(gecko) safari(w) chrome(b)
360,qq等都是ie ,chorme双核 的貌似 最重要是看内核 t g w b
总结:
标签 样式 选择器 浮动 兼容 BFC
三种布局 雪碧图 H5 CSS3 LESS
移动端 网络模型
zhuanlan.zhihu.com/p/260177225
1 标签标签
块 hupdfb ,
行内(内联) a span strong,
内联块(属于内联) img input
2 样式
引入方式
行内 内联样式 外联样式 link 导入 @import
link属于 xhtml @import 属于css
@impot 只能加载css 同步 低版本不兼容 不支持js控制dom
link属于 xhtml标签 css,rss等其他事物也可以 异步 兼容好 支持js
3 选择器 (通配符,id,class,属性,伪类lvha,伪元素 before,after
h5 新增 属性^= $= *= 结构伪类 : (first,last,nth之类的) ,结构伪元素 :: selection等 )
4 浮动 float (尽量少用浮动~~)
1 脱离标准流(悬浮起来了!)
2 浮动后 行内元素可以设置宽高 若不设置 会缩小(类似行内)
3 浮动后元素互相贴靠
4 浮动的图片可以把文字挤开
浮动的清除
1 给父元素设置(合适的)高度 2 父元素 clear both(margin失效 最好不用!)
3 隔墙法(加一个div) 内墙法 让父元素在子元素浮动后还有高度
4 BFC(overflow position )
5 兼容问题 准备好 sass less库即可
6 BFC body float positon overfolow,display (边距重叠,清除浮动,解决文字环绕)
7 三种布局 流动 浮动 层模型(定位)
div+css flex grid
grid-template-columns属性定义每一列的列宽，
grid-template-rows属性定义每一行的行高。
repeat()函数，简化重复的值。上面的
接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
grid-template-columns: repeat(2, 100px 20px 80px);
次数也可以是 auto-fill
一些关键字 1 repeat 2 auto-fill
3 fr 为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
fr可以与绝对长度的单位结合使用，这时会非常方便。
4 minmax() 5 auto 关键字表示由浏览器自己决定长度。
grid-row-gap 属性，
grid-column-gap 属性，
grid-gap属性是 是前面俩个的简写 第一个 是rowgap,第二个是c gap;
grid-template-areas 属性
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
grid-auto-flow 属性
这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。
justify-items 属性，
align-items 属性，
place-items 属性
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
place-items属性是align-items属性和justify-items属性的合并简写形式。
justify-content 属性，
align-content 属性，
place-content 属性
start end center space-around space-between
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
- grid-column-start属性：左边框所在的垂直网格线
- grid-column-end属性：右边框所在的垂直网格线
- grid-row-start属性：上边框所在的水平网格线
- grid-row-end属性：下边框所在的水平网格线
圣杯和双飞翼 (圣杯是大盒子包着左中右, 双飞翼是只包括中)
双飞翼 #inside{ margin:0 200px 0 180px; height:100px; } 包括的内部盒子 把翅膀挤出去 代码少~
圣杯 大盒子包裹所有 相对定位要配合
\
8 雪碧图
减少请求次数 ,提高加载速度
9 H5
新结构标签 header footer
新选择器 querySelector 表单控件 canvas 储存 地图,网络信息等新api
不對 应该 header nav footer section各个模块
\
canvas可以绘制图片
ctx.drawImage(图片对象,x,y,width,height)： x,y指的是矩形区域的位置，width和height指的是矩形区域的大小
\
\
☞ window.navigator.onLine： 返回浏览器的联网状态，正常联网（在线）返回 true，不正常联网（离线）返回 false。
\
9.2 文件读取
☞ 使用 FileReader() 构造器去创建一个新的 FileReader。
接口有三个用于读取文件的方法，返回结果在result中：
- readAsText：将文件读取为文本
- readAsBinaryString： 将文件读取为二进制编码
- readAsDataURL：将文件读取为DataURL
☞ FileReader 提供的事件模型：
- onabort：中断时触发
- onerror：出错时触发
- onload：文件读取成功完成时触发
- onloadend：读取完成触发，无论成功或失败
- onloadstart：读取开始时触发
- onprogress：读取中
一个简易的读取上传图片并渲染操作：
const file_input = document.querySelector('input'); file_input.onChange = function() { const file = this.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { const img = document.createElement('img'); img.src = reader.result; document.body.appendChild(img); } }10 CSS3 (yybjbzd )
圆角 阴影
背景 background(orgin clip size )
background-size (cover contain)
渐变色 line,radial-gradient
边框
转换 transform: translate() | rotate() | scale
3d 的话 要先转化 transform-style: preserve-3d;
动画 过渡 弹性盒子 flex
animation简写模式：animation: name duration timing-function delay iteration-count direction;
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
\
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
11LESS
12移动端
13网络模型
五层: 应用 传输 网络 数据链路 物理
七层: 应用 (表示,会话层) 传输 网络 数据链路 物理
