两栏等高布局

1. 抵消外边距和内边距

HTML部分:

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="content">
     <div id="left" class="row">
          <p>left</p>
          <p>left</p>
          <p>left</p>
          <p>left</p>
          <p>left</p>
          <p>left</p>
          <p>left</p>
          <p>left</p>
     </div>
     <div id="right" class="row">right</div>
</div>

1. 了解BFC之前

在了解什么是BFC之前，需要我们首先了解什么是Box、Formatting Context的概念。

1.1 Box: CSS布局的基本单位

在css布局中，我们最常见的布局方式就是盒子模型了。Box是CSS布局中的对象和基本单位，直观来说，就是一个页面是由很多的Box组成的。元素的类型和display属性决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context，相应的Box内的元素也会以不同的方式渲染。

盒子模型(Box Model)如果按照浏览器的实现方式进行划分的话，分为IE盒子模型和标准盒子模型两大类。

其中IE盒子模型中的width和height包括border、padding和content部分，而标准盒子模型中的width和height则只是指content部分。

1. 第一种实现方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function copy (obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    var copyObj,
        _toString = Object.prototype.toString;

    if (_toString.call(obj) === '[object Object]') {
        copyObj = {};
    } else if (_toString.call(obj) === '[object Array]') {
        copyObj = [];
    }

    for (var name in obj) {
        copyObj[name] = copy(obj[name]);
    }
    return copyObj;
}

1. GET

get方法是最常见的请求方法，通常用于向服务器请求(获取)某个资源。

发送一个get请求一般会附带一些参数，这些参数会附在请求链接的后面，由此可见，get方法安全性较低，不适合在对安全性要求较高的场合使用。

一般get请求能向服务器请求的数据量较小。

1. 区块元素

1.1 标题

Markdown 支持两种标题的语法，类 Setext 和类 atx 形式。

类 Setext 形式是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题），例如：

This is an H1
=============

This is an H2
-------------