html——行内元素、块元素、行内块元素

行内元素：span  ,a,  ,strong , em,  del,  ins。特点：在一行上显示；不能直接设置宽高；元素的宽和高就是内容撑开的宽高。

块元素：div,h1-h6,p,ul,li。特点：独占一行；可以设置宽高；注释：嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。

行内块元素(内联元素)：input  img。特点：在一行上显示，也可设置其宽高。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: red;    
        }

        p {
            height:50px;
            background-color: #00ffff;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div> 
</body>
</html>

上述代码演示了父元素div里嵌套了一个子元素p，p在没有设置宽度的情况下，默认的接受了父div的宽度。

行内元素转块元素：display：block。行业元素配置之后，将会拥有块元素的所有属性。可以独占一行，并可以设置宽高。

块元素转行内元素：display:inline。块元素配置之后，将会拥有行业元素的所有属性。不在拥有设置宽高的属性，也不会独占一行。

块元素和行内元素转行内块元素：display:inline-block。配置之后，既可以在一行上显示，也可以设置宽高。

 

 

      

posted @ 2017-11-02 11:06  var_obj  阅读(1203)  评论(0)  编辑  收藏  举报