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 @   ascertain  阅读(6)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS: offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHeight
·  CSS: scrollTop scrollLeft
·  document文档视图尺寸
·  css27 CSS Layout - width and max-width
·  html+css实战104-外边距
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
历史上的今天：
2020-09-26 ps & pstree
2020-09-26 切割web日志
2020-09-26 java & javaw
点击右上角即可分享
微信分享提示
AI IDE Trae