使用CSS3 vw单位

在CSS3中增加了一系列相对于视窗区域百分比的单位：vw、vh。

其中vw是相对于视窗区域宽度百分比的单位，1vw = 1% viewport width。vh是相对于视窗区域高度百分比的单位，1vh = 1% viewport height。使用这个单位可以很方便的做出自适应正方形。

在线预览：

See the Pen OXqYNy by abcdGJJ (@abcdGJJ) on CodePen.

这种方案优点是简洁，不过缺点是兼容性不好

设置垂直方向的 padding 撑开容器

原理

1. 鼠标按下：状态 = 1；记录鼠标的X和Y坐标；记录元素的X和Y偏移值
2. 鼠标在元素上移动：若状态 = 0，什么也不做；若状态为1，元素的新X的偏移量 = X2 - X1 + X(鼠标按下时的元素偏移)，新Y偏移量 = Y2 - Y1 + Y
3. 鼠标放开，状态 = 0

在线预览

See the Pen oLVgvp by abcdGJJ (@abcdGJJ) on CodePen.

两栏布局

float+margin（一侧定宽，一侧自动）

在线预览：

See the Pen JKwjwL by abcdGJJ (@abcdGJJ) on CodePen.

原理：左div定宽浮动，右div正常文档流并以左div左上角布局，右div中的文字围绕在浮动元素周围。为了使右div相对于左div布局，需要加上margin-left属性。

笔记：float元素浮动后拥有块元素属性

两个三角形定位实现

See the Pen kXAZOk by abcdGJJ (@abcdGJJ) on CodePen.

原理

1. 构造两个三角形，定位属性为绝对定位。
2. 第一个三角形的border颜色设为父元素border颜色
3. 第二个三角形的border颜色与父元素背景颜色相同
4. 第一个三角形top值比第二个三角形大1px
5. 这种方法有一个缺点，三角形的颜色比边框颜色淡一些，如果想得到和边框一样的颜色，可以将第一个三角形颜色加深一些
6. 也可用伪类元素实现，:before、:after

今天用git时不小心使用git rm 删除了一些文件，当时心里那个痛啊。不过好在有万能的群友帮忙，才得以恢复。

注：此方法适用于未commit的情况

git reset
git checkout filename

BFC的理解与应用

首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。

什么是BFC（Block formatting contexts）?

w3c规范中的BFC定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

stylus是啥

Stylus 是一个高效、动态以及丰富的 CSS 预处理器。它同时支持缩进的和通俗的两种风格的 CSS 语法风格。stylus类似于sass、less，但功能上更为强壮，和js联系更加紧密。stylus文件后缀是 .styl

stylus安装

npm install -g stylus
stylus -h （帮助命令）

配置镜像

通过config指定

npm config set registry http://registry.cnpmjs.org （淘宝的npm源）
npm info underscore （查看模块underscore的信息）（如果上面配置正确这个命令会有字符串响应）

命令行指定

npm –registry http://registry.cnpmjs.org info underscore

编辑 ~/.npmrc 加入下面内容

registry = http://registry.cnpmjs.org

推荐使用第三种方法，可以一劳永逸~

原理

由于单臂路由的局限性（带宽，转发效率），使得应用较少。三层交换机在二层交换机基础上增加了路由功能，并且没有像单臂路由一样经过物理线路进行路由，解决了带宽瓶颈问题。

vlanif 接口是基于网络层的接口，可以配置IP地址。借助vlanif，三层交换机就能实现路由转发功能。

拓扑

原理

在现实中，经常会出现某些用户需要跨越vlan通信的情况，单臂技术就是一种解决方法。

拓扑

步骤1