记事本

55 阅读1分钟

父元素使用flex布局后子元素自动拥有行内块元素特性

下面span元素拥有行内块元素的特性,不独占一行且可以设置宽高

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=\, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .outer {
                display: flex;
            }
            span {
                width: 100px;
                height: 100px;
                background-color: aquamarine;
                display: inline;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <span>aaasdasdasdsad</span>
            <span>aaasdasdasdsad</span>
            <i>asdadsa</i>
        </div>
    </body>
</html>

image.png

网格间距

网格间距是网格内容之间的间距,可以通过 [column-gap]或 [gap]属性在[网格布局]中创建

image.png

浏览器渲染

浏览器渲染原理