web前端杂记

1. 让IE兼容HTML5，引入google的js文件，html5.js

2. 新增的HTML5标签默认样式是内联元素，css需要初始化这么标签为块元素

=================================================================================

块元素和内联元素的使用：

1. 常用内联元素： img span label a

• 默认显示在一行，随元素内容而定
• 不可以设置宽高、行高
• 内外边界只有左右有用，上下没用(不提倡设置)

2. 块元素： div form h 等

• 单独占一行
• 高度、行高、内外边距都可以设置
• 默认宽度是浏览器宽度水平居中方法是 margin: 0 auto
• 可以包含其他块元素和内联元素

3. display属性

块元素和内联元素相互转换可以利用display属性实现：display: block,  display: inline-block  

display: table-cell ，能把元素当作表格单元来显示，这个非常实用，显示效果也很好，只可惜某些浏览器不够兼容。要注意，与一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子元素出现

4.居中的问题

水平居中：text-align: center 该属性之适用于块元素中内容的水平居中，多用在块元素中的文字或图片居中，也可以用在子的块元素居中。相对于最靠近自己的一层div来实现居中。

5.垂直居中

 vertical-align用于行内元素中的垂直居中
    vertical-align，只说一下最简单的用法：
    这个属性用于
    1、内联元素（以及被转化为内联元素的块元素）
    2 、display设置为table-cell的元素

    3、<td><tr>这样的元素
    写法：vertical-align:middle;就可以设置文字或者图片的垂直居中。只要具有行内元素的特性的元素使用这个属性

 块元素的垂直居中可以设置块元素的行高：line-height: 块元素高度

6 .块级元素中的文字图片垂直居中（块的高度不确定的）
    在块的高度不确定的情况下，其实它的高度就是取决于里面内容的高度。如果内部只有文字或者图片的话，那就自然垂直居中了，其实就不必特意要设置。
    非要设置什么的话，比如希望块大一些，文字在块中垂直居中好看一点，可以设置内边距，如padding-top:20px;padding-bottom:20px；如果上下内边距设置的不一样，就自然不居中了。

7.  块级元素自身的垂直居中
    设置块级元素自身在父元素中的垂直居中，可以参照块级元素的水平居中的方法（上面说过），设置外边距即可。如果不想设置水平居中，只要设置上下外边距为auto就好。
    也可以采用vertical-align:middle;的方式，但是前提是把display设置为table-cell。这样的话要注意浏览器兼容性问题。