zoukankan      html  css  js  c++  java
  • 一天搞定CSS: 浮动(float)与inline-block的区别--11

    浮动:

    使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来。

    inline-block:

    inline-block是指行内块元素,它具有行内元素和块元素两者的特点,可以实现对元素的有序排序。


    两者的区别

    两者主要区别在于当标签的【高度不一致】时,体现出的差异

    如果高度不一致的情况下,想让他们按顺序排列就可以选择inline-block

    1)浮动时代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                ul{
                    width: 300px;
                    font-size: 0;
                }
                li{
                    list-style: none;
                    width: 100px;
                    height: 150px;
                    background: green;
                    font-size: 40px;
                    text-align: center;
                    line-height: 150px;
                    color: #fff;
                    float: left;
                    /*float: right;*/
                    /*display: inline-block;*/
                }
            </style>
        </head>
        <body>
            <!--
                如果高度不一至的情况下,想让他们按顺序排列就可以选择inline-block
            -->
            <ul>
                <li>1</li>
                <li style="height: 200px;">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </body>
    </html>
    

    效果图:

    这里写图片描述


    2)使用inline-block时代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                ul{
                    width: 300px;
                    font-size: 0;
                }
                li{
                    list-style: none;
                    width: 100px;
                    height: 150px;
                    background: green;
                    font-size: 40px;
                    text-align: center;
                    line-height: 150px;
                    color: #fff;
                    /*float: left;*/
                    /*float: right;*/
                    display: inline-block;
                }
            </style>
        </head>
        <body>
            <!--
                如果高度不一至的情况下,想让他们按顺序排列就可以选择inline-block
            -->
            <ul>
                <li>1</li>
                <li style="height: 200px;">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </body>
    </html>
    

    效果图:

    这里写图片描述


    总结:

    在浮动时,若第一个元素的高度大于第二个元素的高度,第三个元素浮动时,会与第二元素并排在一列中,这样不能出现有序排列了。
    
    在inline-block时,就算第一个元素的高度大于第二个元素的高度,第三个元素也不会与第二个元素排在一列。
    
    【这里第一二三个元素,不是指第一二三个元素,只是为了说明三个元素的关系】
    
  • 相关阅读:
    Android 中常用代码片段
    查看oracle中的中文所占字节数
    order by 中 使用decode
    Oracle select 中case 的使用以及使用decode替换case
    pyqt5 'QWidget' object has no attribute 'setCentralWidget'(转)
    程序员之路:python3+PyQt5+pycharm桌面GUI开发(转)
    QT5入门之23 -QT串口编程(转)
    xpath-helper: 谷歌浏览器安装xpath helper 插件
    mysql给root开启远程访问权限
    Vmware无法获取快照信息 锁定文件失败
  • 原文地址:https://www.cnblogs.com/TCB-Java/p/6853971.html
Copyright © 2011-2022 走看看