CSS3-显示模式

    显示模式

        1 块级显示

        2 行内显示

        3 行内块显示

        4 元素显示模式转换

        5 拓展

        1 块级显示

        属性：display:block

        显示特点：

            1 独占一行（一行只能显示一个）

            2 宽度默认是父元素的宽度，高度默认由内容撑开

            3 可以设置宽高

        代表标签：

            div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

        2 行内显示

        属性：display:inline

        显示特点：

            1 一行可以显示多个

            2 宽度和高度默认由内容撑开

            3 不可以设置宽高

        代表标签：

        a、span 、b、u、i、s、strong、ins、em、del……

        3 行内块显示

        属性：display:inline-block

        显示特点：

            1 一行可以显示多个

            2 可以设置宽高

        代表标签：

            1 input、textarea、button、select……

            2 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

        4 元素显示模式转换

            目的：改变元素默认的显示特点，让元素符合布局要求

            使用较多：display:block（块级显示） display:inline-block（行内块显示）

            使用较少：display:inline（行内显示）

        5 拓展

            HTML嵌套规范注意：

                1 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等，但是：p标签中不要嵌套div、p、h等块级元素

                2 a标签内部可以嵌套任意元素，但是：a标签不能嵌套a标签

            居中方法总结：

                水平居中：

                    text-align:center 

                        1 文本

                        2 行内元素 span、a

                        3 行内块元素 input、img

                        注意：text-align:center 直接设置在元素的父标签即可

                    margin:0 auto

                        1 块级元素 

                        注意：margin:0 auto 直接设置在当前标签即可

                垂直居中：

                    line-height 单行文本 

代码：

    
    
    
    
    




    

        这是h1标签111
    
    

        这是h1标签222
    
    

        display:block（块级显示）
 显示特点：
        
 1 独占一行（一行只能显示一个）
 2 宽度默认是父元素的宽度，高度默认由内容撑开
 3 可以设置宽高

    
    
        display:inline（行内显示）
    
    
        1 一行可以显示多个
    
    
        2 宽度和高度默认由内容撑开
    
    
        3 不可以设置宽高
    
    

    
    
    

效果图：