css：元素显示模式

元素显示模式

    1.1块级元素：

    独占一行

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

    可以设置宽高

    代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer...

    2.1行内元素

    一行可以显示多个

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

    不可以设置宽高

    代表标签：a、spar、b、u、i、s、strong、ins、em、del...

    3.1行内块元素

    一行可以显示多个

    可以设置宽高

    代表标签：input、textarea、button、select...

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

元素显示模式转换

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

    语法：

                 属性                               效果                    使用频率

            display:block               转换成块级元素             较多

        display:inline-block      转换成行内块元素             较多

            display:inline               转换成行内元素             较少

    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>

a{
    text-decoration: none;
    color: aliceblue;
    background-color: red;
    text-align: center;
    line-height: 60px;
    height:60px;
    width: 100px;
}

a{
    text-decoration: none;
    color: aliceblue;
    background-color: red;
    display: inline-block;
    text-align: center;
    line-height: 60px;
    height:60px;
    width: 100px;
}

拓展1：html嵌套规范注意点

    1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等

      但是：p标签中不要嵌套div、p、h等块级元素

                 h和p不能相互嵌套

    2.a标签内部可以嵌套任意元素

      但是：a标签不能嵌套a标签