程序亦非猿

程序亦非猿

it's better to burn out than to fade away

谈谈dispaly position float
页面布局,或是在页面作一些小效果的时候经常会用到 display position float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛总结了一下。 让我们从基础的 Css 谈起,有很多初学者不明白 Css 的原理,一味的追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了。 块元素与行内元素 首先谈谈人们经常提及的块级元素 和 行内(内联)元素 p,ul,form,div 等元素都被称为块元素,这些元素显示一块内容(会自动换行),span,input,等元素称为行内元素,这两者主要...
16中方法实现水平居中垂直居中
水平居中1、若是行内元素,给父元素设置 text-align:center; 既可以实现行内水平居中 2、若是块级元素,该元素设置 margin:0 auto; 即可 3、若是子元素包含,float:left 属性,为了让子元素水平居中,则可以让父元素宽度设置成 fit-content ,并配合 margin ,作如下设置: 123456.parent { width: -moz-fit-content; width: -webkit-fit-content; width:fit-content; margin:0 auto;} fit-con...
CSS实现隐藏页面的5种方式
用 Css 隐藏页面也很多方法,你可以讲 opacity 设置为 0、将 visibility 设为 hidden、将 dispaly 设为 none 或者将 position 设为 absolute 然后将位置移动到不可见的区域 你有没有想过为什么我们有这么多技术来隐藏这些元素,而看起来他们实现的效果都是一样的,其实每一种方法和其他的方法之间都有一些细微的不同,这些不同决定了在一些特定的场合下使用哪一种方法,这篇教程将覆盖到那些你需要记住的细小不同点,让你根据不同的情况下,选择使用哪种方法隐藏元素 Opacityopacity 属性的意识就是设置让一个元素的透明度,它不是为了改变元素的...
IE8项目总结
公司最近接了一个兼容 IE 的项目,之前没有做过兼容 IE 的项目感觉也就和之前的差不多,但是做起来之后才之后那是差一条街啊,首先总结一下在 IE 下什么都不好用了 meta设置1<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> Jquery 如果项目要用 Jquery 的话就必须是 2.0 一下版本的才好用,因为 IE8 以下只兼容 2.0 一下的版本 border-radius在 IE 浏览器下 border-radius 圆角是不兼容的,解决办法,实际上是指的是一个名为 pie 的 htc 文...
基于vue-cli脚手架使用vue-router路由
上一个讲了 vue-cli 的安装方式,我们就趁热打铁,来学习一下,vue-router 的使用方法,首先我们需要安装一下路由需要安装到生产环境下的,执行以下命令 $ npm i vue-router 我们安装完路由之后就要去使用它,再次声明这个是基于 vue-cli 来配置的所以我们应该先去 src目录下有一个叫main.js 文件去进行配置 12345678910111213141516171819202122232425262728import App from './App'; // 最大的组件import VueRouter from 'vue-router' // 先引...
Vue-cli脚手架搭建
安装:注意:请确保 node 版本为 4.x、5.x 及以上 1、只限于 Linux 版本,首先我们先全局安装一下 $ npm i -g vue-cli 2、全局安装完之后,我们执行 $ vue list 这是查看 vue 给我们提供的脚手架的版本,有很多,我用的就是 webpack 3、选择我们用要使用的版本 $ vue init webpack test-exercise 这是安装我们要使用的版本 webpack 后面跟的是我们的项目名称 所有模板默认安装的是 Vue 2.x 版本,如果需要安装 1.x 版本,需要输入如下指令: $ vue init webpack#1.0...
移动端适配
最近公司写了一个移动端的项目,然后我简单说一下移动端适配的方案,其实移动端适配的方案有很多种,主要是rem,vh,vw,这些每个都有每个的好处,我用的就是 rem 来设置的移动自适应的配置,首先需要 viewport 设置一下,在不同的手机上要自适应屏幕,我是改的是 font-size 的字体大小,用js来改变的,下面是js文件的内容 123456789101112131415161718 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchan...
React中如何能省略不必要的渲染!
我们除了 render 函数,shouldComponentUpdate 可能是 React 组件生命周期最重要的一个函数了,说 render函数重要,是因为 render 函数决定了该渲染什么,而 shouldComponentUpdate 而是决定了,一个组件什么时候不需要渲染。 render 和 shouldComponentUpdate 函数,也是 React 生命周期函数中只有这两个有返回值的函数,render函数的返回结果是构造 DOM 对象的,而 shouldComponentUpdate 函数返回的是一个布尔值,告诉 React 库这个组件在这次更新中是否要继续。 在更新...
React中什么是Virtual DOM?
我们来说一下什么是 Virtual DOM,之前对这个问题,了解的不是特别的深刻,前几天在网上查找资料,加上自己的理解,来说一下这个虚拟 DOM。 React 应用是通过重复渲染来实现的用户的交互,你可能会想,这样的重复渲染会不会效率太低了,在 jQuery 的实现方式中,我们可在控制台清楚的看见,每次只有需要变化的那一个 DOM 元素被修改,可是,在 React 实现方式中,每次 render 被调用的时候,都要把整个组件都渲染一遍,这样看起来是不是有点浪费呢。 事实上不是这样的,React 利用 Virtual DOM,让每次渲染都渲染最少的 DOM 元素 要了解 Virtual D...
为什么使用React
为什么使用React呢 React社区完善,Facebook 支撑,并且拥有强大的全家桶 这里是 React 的中文社区http://react-china.org/ React 只是处理的 View 层,并且使用单项的数据流的方式,让数据决定视图如何展示,利于组件化,复用,提高了可维护性,可扩展性 JSX语法,颠覆了传统的 web 前端思想 各种浏览器插件易于调试,相对于 Vue 来说,API 足够少,没有升级版本所带来的痛点(参考 Vue 1.0 升级 2.0)
阿达
witness me
FRIENDS
friendA friendB