Posted on | In

都是三列的思想，中间主内容区域自适应，左右两列固定宽度。

主要为了加强关于css布局的理解

圣杯布局

html代码
1
2
3
4
5
6
7
8
9
10
11
12
<div id="head">
        <h1>head</h1>
    </div>
    <div id="container">
        <div id="center" class="column">center</div>
        <div id="left" class="column">left</div>
        <div id="right" class="column">right</div>
    </div>

    <div id="footer">
        <h1>footer</h1>
    </div>

主区域center放在前面优先渲染

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 #container {
    padding-left: 200px;
    padding-right: 150px;
}

#container .column {
    float: left;
    position: relative;
}

#center {
    width: 100%;
    background:#eee;  
}
#left {
    width: 200px;
    margin-left: -100%;
    right: 200px;
}
#right {
    width: 150px;
    margin-right: -150px;
}
#footer {
    clear: both;
}
思路整理
  • 中间三列浮动定位float: left
  • 主内容设置padding-left与padding-right用于放置左右两列（设置margin也可），同时用position:relative定位
  • 左列设置margin-left:-100%;使left与center部分重合，然后设置right:200px;使其相对自身左移宽度值，这样，左列就定位在了center为其预留的位置上
  • 右列设置margin-right为自身负宽度值，使右列定位在center为其预留位置上。

要点：

  • relative定位
  • 负margin的运用

双飞翼布局

html
1
2
3
4
5
6
7
8
9
<div class="header">header</div>
<div class="content">
    <div class="middle">
        <div class="inner-middle">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>

双飞翼布局在主内容区域外层多嵌套了一个div

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.content {
    overflow: hidden;
}

.middle {
    width: 100%;
    float: left;
}
.inner-middle {
    widows: 100%;
    margin-left: 100px;
    margin-right: 100px;
}

.left {
    width: 100px;
    float: left;
    margin-left: -100%;
}
.right {
    width: 100px;
    float: left;
    margin-left: -100px;
}
思路整理
  • 主内容外层嵌套一个div，外层div宽度为100%，内层div设置margin-left与margin-right为左右两列预留位置
  • 左列采用margin-left:-100%将左列顶上
  • 右列margin-left: -100px将右列顶上

要点：

  • 主内容外层嵌套一个div
  • 左右两列采用负margin

两种布局比较

  • 圣杯布局是在为主内容（left+content+right）设置一个边距，采用==relative定位==及==负margin值==，使左右两列定位到为其预留的位置上
  • 双飞翼布局是在==主要显示区域（content）外面嵌套上一层div==,外层div宽度为100%，内层（content）为左右列预留位置，左右两列采用==负margin值==定位到相应位置

Posted on | In ,

基础

  • <canvas>由几组API构成，并非所有的浏览器都支持这些API。
  • 除了具备基础绘图能力的2D上下文，<canvas>还建议了一个名为WebGL的3D上下文。
1
2
3
4
5
6
7
8
<canvas id="drawing" width="200" height="200">drawing</canvas>

var drawing = document.getElementById("drawing");

//确定浏览器支持<canvas>元素
if(drawing.getContext) {
    var context = drawing.getContext("2d");
}
  • 要使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小。
  • 要在canvas上绘图，需取得绘图上下文，即调用getContext()方法，传入“2d”即可取得2D上下文对象
  • 使用toDataURL（）方法，可以导出<canvas>元素上绘制的图像。

2D上下文

2D上下文的坐标开始于<canvas>元素的==左上角==。

Read more »

Posted on | In

flex是Flexible Box的缩写，意为“弹性布局”，是css3中作用于动态元素或者不知名大小元素的新布局，主要用于元素对齐、方向和容器的组织方式。flex容器最主要的特点是其能以最好的方式修改不同大小子元素的width和height，使其填满可用空间。

基础

flex布局由flex容器的父元素和其直接子元素flex items 组成。
image

用法

在父HTML元素上设置属性display就可以使用flex布局。

1
2
3
4
.flex-container {
    display: -webkit-flex;      //Safari
    display: flex;
}

若想表现得像行内元素

1
2
3
4
.flex-container {
    display: -webkit-inline-flex;       //Safari
    display: inline-flex;
}

父元素上只需设置这一个属性，其全部直接子元素会自动转变为flex items。

有许多方式能组织flexbox属性，但总的来说，最简便的还是将元素分为两个部分：flex容器和flexZ子元素。以下会介绍它们，并且说明其如何影响布局表现。

Read more »

Posted on | In

一级目录

名称 描述
src 源代码
release 发布结果
test 单元测试用例
doc 文档
example 示例

简介

起步

三种状态

Git有三种状态：==已提交（committed）、已修改（modified）和已暂存（staged）==。

状态 描述
committed 数据已经安全的保存在本地数据库中
modified 修改了文件，但还没保存到数据库中
staged 对一个已修改文件的当前版本做了标记，使之包含在下次提交的快照中

Git项目的三个工作区域

==Git仓库、工作目录以及暂存区域==。

工作区域 描述
Git仓库目录 Git中最重要的部分。用来保存项目的元数据库
工作目录 对项目某个版本独立出来的内容
暂存区域 保存了下次将提交的文件列表信息，一般在Git仓库目录中

image

基本的Git工作流程：

  1. 在工作目录中修改文件。
  2. 暂存文件，将文件的快照放入暂存区域
  3. 提交更新，找到暂存区域的文件，将快照永久性存储到Git仓库目录
Read more »

Posted on | In ,

1. 原型链

方法

将原型对象的指针指向另一个类的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function SuperType() {
   this.name = "SuperType";
}
SuperType.prototype.getSuperName = function() {
    return this.name;
}

function SubType() {
    
}
SubType.prototype = new SuperType();

var sub = new SubType();
console.log(sub.getSuperName());

注意使用
  • 用原型链实现继承时，==不能使用对象字面量创建原型方法==，这样会重写原型链。如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function SuperType() {
   this.name = "SuperType";
}
SuperType.prototype.getSuperName = function() {
    return this.name;
}

SubType.prototype = new SuperType();
function SubType() {
    type : "SubType",
    getSubName : function() {
        return this.type;
    }
}
  • 若子类要覆盖超类中的方法，或添加自己的方法，添加方法的代码要放在替换原型的语句之后。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function SuperType() {
   this.name = "SuperType";
}
SuperType.prototype.getSuperName = function() {
    return this.name;
}

function SubType() {
    
}
//原型链继承
SubType.prototype = new SuperType();

//添加方法需放在原型继承语句之后
SubType.prototype.getSubName = function() {
    
}
Read more »

Posted on | In

undefined 与 null

  • 区别
    在使用var声明变量但未对其初始化时，变量的指为undefined；
    null 指表示一个空对象指针。
1
2
typeof(undefined);      //undefined
typeof(null);           //object
  • 联系
    undefined 值派生自 null值
    1
    alert(null == undefined);       //true
Read more »