2017年12月_廿四桥明月夜

转载你以为 CSS3 只是个简单的布局？

CSS3 奇思妙想前几天看了一篇文章，颠覆了我对 CSS 认识，心中无数次蹦出一个念头：'卧槽，卧槽，还能特么这么用，这特么太叼了' ...于是我迫不及待想跟你们一起分享分享，以后你也可以在别人面前炫（装）耀（逼）了~装逼指南本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、::after伪元素，transparent 、bo

2017-12-29 15:26:36 199

原创 web移动端开发

todo

2017-12-29 13:51:36 606

转载 CSS3 border-image详解

一、border-image的兼容性border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅Firefox3.5，chrome浏览器，Safari3+支持border-image。所以，就本文而言，IE浏览器可以回家休息了，Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以，本文提供的一些d

2017-12-29 09:40:03 463

转载 css3和html5网站模板

过去的几年，网页设计和制作人员就已开始关注和使用 HTML5 了，如今 HTML5 得到了更加广泛的应用，国外已有很多基于 HTML5 制作的网站。所以，今天这篇文章给大家带来的是35款基于 HTML5 和 CSS3 的非常精致的网站模板，大家可以借助这些优秀网站模板制作出自己的 HTML5 网站。这些网站模板大部分都是免费的，虽然有些要付费，但是都提供了在线演示，所以……你懂的：）

2017-12-28 11:00:21 1828 1

转载 css负边距

（想全面、深入理解负边距似乎不可能。）自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做，但是没有人会谈论它。（It’s like an online taboo—everyone’s doing it, ye

2017-12-28 10:58:41 203

转载理解css负外边距对排版的影响

在利用css布局时，理解浏览器如何根据css属性进行渲染我觉得对于控制排版是非常重要的，一般我在脑中会把元素设想为一个个盒子，盒子有内部，有外部，浏览器就是按顺序根据样式把一个个盒子排列起来，而盒子之间边界是包含外边距的边界，起点是左上角。图取自w3school 通过设置width，padding，margin等属性可以调节整个盒子的大小，而对于浮动元素，个人理解就像是设置对块级元素不可

2017-12-27 21:05:04 435

转载 css某种样式的多种实现方法

当决定写这篇博文时候，突然一道闪电从脑海劈过，于是临时决定将这个熟悉然后到懵逼最后到放弃的问题分为两部分。闲话少说，直接上题：要求如下：三个橙色圆的大小为60px，固定不变所有间隙相等，也就是被三个橙色圆划分成的四个间距相等应用在移动端，整个黄色为全屏宽度（所以这里图片的大小不是真实的大小，如iphone 5那就是320px，6就是375px，6s就是414px等等）兼容安卓4

2017-12-27 19:33:50 241

转载 shadow-dom 简介

说到 shadow-dom 可能很多人会很陌生。但是其实我们肯定碰到过，本文主要想简单介绍下 shadow-dom。下面直接进入正文。 shadow-dom 是什么顾名思义， shadow-dom，直译的话就是影子dom ？我觉得可以理解为潜藏在黑暗中的 DOM 结构，也就是我们无法直接控制操纵的 DOM 结构。前端同学经常用开发者工具的话，查看 DOM 结构

2017-12-27 19:12:57 884

转载前端文摘：深入解析浏览器的幕后工作原理

这是一篇全面介绍 Webkit 和 Gecko 内部操作的入门文章，是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中，她查阅了所有公开发布的关于浏览器内部机制的数据（请参见资源），并花了很多时间来研读网络浏览器的源代码。她写道：在 IE 占据 90% 市场份额的年代，我们除了把浏览器当成一个“黑箱”，什么也做不了。但是现在，开放源代码的浏览器拥有了过半的市场份额，因此，是时候来揭

2017-12-27 17:00:31 181

转载深入理解 CSS 中的行高与基线

百度面试直接被面试官问住了，回来总结下css 行高相关问题！1、基本概念1. 基线、底线、顶线、中线注意：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。2. 内容区内容区是指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看

2017-12-21 15:34:49 236

转载为何img、input等内联元素可以设置宽、高

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如和就不同，而和也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。1. 替换和不可替换元素从元素本身的特点来讲，可以分为替换和不可替换元素。a) 替换元素替换元素就是浏

2017-12-21 10:49:21 163

转载页面重绘与重排

1、重绘(Repaint)重绘是一个元素外观的改变所触发的浏览器行为，例如改变outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，所以并不一定伴随重排。2、重排(Reflow)渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排"重绘"不一定需要"重排"，比如改变某个网页元素的颜

2017-12-20 15:05:14 349

转载 CSS3——过渡（transition）

一、概述CSS属性的值从一个值变成另一个值的过程叫做渐变，重点突出变化的过程。CSS3 transition系列属性可控制这个变化过程，使得属性值变化过程更加平滑。一个过渡应包含这几个属性：A：哪些属性需要过渡？需要过度的CSS属性（也就指定旧值和新值）B：过渡多久完成？持续时间，即从旧值变成新值的过程持续的时间。这个时间不包含延迟时间。C：过渡中间值如何计算？随着时间

2017-12-14 11:12:31 1416

转载 JavaScript中的跨域总结

什么是跨域跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。同源策略限制了一下行为：Cookie、LocalStorage 和 IndexDB 无法读取DOM 和 JS 对象无法获取Ajax请求发送不出去常见的跨域场景所谓的同源是指，域名、协议、端口均为相同。http://www.neal

2017-12-13 21:03:53 256

转载前端常见跨域解决方案（全）

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入： link>、script>、img>、frame>等dom标签，还有样式中background:url()、@font-face()等文件外链3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等其实

2017-12-13 21:02:08 147

原创在vue中使用vue-router指南

1、怎样使用创建src/router目录，在该目录下创建index.js文件。写如下代码：import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const router = new VueRouter({ routes:[ { path: '/首页', componen

2017-12-13 20:42:10 180

原创在Vue中使用Vuex进行状态管理指南

1、vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。2、为什么需要vuex？vuex解决了什么问题？当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。对于问题一，传参

2017-12-13 14:17:09 1726

转载四种知识点掌握程度

知识点掌握程度的一个表述。比方说“了解”，对这样的概念、这样的公式和这样的理论，我们只要知道它是怎么样的概念和公式、理论就够了，不需要对它进行更多的讨论，它是怎么来的，用它怎样解决什么样的实际问题的，这个可能应该在以后的问题来讨论，对了解只是知道这个概念它是怎么样的概念，这个公式是怎样的公式，这样的理论是什么样的理论就够了，比方说提到了这样的概念，你就能知道这是在哪个地方的，是哪个问题当中的概

2017-12-13 11:06:11 23613

转载科学中的直觉和反直觉

直觉（intuitive）和反直觉（counterintuitive）是科学讨论在描述一个科学理论或者发现的时候，经常使用的二分法。这个叫法本身并不那么科学和严谨，但是其中的意味却是无限深长的。既然不严谨，我也不去定义它，只看范例：最简单清楚的直觉理论，在古希腊科学有很多范例。比如“刚性物体排开的水量等于它的体积”。比如欧几里得平面几何中的公设和简单定理。“凡直角都相等”，“两点之间直

2017-12-13 09:11:57 2858

转载纯CSS实现滑动效果（Slide Up & Slide Down）

只需要一个DIV元素便可实现滑动效果，避免了使用JavaScript为元素的动画（IE浏览器下仅支持IE9以上）HTML代码这里是内容点击看看CSS代码 .slider { overflow-y: hidden; max-height: 500px; /* 最大高度 */ backgroun

2017-12-12 15:29:31 17548

转载如丝般顺滑：使用 CSS3 实现 60 帧的动画

在移动端上实现动画很简单。在移动端上正确地实现动画也比较简单...如果你采纳我们的建议的话。虽然现在每个人都会使用 CSS3 实现动画，但许多人用的都不够恰当。很多应加以考虑的最佳实践常常被忽略，因为仍然有人不明白这些最佳实践的真正意义。如今有这么多的设备规范，如果还不有针对性地优化你的代码，糟糕的用户体验将让你死无葬身之地。记住：虽然市场上始终有一些高端的旗舰机在

2017-12-12 15:28:48 407

转载 CSS实现移动端侧滑

[html] view plain copy> html> head> title>app-menutitle> style type="text/css"> .menu { position: fixed; left: 0;

2017-12-12 15:27:55 1061

转载 CSS布局总结

CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现），希望能给需要的小伙伴带来一些帮助。目录常用居中方法水平居中垂直居中单列布局二列&三列布局float+marginpos

2017-12-12 09:32:20 286

转载前端使用JSONP与服务器交互的过程

关键概念：浏览器、服务器、回调函数1、浏览器跨域向服务器请求数据，并传回调函数名给服务器2、服务器生成调用该回调函数的js代码，将数据作为回调函数的参数传入。将这段代码返回给客户端3、浏览器执行服务器返回的js代码，即调用回调函数综上：用jsonp跨域请求数据需要服务器支持用代码表示如下：// 1. 客户端定义接收数据的函数// 这个函数在收到服务器响应后会被执行fun

2017-12-11 19:28:37 2445

原创 css居中思路整理

1、水平居中 text-align：若子元素不受float影响，将块级父元素设为text-align:center可使子元素水平居中 width：xx；margin:0 auto。若子元素不受float影响，如此设置子元素可使子元素水平居中2、垂直居中设置到父元素上，line-height=height可使内部文字垂直居中3、通用方法首先给父元

2017-12-11 19:07:10 136

转载 css居中思路

使用 CSS 实现居中效果困难吗？显然不是。实际上有许多方法可以实现居中效果，但在具体情况中，我们往往无法判断哪种方法最合适。所以让我们来创建一个层次结构的方法集，帮助你解决选择困难症~水平居中行内或类行内元素（比如文本和链接）在块级父容器中让行内元素居中，只需使用 text-align: center;：这种方法可以让 inline/inline-

2017-12-11 19:00:24 161

转载 VUE开发请求本地数据的配置，旧版本dev-server.js，新版本webpack.dev.conf.js

VUE开发请求本地数据的配置，早期的vue-lic下面有dev-server.js和dev-client.js两文件，请求本地数据在dev-server.js里配置，最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替，所以配置本地访问在webpack.dev.conf.js里配置即可。

2017-12-05 13:25:25 9927 13

转载理解OAuth 2.0

OAuth是一个关于授权（authorization）的开放网络标准，在全世界得到广泛应用，目前的版本是2.0版。本文对OAuth 2.0的设计思路和运行流程，做一个简明通俗的解释，主要参考材料为RFC 6749。一、应用场景为了理解OAuth的适用场合，让我举一个假设的例子。有一个"云冲印"的网站，可以将用户储存在Google的照片，冲印出来。用户为了使用

2017-12-05 09:47:26 111

转载搞清this的指向只需问两个问题

[javascript]搞清this的指向只需问两个问题在确定身份时我们需要问两个问题： 1，我是谁；2，我在那一，考虑一下情景问：我是学生，我在哪（this = ?）？答：学校问：我是员工，我在哪（this = ?）？答：公司问：我是中国人，我在哪（this = ?）？答：中国问：我去参加运动会，挂着我们学校的名牌，我在哪（this = ?）？答：xxx实

2017-12-04 18:18:06 146

廿四桥明月夜的博客