从text-align和margin auto说开来

这是本系列第一篇博客，就多啰嗦两句。被老大强制要求写HTML和CSS，因为之前写过CSS觉得特别的痛苦，那痛苦的原因估计很多人也都遇到过，就是感觉有些东西是不可控的，如果某一次能把东西放在了指定的位置上，那是good luck，但是下次就不一定有这么好的运气了。

今天就遇到一个问题，在一个div里面有一个button，我希望让这个button居中，居中嘛，就用了margin，结果是怎么都不好使，结果后来用的text-align:center才把这个button居中了。

[code]<style type="text/css">
    #id{
        width:300px;
        text-align:center;------正确
    }
    #btn{
        width:100px;
        margin:0 auto-----错误
    }
</style>
<div id="d">
    <button id="btn">click me!</button>
</div>

本来就想这么过去的，可是转念一想，对于计算机而言，从来没有什么不确定性，如果有，那一定是学艺不精。然后就好好研究了一下text-align和margin有啥不同。

说到这，我想先说两个html的两个基本模型。

盒子模型(box model)

盒子模型是说HTML中的每个元素都是被包围在一个盒子里面的，这个盒子有四个方面的内容，一个是content，一个是border，在border和content之间就是padding的距离，而border与父容器之间的距离称为margin。这样来记的话就不会混淆margin和padding了。

我们通常设定的width和height其实都是盒子的宽度，更具体的说是border的宽和高。因为margin是对外的，而padding是对内的。所以，我们经常会看到居中对齐的时候会出现margin:0 auto，意思是距父容器顶部距离为0px，而左右下三部分自动调整。

这也就是我们只见过margin：0 auto，却没见过padding：0 auto的原因。因为padding是对内的，padding的调整对盒子在整个页面中的位置根本不能起任何作用。

如果使用margin:0 auto不好使，那么有一个很常见的原因是没有写width。为啥没标明width，margin就不起作用呢？实际上，margin不是没起作用，而是你没看到它起作用。因为如果没著名width的话，那么子容器的宽度会自动充满父容器的宽度。而高度会根据子容器中元素内容的多少而撑开。

这样一来的话，如果width等于父容器的宽度，那么就本来是已经居中的了。

不仅如此，我们可以自己试验一下，如果width设置的比较大（远大于内容的宽度），那么当使用margin属性时会看到内容并没有居中，为啥？因为width太大了，而子容器现在已经是居中的了，但是容器内部的元素并没有居中。

那如何让内容居中呢？我能想到的办法就是让子容器的宽度减少，或者使用text-align：center将子容器内容居中。

文档流

文档流的概念也很重要，这里推荐一篇博客推荐博客。

文档流是HTML的一个基本概念，就是我们在HTML中的元素都是从左到右，从上到下一行一行来的。有了这个基本概念，我们就知道了两个概念，内联元素（inline element）或者又叫行内元素 以及块级元素。

内联元素

内联元素是指随着文档流一直向左，它的下一个元素会跟在前一行中该元素后面一直向右排下去。直到遇到两个条件：

行内空间不足

遇到块级元素

内联元素有点像一个箱子，HTML中先出现的文档压入到箱子底，然后其他的就依次往箱子里面加，直到箱子盛不下为止。那显然，箱子的宽度会由最“胖”的元素来决定。

那对比内联元素，块级元素要最贵的多，它一个占一个箱子，也就是一个块级元素占一行。

块级元素

传统意义上，块级元素都是些容器，比如div、p、h标签等等，它的主要作用就是封装包含的元素的。这样比较看来，内联元素倒像是一些修饰，比如span、button、img啥的。

啰里啰唆这么多还没有进入正题，我们知道在居中对齐的时候，常常会有两个有力的工具，text-align和margin 0 auto。到底这两个有啥区别呢。

有了上面的概念，我们就可以说了，margin 0 auto主要用于块级元素，而且是用在待修饰待居中的容器上的。而text-align:center，当然也是修饰块级元素的，它主要作用在父容器中，它可以对父容器中所有的内联元素或者块级元素进行居中。

那内联元素咋办？内联元素要居中的话，我只能想到两个个办法，一个是用个容器包起来，然后父容器text-align：center。第二个就是使用display:block，即强行转换成块级元素，然后再margin：0 auto等。

由于CSS中display的出现，实际上HTML已经没有明显的块级与内联的区别了，只是传统上的一些标签在没有显式声明的条件下会默认是块级或者内联级的。

而且display:inline和float:left是很像的。都是在一行内进行移动。一般来说，更推荐使用float：left来标注。

由于本人也是新手，上述内容有任何措词不当或表述不对的地方，万望指出！不胜感激！！