css3 inline、 block、inline-block

 

• 把三个li标签放一行显示

body代码

    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">职位</a></li>
        <li><a href="#">设置</a></li>
    </ul>

样式代码如下

        li {
            /* 不改属性display默认值为list-item */
            display: inline;/* 块属性变成行属性 */
    }
        li a {
            padding: 20px;  /*** a标签是一个行标签 **/
        }

• 让图片居中显示

body中代码

 <img src="./img/leaf.png" alt="my image">

样式代码

img {
            /*margin: 10px 20px;  !***  margin: auto 图片不能居中 **!*/
            display: block;
            margin: auto;
        }

• 3个div一行显示

body中代码

 <div class="box">
        <h3>Heading1</h3>
        <p>China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.
           China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.
        </p>
    </div>

    <div class="box">
        <h3>Heading2</h3>
        <p>China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.
            China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.
        </p>
    </div>

    <div class="box">
        <h3>Heading3</h3>
        <p>China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.
            China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.China全栈测试开发总部群：894912752.
        </p>
    </div>

样式代码

        .box {/** 原本是块标签，块标签不和其他内容摆一行，期望变成行标签,设置display: inline。 **/
            /** 不会用行标签作为对应的一个容器 **/
            width: 32.8%;
            display: inline-block;
            /**改inline-block，它的宽度可以自己定，里面的内容可以撑开，它可以设置宽高,如果是行标签不能设置宽和高*/
            /*display: inline-block; */
            background: #f4f4f4;
            padding: 20px;
            margin-bottom: 15px;
            box-sizing: border-box;


        }

 

本文地址：https://blog.csdn.net/jianjian_5201314/article/details/112596762