CSS属性（display）

1.display属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>08display属性</title>
    <style>

        .c1 {
            background-color: red;
            /*display: none;  !* 让其在页面上不显示 *!*/
            /*display: inline;    !* 让其变成一个行内标签 *!*/
            display: inline-block;  /* 让其具有块级标签和内联标签（行内标签）特点，就是可以设置长和宽的行内标签 */
        }

        .c2 {
            width: 100px;
            height: 100px;
            background-color: green;
            /*display: block; !* 让其变成一个块级标签*!*/
            display: inline-block;  /* 让其具有块级标签和内联标签（行内标签）特点，就是可以设置长和宽的行内标签 */
        }

        #ulid1 {
            background-color: darkslategrey;
            display: inline-block;
            list-style-type: none;  /* 将标题前面的点去掉 */
        }

        li {
            display: inline-block;  /* 将li标签变为行内标签，并且可以设置长和宽 */
            border-right: 2px solid bisque; /* 设置右边框2像素 实线 */
        }

        li.last {
            border-right: none; /* 将li最后一个标签的右边框设置成没有 */
        }

    </style>
</head>
<body>

<div class="c1">div</div>       <!-- div是块级标签，可以设置长和宽 -->
<span class="c2">span</span>    <!-- span标签是一个内联标签，自己占多大就占多大,不能设置长和宽 -->
<span class="c2">span</span>


<ul id="ulid1">
    <li>玉米商城</li>
    <li>电脑</li>
    <li>手机</li>
    <li class="last">平板</li>
</ul>

</body>
</html>
猜你喜欢
