CSS的元素显示模式(块元素、行内元素、行内块元素和显示模式转换)

特点如下：

• 独占一行
• 可以设置高度、宽度、外边距、内边距
• 宽度默认是父级的100%
• 里面可以放行内元素或块级元素
• 注意：文字类的块元素，如

  、 ~ ，里面不能放块元素

常见的有、、、、、、、、

特点如下：

• 一行可以放多个行内元素，父元素宽度不够则自动换行
• 不可以设置宽度、高度
• 默认宽度是内容的宽度
• 里面只能放文本或行内元素
• 注意：里面不能放

常见的有、、

同时具有块元素和行内元素的特点

    
    test title

    

        a {
            display: block;
            height: 100px;
            width: 100px;
            background: red;
        }

    




链接一
链接二

显示如下：

    
    test title

    

        div {
            display: inline;
        }

    




盒子一
盒子二

显示效果如下：

    
    test title

    

        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }

    




盒子一
盒子二

显示效果：