4.02.02

<html>
<head>
<meta charset="utf-8">
<title>内联元素与块元素的转换</title>
<style>
  #d1{

    width: 200px;
    height: 200px;
    background-color: red;
    margin: auto;
    padding: 50px;
    /*将块元素转化内联元素*/
    display: inline;
    }
  #s1{

    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 50px 20px;
    padding: 10px 30px;
    /*将内联元素转化为块元素*/
    display: block;
    }
  #d2{

    width: 200px;
    height: 200px;
    background-color: yellow;
    /*将元素隐藏*/
    display: none;
    }
</style>
</head>

<body>
  <div id="d1">我是div</div>
  <div id="d2">
    <span id="s1">我是span</span>
  </div>
</body>
</html>

posted on 2019-04-02 20:59  boss-H  阅读(199)  评论(0)    收藏  举报

导航