发表于   |   分类于   |  

发现个不错的CSS布局教程——学习Css布局
用codepen边学边做,练习了一下。

总结

display属性

  • block: 标准块级元素,新开始一行并尽可能撑满
  • inline(默认): 标准行内元素,比如span包裹一些文字而不会打乱段落的布局
  • none: 隐藏元素,不会保留元素本该显示的空间
  • inline-block: 见下文
  • flex: 见下文

技巧: margin: 0 auto;
设置块级元素的width(更好的方式是用max-width设置最大宽度)阻止它从左到右撑满容器,然后设置左右外边距为auto来使其水平居中

盒模型

此处省略500字,这里不是为了介绍盒模型,当各种block的内外边距影响块的实际大小时,我们需要以下技巧消除对布局造成的影响。

技巧: * { box-sizing:border-box; }

用position属性来布局

  • static(默认): 不会被特殊的定位
  • relative: 相对定位,再配合top、right、bottom和left属性对位置设置偏离
  • fixed: 固定定位,跟relative类似可以通过top等设置偏离,区别是它将固定在位置上,不随页面滚动移动
  • absolute: 绝对定位,相对于它的父元素定位,可以配合top等设置偏离

Demo: 使用position的方式布局
教程 代码
菜单nav使用绝对位置,当过长时会超出容器。这种方式有些落后了。

用float属性来布局

Demo: 使用float属性实现图片右对齐,文字环绕
教程 代码

技巧: 使用clear属性消除左右浮动:left、right、both,效果相当于换行
教程 代码
但这有个问题是当该元素比旁边的元素要长时,会冲破容器,看下面的例子:

技巧: 使用clearfix hack消除浮动
教程 代码
下面的代码彻底解决了这个问题

1
2
3
4
5
6
7
8
img {
  float: right;
  //....
}
.clearfix {
  overflow: auto;
  zoom: 1;  /* IE6 */
}

Demo: 使用float的方式布局
教程1 教程2 代码
之前的主流方法之一,建议宽度使用百分比

Demo: 使用媒体查询实现响应式布局
教程 代码

用inline-block来布局

教程 代码
以下两种等价:

1
2
3
4
5
6
7
8
9
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

1
2
3
4
5
6
7
8
9
.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
  
  *display: inline; /*IE6*/
  *zoom: 1; /*IE6*/
}

Demo: 使用inline-block布局
教程 代码
这例子在我这有问题,宽度超过了容器,串行了

多列column (IE10+)

教程 代码

1
2
3
4
5
.three-column {
  padding: 1em;
  column-count: 3;
  column-gap: 1em;
}

用flex来布局

教程 代码

建议看下面的资料来学习,本文说的比较简单:
CSS3布局属性全接触@极客学院
Flexbox Playground

技巧: flex布局默认所有元素高度为最高的那个元素的高度(横向)

技巧: 子元素占满剩余空间:设置子元素 flex:1

技巧: 水平、垂直都居中

1
2
3
4
5
6
.vertical-container {
  display: flex;
  align-items: center;
  justify-content: center;
  // ...
}

其他资料:

CSS参考手册

发表于   |   分类于   |  

HTML5支持

使用html5shiv可以使IE6、7、8等浏览器也支持HTML5，只要在页面引入下面的代码：

1
2
3
<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

项目地址：https://github.com/aFarkas/html5shiv
中文资料：http://www.zhangxinxu.com/wordpress/2013/02/github-html5shiv-readme-translate/

CSS3支持

使用ie-css3.htc可以使老浏览器支持CSS3的大部分特性，IE中的CSS3不完全兼容方案

Opacity透明度

元素的透明度在IE中可以很方便的用滤镜来实现。

1
2
3
background-color:green;
opacity: .4;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

这里半透明区域
opacity: .4;

filter:alpha(opacity=40);

border-radius圆角/Box Shadow盒阴影/Text Shadow文字阴影

在IE中可以利用Vector Markup Language (VML)和javascript来实现这些效果，参见IE-CSS3，在引用了一个HTC文件后，在IE浏览器中就可以使用这三种CSS3属性了。

1
2
3
4
5
6
7
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 、Chrome */
border-radius: 15px; /* Opera 10.5+, IE6+ 使用 IE-CSS3*/
-moz-box-shadow: 5px 5px 5px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */
box-shadow: 5px 5px 50px #000; /* Opera 10.5+，IE6+ 使用 IE-CSS3 */
behavior: url(ie-css3.htc); /*引用ie-css3.htc */

实际上，在IE中有滤镜来实现阴影(shadow)和投影(drop-shadow)效果的

shadow会产生连续、渐变的阴影

1
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10);

drop-shadow产生的阴影没有明暗变化

1
filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1");

滤镜似乎和现有的htc脚本有冲突，或者可以称之为特性：两者同时在一个元素上启用的时候，滤镜效果会转移到其子元素上

Gradients渐变

IE中提供了一个简单的渐变滤镜

1
2
3
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6+ */

在实现IE中的渐变很简单

RGBA透明度颜色背景

渐变滤镜支持RGBA的颜色，startColorStr和EndColorStr的前两位是Alpha通道值。使用带alpha通道来模拟RGBA颜色背景的同时，应该去掉其background-color属性。

1
2
background-color: rgba(0, 255, 0, 0.6); /* FF3+, Saf3+,Opera 10.10+, Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#9900FF00',EndColorStr='#9900FF00'); /* IE6+*/

Multiple Backgrounds多重背景图片

支持CSS3多重背景图片的浏览器中可以用下面的语句来实现背景多重图片：

1
background: url(bg-image-1.gif) center center no-repeat, url(bg-image-2.gif) top left;

要在IE中实现多背景图片，在需要在单独的IE hack样式表中加入下面的代码：

1
2
background: transparent url(bg-image-1.gif) top left repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='bg-image-2.gif', sizingMethod='crop'); /* IE6+ */

CSS3浏览器的多重背景

IE的多重背景

Tranformations/rotate旋转元素

IE中有两个滤镜可以实现元素的旋转，BasicImage和Matrix，前者简单方便但是只能做90*n(n∈{1,2,3,4})度的旋转；Matrix滤镜功能强大，但是参数复杂。

1
2
3
4
5
6
-moz-transform: rotate(180deg);  /* FF3.5+ */
-o-transform: rotate(180deg);  /* Opera 10.5 */
-webkit-transform: rotate(180deg);  /* Saf3.1+, Chrome */
 
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-1, M12=-1.2246063538223772e-16, M21=1.2246063538223772e-16, M22=-1);

旋转也很简单

@font-face服务器端字体

考虑到汉字字体的尺寸，这个CSS3的特性不算实用

1
2
3
4
5
6
font-family:'webFont';
src:url('myfont.eot');/*IE6+*/
 
src:local('fontname'),/*字体名称*/
url('myfont.woff') format('woff'),/*FF3.6*/
url('myfont.ttf') format('truetype');/*saf3+,chrome,FF3.5,opera10+*/

字体声明并引用了以后，可以在网页的其他地方用font-family使用这一字体。

可以在同一个元素上启用多个滤镜，如：

1
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=5)progid:DXImageTransform.Microsoft.Alpha(opacity=40);

虽然一些用滤镜模仿CSS3的效果难称完美，但在一些情况下，运用这些技术能够让我们的代码更为简洁和统一

发表于   |   分类于   |  

网上的教程

网上有很多,不废话了:

常用命令

npm ls module_name

查看依赖的使用情况

1
2
3
4
5
cdp-ui duanyiding$ npm ls jquery
cdp-ui@0.0.1 /Users/duanyiding/WebstormProjects/cdp-ui
`-- rc-queue-anim@0.12.4
  `-- velocity-animate@1.2.3
    `-- jquery@3.1.0

npm info(view) module_name

列出详细信息，如果只想查看版本：npm info module_name versions

npm outdated

检查包是否已经过时，此命令会列出所有已经过时的包，可以及时进行包的更新

npm root -g

查看全局的包的安装路径

常用命令简写

  • -v: –version
  • -h, -?, –help, -H: –usage
  • -s, –silent: –loglevel silent
  • -q, –quiet: –loglevel warn
  • -d: –loglevel info
  • -dd, –verbose: –loglevel verbose
  • -ddd: –loglevel silly
  • -g: –global
  • -C: –prefix
  • -l: –long
  • -m: –message
  • -p, –porcelain: –parseable
  • -reg: –registry
  • -f: –force
  • -desc: –description
  • -S: –save
  • -D: –save-dev
  • -O: –save-optional
  • -B: –save-bundle
  • -E: –save-exact
  • -y: –yes
  • -n: –yes false
  • ll and la commands: ls –long

使用淘宝镜像

不使用cnpm命令行，但是使用淘宝镜像，有以下三种方式，推荐第三种：

  1. 通过 config 配置指向国内镜像源

    1
    2
    npm config set registry http://registry.cnpmjs.org //配置指向源
    npm info express  //下载安装第三方包

  2. 通过 npm 命令指定下载源

    1
    npm --registry http://registry.cnpmjs.org info express

  3. 在配置文件 ~/.npmrc 文件写入源地址

    1
    2
    nano ~/.npmrc   //打开配置文件
    registry =https://registry.npm.taobao.org   //写入配置文件

网上说得不太清除的几个事儿

依赖版本中使用 ~ 和 ^ 的区别

这个问题其实说的是语义化版本SemVer。
语义化版本（SemVer）的范围 一文是网上搜到的质量较好的中文解释。
但其中对~的用法没说,解释如下:
假设版本号为:x.y.z

~

~x 表示 x.不能变,后边的随便
~x.y 表示 x.y.不能变,后边的随便
~x.y.z 表示 x.y.不能变,后边的随便
~x.y.z-beta1 表示 ~x.y.z-不能变,后边的随便

^

^x.y.z 表示x、y、z中从左往右,第一个非零位往左(包括该非零位)不能变,右边的随便

关于semver的一些资料:
http://semver.org/
https://cnpmjs.org/package/semver
https://docs.npmjs.com/misc/semver

发表于   |   分类于   |  

龟速积累中,按照命令首字母排序

chmod

说明:

Linux/Unix 的档案调用权限分为三级 : 档案拥有者、群组、其他。利用 chmod 可以藉以控制档案如何被他人所调用。

用法:
1
2
3
4
5
6
7
8
9
10
11
12
chmod [-cfvR] [--help] [--version] mode file... 
mode : 权限设定字串，格式如下 : [ugoa...][[+-=][rwxX]...][,...]，其中 
u 表示该档案的拥有者，g 表示与该档案的拥有者属于同一个群体(group)者，o 表示其他以外的人，a 表示这三者皆是。 
+ 表示增加权限、- 表示取消权限、= 表示唯一设定权限。 
r 表示可读取，w 表示可写入，x 表示可执行，X 表示只有当该档案是个子目录或者该档案已经被设定过为可执行。 
-c : 若该档案权限确实已经更改，才显示其更改动作 
-f : 若该档案权限无法被更改也不要显示错误讯息 
-v : 显示权限变更的详细资料 
-R : 对目前目录下的所有档案与子目录进行相同的权限变更(即以递回的方式逐个变更) 
--help : 显示辅助说明 
--version : 显示版本
例子：

获取该目录机器子目录下所有文件的所有权限：

1
chmod -R 777 文件或目录

递归地给directory目录下所有文件和子目录的属主分配读的权限:

1
chmod -R u+r directory

延伸阅读:

http://www.runoob.com/linux/linux-comm-chmod.html
https://zhidao.baidu.com/question/1667808990925980347.html

lsof

说明:

lsof（list open file）是一个列出当前系统打开文件的工具。在linux环境下，任何事物都以文件的形式存在，通过文件不仅仅可以访问常规数据，还可以访问网络连接和硬件。所以如传输控制协议 (TCP) 和用户数据报协议 (UDP) 套接字等，系统在后台都为该应用程序分配了一个文件描述符，无论这个文件的本质如何，该文件描述符为应用程序与基础操作系统之间的交互提供了通用接口。因为应用程序打开文件的描述符列表提供了大量关于这个应用程序本身的信息，因此通过lsof工具能够查看这个列表对系统监测以及排错将是很有帮助的。

用法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
lsof  filename 显示打开指定文件的所有进程 
lsof -a 表示两个参数都必须满足时才显示结果 
lsof -c string   显示COMMAND列中包含指定字符的进程所有打开的文件 
lsof -u username  显示所属user进程打开的文件 
lsof -g gid 显示归属gid的进程情况 
lsof +d /DIR/ 显示目录下被进程打开的文件 
lsof +D /DIR/ 同上，但是会搜索目录下的所有目录，时间相对较长 
lsof -d FD 显示指定文件描述符的进程 
lsof -n 不将IP转换为hostname，缺省是不加上-n参数 
lsof -i 用以显示符合条件的进程情况 
lsof -i[46] [protocol][@hostname|hostaddr][:service|port] 
            46 --> IPv4 or IPv6 
            protocol --> TCP or UDP 
            hostname --> Internet host name 
            hostaddr --> IPv4地址 
            service --> /etc/service中的 service name (可以不只一个) 
            port --> 端口号 (可以不只一个)
例子：
  • 查看22端口现在运行的情况 
1
lsof -i :22
  • 查看root用户进程所打开的txt文件
1
lsof -a -u root -d txt
延伸阅读:

http://www.cnblogs.com/mydomain/archive/2011/09/27/2193560.html
http://www.cnblogs.com/rootq/articles/1401850.html

发表于   |   分类于   |  

常识

  • id不可重名，class可以重复使用
  • id定义了一个独特的元素，class定义了一批同类的元素
  • id和class在优先级上是有区别的，id比class的优先级高

问题

在复杂的css架构中,某一个组件定义的class如果单独定义可能受同名class影响并不会起作用，而使用id就一定会起效

最佳实践

  • 顶层布局或大组件不易重名,用id来定义元素
  • 组件中的子组件或元素用父组件id+子元素class的形式来定义css

代码:

1
2
3
4
5
6
7
//Bad：
#header {...}
.menu {...}
//Good:
#header {...}
#header .menu {...}

发表于   |  

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment