块级元素，行内元素和 inline-block 元素

块级元素(block-level)

div,h1,h2,h3,h4,h5,h6,p,hr,form,ul,ol,dl,pre,table,li,dt,dd,tr,td,th;

行内元素(inline level)

em,strong,span,a,br,img,button,input,label,select,code,script,textarea;

特性区别：

• 块级元素可以包含块级元素和行内元素，行内元素只能包含文本和行内元素；
• 块级元素可以占据一整行的空间，行内元素只能占据自身宽度的空间；
• 块级元素可以设置宽高，而行内元素设置无效
• 块级元素的display属性值为block;行内元素的display属性值为inline;可以通过修改display属性来切换块级元素和行内元素；

块级元素水平居中效果

对于块级元素，设置margin: 0 auto;可以达到剧中的效果

示例：

.box {
margin: 0 auto;
/*
这个代码,实际上为下面代码的简写
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
*/
}

行内元素水平居中效果

对于行内元素，设置text-align: center可以到达居中效果
但是有个缺点，由于 text-align: center; 是可继承属性，即父元素内部所有元素都会继承这个属性，从而它在元素内部的文本都会居中显示。因此需要对子元素的文本居中样式单独设定

示例：

  google

inline-block 元素水平居中

仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果

示例：

    
        
        
    

    
        

            
项目1
            
项目2
            
项目3
            
项目4