浮动导致元素显示模式变化与行内块属性/前端四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            background-color: pink;
            float: left;
            /*行内元素一浮动就变成行内块了， 不用display:inline-block 就可以设置宽高,
            浮动就是用来解决行内块问题的*/
            width: 150px;
            height: 80px;

        }

    </style>

</head>
<body>
<!--块级元素加了浮动会变成行内块-->

<span>元素一</span>
<span>元素一</span>
<span>元素一</span>
<span>元素一</span>
<span>元素一</span>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            display: inline-block;/*移动端会用这个，PC端最好不用，PC端用float挺好的*/
        }
        .a{
            border: #333333 solid 3px;
            vertical-align: top;  /*a,b错位以后要用vertical-align:top来对齐框框*/
        }
        .b{
            border: #a4a4a4 solid 3px;
        }

    </style>
</head>
<body>
<div class="a">
<span>123123</span>
</div>

<div class="b"></div>
</body>
</html>

浮动导致元素显示模式变化与行内块属性/前端四

相关推荐