css
yuanyuanispeak
这个作者很懒,什么都没留下…
展开
-
css知多少(11)——position
1. 引言 本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的每一个知识,都有它的用途,都要解决一些之前遇到的问题。 如果没有定位,我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上,外加通过margin和padding调整一转载 2017-03-17 10:28:07 · 265 阅读 · 0 评论 -
new关键的深刻认识
题目点评考察对new关键的深刻认识,是否对前端知识有专研,如果没有专研的人,肯定说创建了一个对象,恭喜你面试官知道你是小菜鸟来的,这次面试基本上没有太大的希望了。一定要对new过程的4个步骤非常清楚,这样才能深深地抓住面试官的心!题目解析先看代码 [javascript] view plain copyvar Func=function(){ }; var fu...转载 2017-06-13 17:43:02 · 346 阅读 · 0 评论 -
Javascript 创建对象方法的总结
Javascript 创建对象方法的总结 最近看了一下《Javascript高级程序设计(第三版)》,这本书很多人都推荐,我也再次郑重推荐一下。看过之后总得总结一下吧,于是我选了这么一个主题分享给大家。 使用Javascript创建对象的方法有很多,现在就来列举一下: 1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打转载 2017-06-13 19:32:39 · 276 阅读 · 0 评论 -
深入理解 JavaScript 异步系列(1)——基础
深入理解 JavaScript 异步系列(1)——基础前言2014年秋季写完了《深入理解javascript原型和闭包系列》,已经帮助过很多人走出了 js 原型、作用域、闭包的困惑,至今仍能经常受到好评的留言。很早之前我就总结了JS三座大山这个概念(虽然没有到处宣扬),前两座(原型、作用域)已经基本讲明白,而第三座(异步)也应该做一个总结。于是,2017年初春,我花转载 2017-06-14 09:51:56 · 312 阅读 · 0 评论 -
深入理解 JavaScript 异步系列(2)—— jquery的解决方案
第一部分,jQuery-1.5 之后的 ajax本地址 http://www.cnblogs.com/wangfupeng1988/p/6515779.html 未经允许不得转载~$.ajax这个函数各位应该都比较熟悉了,要完整的讲解 js 的异步操作,就必须先从$.ajax这个方法说起。想要学到全面的知识,大家就不要着急,跟随我的节奏来,并且相信我。我安排的内容,肯定都是有用的,对主转载 2017-06-14 13:42:10 · 419 阅读 · 0 评论 -
JavaScript 垃圾回收
JavaScript 垃圾回收在公司经常会听到大牛们讨论时说道内存泄露神马的,每每都惊羡不已,最近精力主要用在了Web 开发上,读了一下《JavaScript高级程序设计》(书名很唬人,实际作者写的特别好,由浅入深)了解了一下JavaScript垃圾回收机制,对内存泄露有了一定的认识。和C#、Java一样JavaScript有自动垃圾回收机制,也就是说执行环境会负责转载 2017-06-13 11:53:51 · 420 阅读 · 0 评论 -
vue-cli入门(一)——项目搭建
前言vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建、打包、维护管理等都非常方便快捷。在开始项目之前,建议先熟悉vue.js基本语法。安装Node环境1.安装node.js在node.js官网下载稳定版本下载node.js下载完成后点击安装,安装过程很简单,一直next即可,转载 2017-06-21 09:23:44 · 1259 阅读 · 0 评论 -
css知多少(10)——display
1. 引言 网页的所有元素,除了“块”就是“流”,而且“流”都是包含在“块”里面的(最外层的body就是一个“块”)。在本系列一开始讲《浏览器默认样式》的时候,大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”(剩下的就是“流”)。这部分知识非常重要也非常基础,因此在所有的前端面试题中,都会问道哪些元素是“块”哪些元素是“流”。 其实,这部分知识都囊括在转载 2017-03-17 11:38:18 · 266 阅读 · 0 评论 -
css知多少(7)——盒子模型
css知多少(7)——盒子模型1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类:文字、块。 第一类——文字。这部分相对比较简单一些,例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都用相对值,这些东西在《css知多少(4)——解读浏览器默认样式》转载 2017-03-17 13:23:56 · 773 阅读 · 0 评论 -
iconmoon 使用说明
iconmoon 可以用来把svg图片生成字体图标,可以通过设置字体大小和字体颜色来改变图标的大小和颜色而不失真,下面是通过iconmoon网站来生成图标字体步骤,如下图所示:1:点击iconmoon App按钮进入按钮生成页面2:选择你要生成的图标或者导入你要生成的图标图片,然后点击generate font 按钮3:可以设置字体的名字,然后点击下载既可完成代码下载原创 2017-11-01 10:14:50 · 6102 阅读 · 0 评论 -
使用padding代替高度实现背景图片高度按比例自适应
高度百分比将高度设置成百分比时,其高度是基于父元素来定的,设置成50%,就是将该元素高度设置成 父元素的高度值 x 50%。但是将高度设置成百分比时,往往是不生效的!高度依然为0,这是为啥? 道理很简单,那就是父元素的高度也为0。所以这就需要讲到浏览器对宽度及高度是如何计算的。浏览器在计算有效宽度时会考虑浏览器窗口的宽度,如果没有设置绝对宽度,就会自动将页面内容横向平铺填满整个转载 2018-01-25 11:43:13 · 2638 阅读 · 0 评论 -
line-height
二、一些字面意思“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字母的底边线。下图的红色线即为基线。vertical-align中有top,middle,baseline,bottom与之是由关联的,但具体细节如何,浏览器差异转载 2018-02-28 16:24:31 · 433 阅读 · 0 评论 -
defer和async的详细区别
看过javascript高级程序设计的人,在javascript高级程序设计里,应该看到了介绍了有关defer和async的区别,可是比较浅显,而且也说得不是很清楚。下面我们来通过图片来详细了解下dfer和async的区别。 下面来看看这三句话:1. 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前转载 2017-06-13 09:57:47 · 304 阅读 · 0 评论 -
css知多少(8)——float上篇
css知多少(8)——float上篇1. 引言 对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人——你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象。 这就是我们又爱又恨的——float。所以,系统的学一学float是非常非常重要的。除了看书和看博客文章之外,我推荐大家去看一个奇葩(转载 2017-03-17 10:52:33 · 262 阅读 · 0 评论 -
请用fontAwesome代替网页icon小图标
1. 引言网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋。下面的小图标,你是不是会经常用到?你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲到。因为它们也可以变为彩色的。黑白的也好,彩色的也罢,如果用传统的“css + 图片”的方式来制作这些icon,我估计你至少得雇佣一个专业的设计师吧。一般的程序猿,包括前端程序猿,估计只能转载 2017-03-17 13:38:11 · 579 阅读 · 0 评论 -
css知多少(3)——样式来源与层叠规则
css知多少(3)——样式来源与层叠规则 上一节《css知多少(2)——学习css的思路》有几个人留言表示思路很好、继续期待,而且收到了9个赞,我还是比较欣慰的。没看过的朋友建议先去看看上一节。 这一节就开始实践上一节的思路!1. “层叠”的概念 CSS——层叠样式表,其中的“层叠”是什么意思呢?层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程。举一个转载 2017-03-17 14:04:07 · 535 阅读 · 0 评论 -
css知多少(6)——选择器的优先级
1. 引言 上一节《css知多少(5)——选择器》最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。 上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一样,这里的到底听从谁的命令? 上面还是比较简单的,下面在来一个复杂的: 上图中的该显示成什么颜色呢?2. 特指度 要解决以上问题,转载 2017-03-17 10:10:24 · 340 阅读 · 0 评论 -
常用CSS优化总结——网络性能与语法性能建议
在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来。页面优化明显不是一两句能够说完的,这两天总结了一下CSS相关的优化知识,写篇博客梳理一下,还望大家多多指教关于CSS的优化工作主要从两个方面着手网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些语法性能:同样转载 2017-05-02 15:23:14 · 343 阅读 · 0 评论 -
CSS3 Media在常用设备的设置值
阅读目录手机 平板笔记本电脑可穿戴设备微信页面的适配摘要:今天的一个小小的项目中,在各种手机上样式都显示正常,唯独iphone4s的有些许问题。产品经理又说iphone4s用户还挺多的,无奈,只能查一查iphone4s的media值,顺便做个小小总结;直接上代码: 回到顶部手机 iphone View Code转载 2017-05-02 16:39:15 · 1506 阅读 · 0 评论 -
用css让一个容器水平垂直
【原】用css让一个容器水平垂直阅读目录方法一:position加margin方法二: diaplay:table-cell方法三:position加 transform方法四:flex;align-items: center;justify-content: center方法五:display:flex;margin:auto方法六:纯position转载 2017-05-02 16:46:30 · 536 阅读 · 0 评论 -
深入理解 JavaScript 异步系列(4)—— Generator
第一部分,ES6 中的 Generator原文地址 http://www.cnblogs.com/wangfupeng1988/p/6532713.html 未经作者允许不得转载~在 ES6 出现之前,基本都是各式各样类似Promise的解决方案来处理异步操作的代码逻辑,但是 ES6 的Generator却给异步操作又提供了新的思路,马上就有人给出了如何用Generator来更加优转载 2017-06-16 11:41:39 · 393 阅读 · 0 评论 -
深入理解 JavaScript 异步系列(5)—— async await
第一部分,ES7 中引入 async-await原文地址 http://www.cnblogs.com/wangfupeng1988/p/6532734.html 未经作者允许,不得转载~前面介绍完了Generator的异步处理,可以说是跌跌撞撞,经过各种基础介绍和封装,好容易出了一个比较简洁的异步处理方案,学习成本非常高————这显然不是我们想要的!因此,还未发布的 ES转载 2017-06-16 11:42:40 · 287 阅读 · 0 评论 -
vue-cli入门(二)——项目结构
前言在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli项目,那么接下来,我们来梳理一下vue-cli项目的结构。总体框架一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可。vue-cli项目总体结构文件结构细分转载 2017-06-21 09:25:54 · 1615 阅读 · 0 评论 -
vue.js路由vue-router(二)——路由进阶
导航钩子导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等。在开始之前,我们先来写两个路由新建html,引入vue.js及vue-router.jshtml lang="en">head> meta charset="UTF-8"> title>路由title> script src="j转载 2017-06-22 16:28:29 · 702 阅读 · 0 评论 -
px和em的战争好吧。
px和em的战争好吧。我承认我标题党了。其实我就是想说px和em的区别,网上资料其实一堆堆,但是还不如自己试验总结的清楚。前端高手可能觉得这玩意简单,但是作为小猫,还是好好学一下。下面一点点说~~~ px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。转载 2017-03-27 18:10:57 · 327 阅读 · 0 评论 -
css知多少(9)——float下篇
float内容比较多,咱们分上、下两篇来介绍,上篇已经写完,这是下篇。建议大家先把上篇看了,再来看下文,精彩内容不要掠过啊。1. 清除float 《上篇》中我们提到,float具有“破坏性”,它会导致父元素“坍塌”,这将不是所要看到的。如何去避免float带来的这种影响呢(也就是我们常说的“清除浮动”) ?方法有很多种,我在这里介绍4中供大家参考,大家可根据实际情况来选择。 先介绍转载 2017-03-17 11:20:42 · 344 阅读 · 0 评论 -
js中的事件委托或是事件代理详解
起因:1、这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的;2、其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考;概述:那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢?网上的各位大牛们转载 2017-06-13 09:16:47 · 349 阅读 · 0 评论 -
Flex 布局教程:语法篇
Linux下redis安装与使用 redis官网地址:http://www.redis.io/ 最新版本:2.8.3 在Linux下安装Redis非常简单,具体步骤如下(官网有说明): 1、下载源码,解压缩后编译源码。$ wget http://download.redis.io/releases/redis-2.8.3.转载 2017-02-09 15:35:29 · 272 阅读 · 0 评论