前段时间学习HTML和CSS，天天练习写页面。由于刚开始对很多属性、标签、选择符不熟悉，写页面那个慢啊，而且往往花了大把时间写出来的页面，效果跟便便一样。。。~~上周终于结束了HTML和CSS的学习，开始正式学习JS，感觉任务相对较轻。所以趁这会饭后无聊的时间，把前段时间的知识点——我认为有必要记录的总结下，都是些零零碎碎的、基本技巧，不过对像我这种rookie来说还是很有帮助的。
<1>居中的方法：
1.水平居中：
水平居中的话比较容易实现：
1）行内元素：直接设置父级元素的text-align属性为center就好了。
2）块级元素：在宽度确定的情况下，设置自己的左右margin:0 auto;就能在水平方向居中。
2.垂直方向居中：
在CSS中垂直方向居中比较麻烦，不过也有很多方法可以实现，目前以我的了解，比较好用的垂直居中的方法有下面几种：
1）用display:table-cell；将需要居中的div的显示方式设置为表格单元格，然后使用vertical-align:middle属性将其居中。（demo代码就不写了，这里介绍下思路，有兴趣的同学可以自己试试。另，table-cell在创建流动布局时也是个神器，只不过对IE及老版本浏览器的兼容性不太友好~关于这个可以参看Charles Wyke-Smith的《CSS权威指南》一书）
2）行内元素垂直居中：这个简单，只需设置其line-height和height为相同值即可。
3）这种方法，在 content 元素外插入一个 div，让其浮动，并设置此 div height:50%; margin-bottom:-contentheight/2;
代码如下：
<div id="floater"></div> <div id="content"> Content here </div> |
#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}
|
4）这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下 都间距为 0，因此 margin:auto; 会使它居中。
HTML代码：
<div class="content"> Content goes here</div>
CSS代码：
#content { position:absolute;top:0; bottom:0;left:50px; margin:auto;height:240px;} <2>介绍一下display:inline-block属性 1.大家都知道，HTML中块级元素会默认换行，而且默认占满父级元素的宽度。而inline-block这个属性可以让块级元素在同一行显示，而且在没有声明宽度的条件下，会让其宽度仅仅足够包含其内容。其实从它的字面意思就可以看出来这个设置了这个属性的元素，其表现行为是介于inline元素和block元素之间的，因为我们不仅可以像块级那样设置其宽和高，又能像行内元素那样让他们并排显示。说道这可能有同学会想到，既然能让元素并排显示，那能否利用其创建分栏布局呢？答案是当然可以，而且用这种方法布局不用像用float那样要清除浮动，也不会对文档的前后造成影响，也不用理会float布局中要求每列元素必须具有相同高度（否则会出现锯齿相错的现象）可以说是代替float布局的一种很好的方法。不过，要是想实现文字环绕效果，那最好的方法还是float，毕竟设计出float属性的初衷不就是为了这个么~不过，CSS中好用的属性总有个但是……，我这里就我的理解说说关于这属性的”但是……“吧！ 2.首先是兼容性了。。。。inline-block在IE6/7中有兼容性问题，使用的时候需要hack下，关于这点，有兴趣可以看下这人的博客http://www.zhangxinxu.com/wordpress/ 3.然后就是用inline-block排列的块级元素之间会默认有几个px的间距（如果你标签换行的话），解决的方法有几个：1）设置父元素的font-size=0（然后在子元素里再修改回来）;2)用letter-spacing；同样也是设置父亲元素的letter-spacing为负值，不过这得根据当前字体大小，使用的是何种字体决定，通常是-3px到-8px之间（同样要在子元素样式中修改到正常，不过0pera貌似极限为1px...）；3）比较稳妥的方法，将设置了inline-block属性的块级元素标签的闭合标签和开始标签挨着写，中间不要有空格或者换行（其实说到底这里的间距还是因为换行或者空格造成的）。 4.用inline-block布局的话就不可避免的要用到vertical-align属性，而此属性的BUG较多，IE中对此属性的解释跟DOM支持浏览器不太一样，不过在内容的行高不是很大的情况下基本看不出来区别。<3>.margin-top的一点问题。 很多时候我们在用margin-top的时候会发现怎么没跟父元素拉开距离，反而把父元素跟body之间顶开了呢？其实是这样的：在为父亲元素的第一个子元素设置margin-top后，如果父亲元素没有设置border或者padding，那这个子元素的margin会一直向上找，直到遇到border或者padding或者上一个块级元素为止。既然我们明白了机理，就不难解决这个问题。容易想到的就是直接为父亲元素设置border或者padding，不过有时候我们根本不需要border怎么办呢。其实还有个方法就是给父亲元素加上个overflow:hidden属性，这样，子元素的margin-top就乖乖听话了。（顺带提一下，overflow：hidden也可以在子元素浮动时加在父元素上，强制父元素包含浮动的子元素）。
好了，絮絮叨叨，暂时就先写到这吧，水平有限，哪里有不对的地方欢迎指出来~大家共同学习，共同努力！
文章部分引用：http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html
2014-6-29