前端的知识

我嘛,做一行爱一行,做前端当然要爱前端,自然要巩固前端知识。
Div.IO 高质量前端资源汇聚http://div.io/q#/welcome

在底层的前端框架领域中,最早是jquery称霸互联网,近两年MVVM类型的框架慢慢成为主流,Vue、React和Angular三大框架并驾齐驱。可以说,目前这四种是开发者用的最多使用最广的底层框架。
一、基于Vue的UI框架:ElementUI
官网地址:http://element.eleme.io
二、基于React的UI框架:AntDesign
官网地址:ant.design/
三、基于Angular的UI框架:NG-ZORRO
官网地址:https://ng.ant.design
四、基于Jquery的UI框架:QUICK UI
官网地址:http://www.uileader.com

目前最流行的开源前端框架

1、Bootstrap是最流行的前端开发框架,可以让不是前端工程师也能开发出优美的页面,更加快捷、方便的开发web页面和移动端应用。也能开发响应式web页面,上手也非常快。

中文官网:http://www.bootcss.com/

2.React 是Facebook 开发的框架,用于构建页面、javascript库。主要功能是对DOM操作,声明式设计,更快的开发出web应用系统

官网地址:http://react-china.org/

3、Semantic UI是一个完全语义化的前端CSS界面开发框架,跟 Bootstrap 比起来更加丰富些,不那么单一,在用户体验、样式都很丰富

官网地址:http://www.semantic-ui.cn/

4、Foundation by ZURB是开发适应各种设备上的前端框架,主要开发响应式web应用框架,提供很丰富的DEMO实例,学起来也非常方便上手,也提供丰富的图标库。

官网地址:http://www.foundcss.com/

5、Amaze UI是轻量级的前端应用框架,是国内比较流行的框架,比较适用于移动端响应式开发框架,可以按照项目要求生成专属的UI框架库进行使用,组件非常丰富,可以构建出漂亮的web页面。

官网地址:http://amazeui.org/

6、Pure是雅虎公司开发的轻量级、响应式CSS框架,整个框架包也是非常的小,官网也提供许多实例进行学习,对于开发小型系统界面样式可以考虑使用Pure,因为小巧方便。

官网地址:https://www.purecss.cn/

最流行最热门的JavaScript框架(程序库)

jQuery

jQuery是一个轻量级的JavaScript库,它打出的口号是“几行代码,能干大事”(Write Less, Do More),它拥有强大的选择器、出色的DOM操作、可靠的事件处理,以及完美的兼容性和链式操作。

prototype

prototype是最早的JavaScript库之一,对内置对象做了大量扩展,目前广泛应用在Ajax开发,功能实用尺寸小,兼容各种浏览器。

Dojo

Dojo是一款非常适合企业级应用的JavaScript库,也是一款面向对象的库。提供了很多其他库没有的东西,基于SVG/VML的矢量图形库、生成图标的组件、离线存储的API和Comet支持等等。

Ext JS

Ext JS框架主要用于创建前端用户界面,支持自动生成行号,动态显示列,支持本地及远程分页,对单元格进行渲染,Ext JS中的表格功能尤其强大,使用此框架是界面非常美观。

MooTools

MooTools是一个轻量,简洁,模块化,面向对象的JavaScript框架,语法跟prototype基本一样,扩展性与兼容性都比较强。

UIZE

UIZE是一款免费的JavaScript框架,它支持移动设备,可以很容易的将css皮肤更换,有大量的内置饰件,能呈现出令人目眩的效果和强大的功能。

MochiKit

MochiKit是一个文档非常完善的常用JavaScript库。它提供了与其他库相同的DOM操作方法。通过将色彩和视觉效果,以及它自己的调试用的日志面板整合起来,使得其他库变得不再必要。其网站给它打出的口号是“让Javascript不那么差劲”。

Qooxdoo

Qooxdoo是一个用于开发Ajax应用程序的全面和创新的GUI框架。它利用面向对象的JavaScript允许开发令人印象深刻的跨浏览器的应用。它能开发出类似于Window桌面风格的Web2.0应用程序,使用Qooxdoo甚至你不需要HTML 、CSS和DOM等知识

CSS盒子模型:

前端的知识_第1张图片

从里到外分别是Content(内容)、Padding(内边距)、boder(边框)、margin(外边距)


绝对定位、相对定位相关知识

relative相对位置:设置偏移量,之前的位置还在。

absolute绝对位置:设置偏移量,之前的位置不在了。

详情请看:https://www.cnblogs.com/heroine/p/5852748.html


 什么时候需要清除浮动?清除浮动方法总结


当容器包裹不住里面的东西的时候需要清除浮动。

加上clear:both

详情请看:https://www.jianshu.com/p/5a7854a73298


水平居中

1.如果浮动元素定宽,可以设置margin:0 auto居中

2.如果浮动元素不定宽,在外层包裹一个div .wrap {position:relative;//为了让元素可以偏移float:left;//让元素具有宽度,利用BFC元素特性 left:50%;} .content{position:relative;float:left;right:50%;},由于.wrap也浮动,为了不影响其他元素,需要清除浮动



	
		
		

	
	
123

前端的知识_第2张图片

垂直居中

  核心代码:  vertical-align: middle; display: table-cell;


	
		
		

	

    

前端的知识_第3张图片

水平垂直居中

方法一:



    
        
        

    

前端的知识_第4张图片


如果子元素大小未知,就把

   margin: -50px 0 0 -50px;

改为

  transform: translate(-50%,-50%);

方法二:



	
		
		

	




你可能感兴趣的:(front-end-other,框架,css,html,js)