The front Display

Display method

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>显示方式</title>
    <style>
        .box {
            width: 500px;
            height: 100px;
            background-color: orangered;
        }
    </style>
    <style>
        /*显示方式：display
        block：
            1.支持设置宽高
            2.自带换行
            重点：所有有宽高、参与位置布局的都是block

        inline：
            1.不支持设置宽高，宽高只能有文本撑开
            2.不带换行，一行显示不下会自动换行(保留数据的整体性)
            重点：存放文本的

        inline-block:
            1.支持设置宽高
            2.不带换行，一行显示不下会自动换行(以标签整体换行，标签左右有间距)
            重点：不去主动设置该显示方式，系统的两个img、input都设置为了单标签(不会嵌套任何东西)
            注：如果要用inline-block参与布局，为了标签布局不受内容影响，设置vertical-align: top
        */
        a {
            width: 500px;
            height: 100px;
            display: block;
            background-color: pink;
        }
        owen {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: cyan;
            font-size: 30px;

            /*文本垂直对齐方式: baseline top bottom*/
            vertical-align: top;
        }
        owen:nth-of-type(2) {
            font-size: 20px;
        }

        img {
            width: 100px;
            height: 100px;
            background-color: tan;
        }
        input {
            width: 100px;
            height: 100px;
            background-color: tan;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <a href="5.边界圆角.html" class="box"></a>

    <div>div1</div>
    <div>div2</div>

    <a href="">a1</a>
    <a href="">a2</a>

    <owen>html/css</owen>
    <owen>javascript</owen>
    <owen></owen>
    <owen></owen>
    <owen></owen>
    <img src="img/lss.jpg" alt="">
    <input type="text">
    
    <div></div>
</body>
</html>
Display method

Guess you like
