css框架

github上最全的资源教程-前端涉及的所有知识体系 目录 (?) [+] 前端无疑是2016年最火热的技术，没有之一。 各种前端mvc框架层出不穷，angular js，vue， React ，前端组件化开发概念已经深入人心。前端工资已经比手机端开发还要高了。 作为个人站长，学习下前端设计也是有必要的，一来有些小的设计问题可以自己解决，同时还能提高自己的审美，提高网站的ui设计水平。 必备基础技能 前端技能汇总 这个项目详细记录 了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习 的方向，完善技能和知识面。 frontend-dev-bookmarks 是老外总结的 前端开发 资源。覆盖面非常广。包括各种知识点、工具、技术，非常全面。 以下是个人觉得入门阶段应该熟练掌握的基础技能： HTML4 ， HTML5 语法、标签、语义 CSS2.1 ， CSS3 规范，与HTML结合实现各种布局、效果 Ecma-262 定义的javascript的语言核心，原生 客户端javascript ， DOM操作 ， HTML5新增功能 一个成熟的客户端javascript库，推荐 jquery 一门服务器端语言：如果有服务器端开发经验，使用已经会的语言即可，如果没有服务器端开发经验，熟悉Java可以选择Servlet，不熟悉的可以选PHP

1. 前言 　　大约在几个月之前，让我看完了《webkit技术内幕》这本书的时候，突然有了一个想法。想把整个web前端开发所需要的知识都之中在一个视图中，形成一个完整的web前端知识体系， 目的是想要颠覆人们对于前端只有三大块（html、css、js）的认识——做web前端需要的比这三大块要多得多 。 　　拖了好几个月了，但是由于近期将要参加的某一个活动，我不得不这两天把这个东西整出来。说干就干。上午我就开始在办公室画草图，乱七八糟的在那儿理思路。 　　 　　大家不要害怕，其实下文中的这个知识框架要比草图中的好看的多，草图大家权当没看见。 　　好了，废话不扯。下面请跟随我本博客的内容，来看看web前端开发除了htm、css和js之外，还有哪些东西需要你一步一步去掌握。 　　 　　在看内容之前，先看一下这个知识框架的预览图。图太大不好展示，看不清除，可在此下载清晰版 ： http://pan.baidu.com/s/1hqIUvUc （内有整个知识体系的图片和xmind文件） 　　 2. 分类 　　所有知识框架，那肯定是一个结构型的展现，就是一棵树。web前端的知识点非常多，也非常散，需要好几层结构来组织这个体系，否则就会显得很乱。那么如何组织、把谁和谁放在一块儿？这是真正值得我们去思考的，你也可以自己来思考一下这个问题。 　　在我总结的这个知识框架中，首先第一层我划分为： 理论知识

1. 布局框架： Bootstrap: http://getbootstrap.com/ Foundation: http://foundation.zurb.com/ Uikit: http://www.getuikit.com/ Web Components: http://css-tricks.com/modular-future-web-components// 2. 构建工具及包管理器： Grunt: http://gruntjs.com/ Yeoman: http://yeoman.io/ Bower: http://bower.io/ NPM: https://www.npmjs.org/ 3. 代码优化： Google Closure Compiler: CSS Lint: http://csslint.net/ JSHint: http://www.jshint.com/ JSLint: http://www.jslint.com/ 4. CSS预处理器 Less: http://lesscss.org/ Sass: http://sass-lang.com/ 5. 调试工具： Chrome： https://developers.google.com/chrome-developer-tools/ Firebug: https://getfirebug.com/

2019JS必看面试题: https://www.jianshu.com/p/f1f39d5b2a2e 1. javascript的typeof返回哪些数据类型. 答案：string,boolean,number,undefined,function,object 2. 例举3种强制类型转换和2种隐式类型转换? 答案：强制（parseInt,parseFloat,number） 隐式（== ===） 3. split() join() 的区别 答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串 4. 数组方法pop() push() unshift() shift() 答案：push()尾部添加 pop()尾部删除 unshift()头部添加 shift()头部删除 5. IE和标准下有哪些兼容性的写法 答案： var ev = ev || window.event document.documentElement.clientWidth || document.body.clientWidth Var target = ev.srcElement||ev.target 6. ajax请求的时候get 和post方式的区别 答案： 一个在url后面 ，一个放在虚拟载体里面 get有大小限制(只能提交少量参数) 安全问题 应用不同 ，请求数据和提交数据 7.

CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid 布局的核心属性有5个: .parent { display: grid; grid-template-colomns: 30px 1fr; grid-template-rows: repeat(3, 30px) 1fr; & > .child { grid-column: 1 / 3; grid-row: 1; } } 总的来说, Grid 布局就是: 父元素先定义好自己有几行几列. 然后, 子元素定义自己在第几行第几列(可以跨越多行或者多列) . 其中, display 属性大家应该很熟悉了吧? 这里不再多说. repeat函数表示将1个css值重复n遍. gird-column 可以拆分为 grid-column-start 和 grid-column-end 两个属性. gird-row 可以拆分为 grid-row-start 和 grid-row-end 两个属性. 参考: grid-template-columns grid-template-rows grid-column grid-row 2. grid-template-areas 和 grid-area grid

前端快速入门到高级工程师 概述 前端开发工程师是Web前端开发工程师的简称，2007年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素： HTML （ 标准通用标记语言 下的一个应用）、 级联样式表 和JavaScript。前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和 服务器 端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。 html(超文本标记语言) 什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 ( H yper T ext M arkup L anguage) HTML 不是一种编程语言，而是一种 标记语言 (markup language) 标记语言是一套 标记标签 (markup tag) HTML 使用 标记标签 来描述网页 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由 尖括号 包围的关键词，比如 HTML 标签通常是 成对出现 的，比如 和 标签对中的第一个标签是 开始标签 ，第二个标签是 结束标签 开始和结束标签也被称为 开放标签 和 闭合标签 html练习 css(级联样式表) CSS 概述 CSS

为什么要前端构建？ JavaScript和CSS的依赖问题 我们经常出现的另一个问题，就是JavaScript和CSS的依赖问题，说的通俗点就是JavaScript和CSS的在页面中的顺序问题！ 我们经常发现CSS没起作用，JavaScript的某个变量和方法找不到，有很多情况都是因为引入JavaScript或者CSS的顺序不对，虽 然我们可以使用一些RequireJS之类的模块管理，但是依然在很多情况下需要引入不同的文件，尤其是CSS没有一个好的模块化管理的组件。 那么我们就需要有一个统一的地方来管理JavaScript和CSS的顺序问题，而构建工具可以大大减少此类问题。 性能优化 我们都知道浏览器请求的文件越多越耗时，请求的文件越大越耗时，尤其是在我们现在很多使用前端MVC, MVVM框架的时候，我们为了前端代码更清晰，结构更合理，我们就由很多JS文件，无疑又拖慢了网页的速度。为了解决这个问题，因此我们需要做两件事 文件合并 浏览器需要下载多个JS文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件，假如浏览器并发数是5，你有20个JS文件，而每5个需要2S, 那么你光下载JS文件都需要8S，那么网页的性能可想而知，所以我们需要合并多个文件以减少文件的数量。 文件压缩 我们知道文件越大，下载越慢，而针对JavaScript和CSS, 里面的空格

一. css 40分 1. 什么是盒模型？ 2. Doctype的几种类型？ 3. 如何布局左不动右边自适应的两列布局？ 3. 如何布局两列等高？ 5. 如何布局右侧定宽，左侧或中间自适应？ 6. 如何布局三列自适应？ 7. gif,png,jpg的区别？ 8. 什么是css sprite?优缺点？ 10. 制作细线表格？ 11. position:relative,absolute,fixed区别与联系？ 12. 如何居中一个float:left的元素 13. Css在各浏览器下的兼容问题你通常是怎么来解决的，请分享你的经验； 二. Js 30分 1). 基础： 1. parseInt 与 parseFloat 的区别？ 2. valueof 与 toString 的区别？ 3. 全等与相等？ 4. break 与 continue 的区别？ 5. js的作用域？ 6. Array 的 slice 与 splice 的区别？ 8. 正则中test 与 match 的区别？ 9. 如何在js中创建一个对象并继承他？ 10. 什么是prototype ? 什么是原型链？ 11. setTimeout 与 setInterval 的区别？ 13. cssText? 14. offsetWidth, scrollLeft, scrollHeight? 15. IE的事件与w3c事件的区别

如何能提高CSS编写技巧？怎么学好Web前端开发？很多人在学习Web前端时，刚开始都会学习HTML和CSS，HTML用于文本内容，CSS用于样式设计，掌握这两部分知识就可以进行简单的页面制作。不过如果耗时过长作品一般未免有些得不偿失，因此你需要掌握一些技巧，以提高CSS编写效率。 1、使用flex进行布局 flex弹性布局的出现是有原因的。浮动和inline-block虽然也能实现很多的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。flex可以很容易的按照我们预期的方式创建布局。 flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性，一旦你学会了它们，做任何响应式布局都是小菜一碟。目前各类浏览器的最新版本对flex的支持性也是没有任何问题的，所以你应该多多使用flex布局。 2、注意外边距折叠 与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。 解决外边距折叠的方法有很多种，对于初学者来说最简单的就是所有元素只使用一个方向上的margin，比如上下的外边距我们统统使用margin-bottom。 3、所有元素设置为Border-box 大多数初学者都不知道box-sizing这个属性，但实际上它非常重要。box

1.1 Bootstrap概述 Bootstrap简介： Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 Boostrap特点 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持： 所有的主流浏览器都支持 bootstrap。 Internet Explorer Firefox Opera Google Chrome Safari 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 bootstrap。 响应式设计：bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。 1.2 编写响应式页面 对应的模版和框架等，参考 Bootstrap ，可以直接下载代码，修改；另外还可以看 LayUI Bootstrap的使用步骤： 1.下载bootstrap http://www.bootcss.com/ 2.导入bootstrap.css文件 3.导入jquery.js 4.导入bootstrap.js <!-