前端css3+h5

151 阅读5分钟

1,css3新特性:

  @font-face  加载新的字体样式
  border- radius(圆角),box-shadow(阴影),text-shadow(文本阴影),gradient(线性渐变)
  transformrotate(9deg)旋转;   scale(0.850.90)缩放;    translate(0px,-30px)定位;  skew倾斜
  animation(动画)
  弹性布局:displayflexflex-direction   排列方式;       flex-wrap 都排一条线(轴线 );     justify-content   主轴上面的对齐方式        align-content   多线轴上的对齐方式
 媒体查询:不同设备提供不同样式的方式,他为每种类型的用户提供最佳的体验
 多栏布局:column-count
 border-image边框图片;
 background-clip   规定背景的绘制区域        background-origin    规定背景图片的定位区域        background-size    规定背景图片的尺寸
 css选择器(多背景)rgba   ;css3唯一的伪元素  ::selection;

2,H5新特性:

 语义化标签(header,footer,nav,aside,article,section)
 增强性表单(date,time,email,url,seach,calendar)
 视频和音频(audio,video)
 canvas绘图
 SVG绘图
 地理定位
 拖放Api(drag,drop)
 webworker
 webstorage
websocket:
    是全双工、单向、单套接字连接。websocket是一个底层网络协议,可以在它的基础上构建其他的标准协议。
  常用的方法:connection(请求中,未完成连接)     open(连接已打开)  closing(连接正在关闭)   closed(连接已关闭)
 缓存
缓存:
  localStorage与sessionStorage缓存的使用只兼容到IE8
    本地存储,数据不会被保存在服务器上,而是存储在客户端本地。本地存储可以减少用户的请请求数据,提升网站的性能。

3,link与@import的区别:

1, @import是css提供的语法规则,只有导入样式表的作用;link是html提供的标签,不仅可以加载css文件,还可以定义rss,rel连接属性
2,加载页面时,link标签引用的css被同时加载‘@import引用的css将在页面加载完毕后被加载
3,@import是css语法有兼容性问题;link标签作为html元素,不存在兼容性问题
4,可以通过js操作DOM,插入link标签来改变样式;由于DOM方法是基于稳当的,无法使用@import的方式插入样式
5link引入的样式权重大于@import引入的样式

4, 重排与重绘的区别?

 重排:部分渲染树重新分析并且节点尺寸需要重新计算表现为重新生成布局,重新排列元素
 重绘:由于节点的几何属性发生改变或者由于样式发生改变,表现为某个元素的外观被改变

5,为什么要初始化css样式?

因为浏览器的兼容问题,不同浏览器对有些标签的默认值都不同,如果没有初始化css样式往往会出现浏览器之间的页面差异

6,CSS Sprites的理解

利用css sprites能更好的减少页面的http请求,从而大大提高页面的性能;css sprites能减少图片的字节。

7,display:none与visibility:hidden的区别?

 displaynone不显示对应的元素,在文档布局中不再分配空间(回流+重绘)
 visiblility:hidden隐藏对应的元素,在文档中仍保留分配的空间(重绘)

8,对BFC规范(块级上下文)的理解?

 BFC规定了内部的Block Box如何布局
 1,根元素,即html
 2float不为none(默认)
 3overflow的值不为visible(默认)
 4display的值为inline-bock、table-cell、table-caption
 5position的值为absolute或fixed

9,css优化,提高性能的方法:

1,避免过度约束
2,避免后代选择符
3,避免链式选择符
4,使用紧凑的语法
5,避免不必要的命名空间
6,避免不必要的重复
7,名字的命名规范

10,传统浏览器访问的过程:

 1,用户在浏览器输入要访问的域名
 2,浏览器向域名解析服务器发出解析请求,获得此域名对应的ip地址
 3,浏览器利用所得的ip地址,向ip对应的服务器发出访问请求
 4,服务器对此响应,将数据回传至浏览器端显示出来;

11,http与https的区别?

http一般指的是超文本传输协议,是为web浏览器与web服务器之间的通信而设计的,基于TCP/ip通信协议来传递数据的
https是以安全目标的http通道,简单说是http的安全版,https的安全技术为ssl,因此加密的详细内容需要ssl。
http是超文本传输协议,信息是明文传输的,https则是具有安全性的ssl加密传输协议
http与https的使用完全不同的连接方式,用的端口号也不一样,前者是80,后者是443。
https加密协议一般都需要付费。

12,localStorage与sessionStorage区别?

相比较cookie而言,localStorage和sessionStorage的存储大小很大,localStorage能够长期存储保存,sessionStorage在回话期间保存
都是window提供的全局属性,用途都是在浏览器中存储的key、value对的数据。
sessionStorage在关闭窗口或者标签页的时候将会删除。
localStorage则没有这个特性,除非手动删除。

13,一次完成的http请求?

1,域名解析
2,发起TCP3次握手
3,建立TCP连接后发起http请求
4,服务器响应请求,返回结果
5,浏览器得到http标签代码
6,对页面进行渲染并呈现给用户