块内标签和行内标签的转换与display：inline-block

display （块级标签和行内标签互转）

display：none 让标签消失

display：inline

display：block

display：inline-block

　　加上inline-block属性之后呢这个标签就具有了inline属性，自己多长就占了多长，比如一个div他可以变成一行内标签，后面可以继续跟元素

　　也具有了block属性，可以设置高度，宽度，margin、padding

 

行内标签，无法设置高度，宽度 padding margin

块级标签可以设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--width: 300px不生效了，下面的span可以显示在div后面-->
    <div style="background-color: blue;display: inline;width: 300px">asdf</div>
    <span>1222222222222222222</span>
    <!--span变成了块级标签，下面那个span到了下一行-->
    <span style="background-color: red;display: block;width: 200px">asdf</span>
    <span>33333333333333</span>
    <!--同时具有了块级和行内标签的效果-->
    <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span>
    <span>444444444444</span>
    <a style="background-color: red;">Eric</a>
</body>
</html>

　　

 

posted @ 2018-04-04 00:17  梦中琴歌  阅读(328)  评论(0)    收藏  举报