p标签里面嵌套问题

545 阅读1分钟

使用p标签嵌套h标签出现的问题:

<p>

    <h2>title</h2>

</p>

这个时候会被浏览器解析成

<p></p>

    <h1>title</h1>

<p></p>

总结:p标签内只能嵌套内联元素,不能嵌套块元素,类似h1、div、ul块元素都不可自由嵌套在p标签内。强行嵌套元素,写的样式也不会生效。

JS数字滚动效果

<!DOCTYPE html>

<html>

<head>

        <title></title>

        <style type="text/css">

                #root{

                        display: flex;

                        justify-content: center;

                        width: 50px;

                        padding: 10px;

                        font-size: 25px;

                        font-weight: 600;

                        border: 5px solid grey;

                        border-radius: 20px;

                }

        </style>

</head>

<body>

        <div id="root">0</div>

</body>



<script type="text/javascript">

        function roll(total, idname, step) {

                let n = 0;

                return function () {

                        n = (n + step) >= total ? total : (n + step);

                        if (n <= total) {

                                document.getElementById(idname).innerHTML = n;

                        }

                }

        }

        function start(index, idname, step, runtime = 1000){

                let rolling = roll(index, idname, step)

                runtime = (runtime >= 300) ? runtime : 1000;

                for (let i = 0; i < (index/step); i++) {

                        let timer = setTimeout(rolling, (runtime/index)*i*step)

                }

                clearTimeout(timer);

        }

        start(100,'root', 4,)

</script>

</html>