lovecoding
/
W250511


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 行块元素 */
        /* 行元素他的大小是根据内容撑开 */
        /* 行元素不接受宽高属性 */
        /* 行元素设置margin 上下无效 左右是有效的 */
        span{
            width: 100px;
            height: 100px;
            background-color: red;
            /* margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px; */

            /* display 转换当前标签的显示模式 */
            /* block 块元素 */
            display: block;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: blue;
            /* inline 行元素 */
            display: inline;
        }
        img{
            width: 100px;
        }

        .span1{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            /* 行块元素 inline-block*/
            display: inline-block;
        }

        .box1{
            width: 100px;
            border:3px solid black;
        }
        img{
        }
    </style>
</head>
<body>
    <!-- <div class="box">123</div>
    <span>hello</span><span>world</span>
    <div class="box">123</div> -->

    <!-- img标签是行块元素 即具备行元素和块元素的特点 -->
     <!-- 行块元素特点：多个元素在同一行并且可以设置高度宽度 -->
    <!-- <img src="./image/phone.png" alt="img">
    <img src="./image/phone.png" alt="img"> -->


    <span class="span1"> hello </span>
    <span class="span1"> world </span>

    <div class="box1">
        <img src="./image/img1.jpg" alt="">
    </div>

</body>
</html>