#CSS基础Block，Inline与Inline-block

CSS基础Block，Inline与Inline-block

HTML元素，大致上分为两种，一种是block，另一种是inline。block是区块的意思，例如一个文字的段落，就可以理解为一个区块，而inline中文译作“内联”。 例如一个段落中的一个词语，就是一个内联元素。

block元素

block元素，例如div、p标签。块级元素最大的特点就是，可以设定元素的高度，宽度等块级属性。同时它们会独占一行，不管它的width属性是多少。

inline元素

如果想将段落里的部分文字标示为粗体，将对应的文字用包裹就可以，这里的标签，就是一个内联元素。内联元素(inline元素)最大的特点是不可以设定宽度与高度。 可以和其他的inline元素并排。

inline-block元素

它结合了block和inline元素的特性。既可以设定宽度与高度，又可以与其他inline元素并排。

例如，我们在一段文字(p标签，块级元素)里，通过a链接（默认内联元素），让一个单词变成为一个按钮。

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ab at ipsum qui non, hic voluptas ratione nisi
    consequuntur asperiores nihil sed ducimus fugit a vitae natus assumenda quod ea? <ReadMore>

p a{
    display: inline-block;
    width: 180px;
    height: 40px;
    line-height: 40px;/*使得当前行上下居中*/
    text-align:center;
    background-color: #555;
    text-decoration: none;
    color: antiquewhite;
    border-radius: 50px;
    border:1px aquamarine solid ;
}

对齐方法（左右）

准备

    
Block
    inline
    

    inline-block

div{
    width: 50%;
}
span{

}
strong{
    display: inline-block;
}

div,span,strong{
    background-color: black;
    color:white
}

此时，如果我们设定：

body{
    text-align: center;
}

可以看到，inline和inline-block元素，直接被居中对齐了。 而block元素本身没有居中，但是其中的文字居中了。这是因为，我们没有单独的指定block元素中的文字对齐方式，默认的，他会继承父级元素，即body指定的文字对齐方式。

为了使得block元素左右对齐，我们仅需要设定其左右margin值为auto即可，注意，不是50%。

div {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}