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

2018-04-06 本文已影响0人饥人谷_易燃

块级元素(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; 是可继承属性，即父元素内部所有元素都会继承这个属性，从而它在元素内部的文本都会居中显示。因此需要对子元素的文本居中样式单独设定

示例：

<style>
  .box{
  text-align: center;
  }
</style>

<div class="box">
  <a href="www.google.com" >google</a>
</div>

inline-block 元素水平居中

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

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
        body{
            text-align: center;
        }
        
        .tab-ct>li{
            display:inline-block;
            margin: 0 4px;
        }
        </style>
    </head>

    <body>
        <ul class="tab-ct">
            <li><a class="btn" href="#">项目1</a></li>
            <li><a class="btn" href="#">项目2</a></li>
            <li><a class="btn" href="#">项目3</a></li>
            <li><a class="btn" href="#">项目4</a></li>
        </ul>
    </body>
</html>