行块属性及其转换

行块属性

块属性： div, p, ul, ol ,li,h1-h6，dl,table,address blockquote form​

特点：1.可以设置宽高 ​ 2.不可以与别人共处一行 ​ 3.不可以设置宽度的情况下，宽度为100%

div{
            width: 30px;
            height: 30px;
            background: lightblue;
            /*display: inline-block;*/ //此行代码 可以时div 共处一行
        }

 

 

行内属性： span，a   strong em del ins label​

特点：1.不可以设置宽高 ​ 2可以与别人共处一行 ​ 3.其宽高由内容撑开

    span{
            width: 300px;
            height: 300px;
            background: lightgreen;
            /*display: inline-block;*/  /*行块属性  使用之后宽高有效*/
        }

 

​ 行内块属性：img，input ​

特点：1.可以设置宽高 ​ 2.可以与别人共处一行

input{
            width: 300px;
            height: 30px;

        }

 各种属性元素转换

块元素转行内元素

div，p{

　　　　Display : inline ; 

　　　　}

 

行内元素转块元素

a，span{

　　　　Display ： block 

 　　　　}

块元素和行内元素转 行内块元素

div，a，ui，ul{

 　　　　　　　　Display ： inline - block ；

　　　　　　　　}