前端的知识

最新推荐文章于 2024-05-16 20:30:06 发布

原创最新推荐文章于 2024-05-16 20:30:06 发布 · 278 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#框架 #css #html #js

front-end-other 专栏收录该内容

9 篇文章

订阅专栏

我嘛，做一行爱一行，做前端当然要爱前端，自然要巩固前端知识。

Div.IO 高质量前端资源汇聚http://div.io/q#/welcome

在底层的前端框架领域中,最早是jquery称霸互联网,近两年MVVM类型的框架慢慢成为主流，Vue、React和Angular三大框架并驾齐驱。可以说，目前这四种是开发者用的最多使用最广的底层框架。

一、基于Vue的UI框架：ElementUI

官网地址：http://element.eleme.io

二、基于React的UI框架：AntDesign

官网地址：https://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盒子模型：

从里到外分别是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也浮动，为了不影响其他元素，需要清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style>
	  .content {
    width: 100px;
    height: 100px;
    background-color: #e92322;
    float: left;
    position: relative;
    left: -50%;
     }
        .wrap {
    float: left;
    position: relative;
    left: 50%;
            }
</style>
	</head>
	<body>
<div class="wrap">
<div class="content">123</div>
</div>
	</body>
</html>

垂直居中

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style type="text/css">
    #demo {
        width: 300px;
        height: 200px;
        background-color: grey;

        display: table-cell;
        vertical-align: middle;
    }
        .fl {

            float: left;
            width: 50px;
            height: 50px;
            background-color: black;

        }
    </style>
	</head>
<body>
    <div id="demo">
        <div class="fl"></div>
    </div>
</body>
</html>

水平垂直居中

方法一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
<style type="text/css">

.box {
    background-color: blue;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: black;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
/*    往右和往下走父容器的一半.*/
    margin: -50px 0 0 -50px;
    /*然后往上和往左走自己的一半,就完成了*/
 }
    </style>
    </head>
<body>
<div class="box">
    <div class="content">
    </div>
</div>
</body>
</html>

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

   margin: -50px 0 0 -50px;

改为

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

方法二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style type="text/css">

.box {
    background-color: blue;
    width: 300px;
    height: 300px;
   display: flex;
   /*使子项目水平居中*/
   justify-content: center;
   /*使子项目垂直居中*/
  align-items: center;
  
}
.content {
    background-color: black;
    width: 100px;
    height: 100px;
 
    </style>
	</head>
<body>
<div class="box">
    <div class="content">
    </div>
</div>
</body>
</html>