CSS: width height

 

 

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        width: 2000px;
        height: 2000px;
        border: 1px solid violet;
        padding: 10px 20px 30px 40px;
        margin: 10px 20px 30px 40px;
        background-color: silver;
        word-break: keep-all;
        /* white-space: nowrap; */
    }

    html {
        /* border: 10px dashed maroon;
        padding: 10px 20px 30px 40px;
        margin: 10px 20px 30px 40px; */
        background-color: lightcoral;
    }

    :where(dt, dd) {
        display: inline-block;
    }

    blockquote {
        font-weight: bolder;
    }
</style>

<body>
    <fieldset>don't set margin border padding on html</fieldset>
    <blockquote></blockquote>
    <blockquote></blockquote>
    <blockquote>document.body</blockquote>
    <dl></dl>
    <blockquote>document.documentElement</blockquote>
    <dl></dl>
    <script>
        function setup() {
            document.querySelector('blockquote:nth-of-type(1)').innerHTML = `
            innerWidth: ${innerWidth}
            `
            document.querySelector('blockquote:nth-of-type(2)').innerHTML = `
            innerHeight: ${innerHeight}
            `
            let body = document.querySelector('dl:nth-of-type(1)')
            body.innerHTML = `
            <figure>
                <dt>clientWidth:</dt><dd>${document.body.clientWidth}</dd>
            </figure>
            <figure>
                <dt>offsetWidth:</dt><dd>${document.body.offsetWidth}</dd>
            </figure>
            <figure>
                <dt>scrollWidth:</dt><dd>${document.body.scrollWidth}</dd>
            </figure>
            <figure>
                <dt>clientHeight:</dt><dd>${document.body.clientHeight}</dd>
            </figure>
            <figure>
                <dt>offsetHeight:</dt><dd>${document.body.offsetHeight}</dd>
            </figure>
            <figure>
                <dt>scrollHeight:</dt><dd>${document.body.scrollHeight}</dd>
            </figure>
            `
            let documentElement = document.querySelector('dl:nth-of-type(2)')
            documentElement.innerHTML = `
            <figure>
                <dt>clientWidth:</dt><dd>${document.documentElement.clientWidth}</dd>
            </figure>
            <figure>
                <dt>offsetWidth:</dt><dd>${document.documentElement.offsetWidth}</dd>
            </figure>
            <figure>
                <dt>scrollWidth:</dt><dd>${document.documentElement.scrollWidth} document.body.offsetWidth + marginLeft</dd>
            </figure>
            <figure>
                <dt>clientHeight:</dt><dd>${document.documentElement.clientHeight}</dd>
            </figure>
            <figure>
                <dt>offsetHeight:</dt><dd>${document.documentElement.offsetHeight}</dd>
            </figure>
            <figure>
                <dt>scrollHeight:</dt><dd>${document.documentElement.scrollHeight} document.body.offsetHeight + marginTop + marginBottom</dd>
            </figure>
            `
        }
        setup()
    </script>
</body>

</html>

 

 

 

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
        }

        div {
            width: 500px;
            height: 500px;
            padding: 30px;
            border: 20px dashed maroon;
            margin: 10px;
            background-color: plum;
            position: relative;
            overflow-x: scroll;
            overflow-y: scroll;
            display: flow-root;
        }

        aside {
            width: 100px;
            height: 800px;
            padding: 30px;
            border: 20px dotted coral;
            margin: 10px;
            background-color: peru;
            position: absolute;
            top: 50px;
        }

        blockquote {
            font-weight: bolder;
        }

        :where(dt, dd) {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div>
        <aside></aside>
    </div>
    <blockquote>div</blockquote>
    <dl></dl>
    <blockquote>aside</blockquote>
    <dl></dl>
    <script>
        function setup() {
            const div = document.querySelector('div')
            const aside = document.querySelector('aside')
            let d1 = document.querySelector('dl:nth-of-type(1)')
            d1.innerHTML = `
                <figure>
                    <dt>clientWidth:</dt><dd>${div.clientWidth}</dd>
                </figure>
                <figure>
                    <dt>offsetWidth:</dt><dd>${div.offsetWidth}</dd>
                </figure>
                <figure>
                    <dt>scrollWidth:</dt><dd>${div.scrollWidth}</dd>
                </figure>
                <figure>
                    <dt>clientHeight:</dt><dd>${div.clientHeight}</dd>
                </figure>
                <figure>
                    <dt>offsetHeight:</dt><dd>${div.offsetHeight}</dd>
                </figure>
                <figure>
                    <dt>scrollHeight:</dt><dd>${div.scrollHeight}</dd>
                </figure>
                `
            let d2 = document.querySelector('dl:nth-of-type(2)')
            d2.innerHTML = `
                <figure>
                    <dt>clientWidth:</dt><dd>${aside.clientWidth}</dd>
                </figure>
                <figure>
                    <dt>offsetWidth:</dt><dd>${aside.offsetWidth}</dd>
                </figure>
                <figure>
                    <dt>scrollWidth:</dt><dd>${aside.scrollWidth}</dd>
                </figure>
                <figure>
                    <dt>clientHeight:</dt><dd>${aside.clientHeight}</dd>
                </figure>
                <figure>
                    <dt>offsetHeight:</dt><dd>${aside.offsetHeight}</dd>
                </figure>
                <figure>
                    <dt>scrollHeight:</dt><dd>${aside.scrollHeight}</dd>
                </figure>
                `
        }
        setup()
    </script>
</body>

</html>

 

posted @ 2023-09-26 23:47  ascertain  阅读(15)  评论(0)    收藏  举报