网页盒子模型测试

qq_37398808

已于 2023-09-11 20:36:53 修改

阅读量36

点赞数

文章标签： html css javascript

于 2023-04-09 11:54:38 首次发布

本文链接：https://blog.csdn.net/qq_37398808/article/details/130040146

版权

<html>
<head>
    <style>
        #d1 {
            background-color: red;
            height: 100px;
            padding: 0;
            border: 10px dashed black;
            margin: 0;
        }

        #d2 {
            /*背景颜色覆盖content,padding,border*/
            background-color: green;
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 5px dashed black;
            margin: 0px;
        }

        #d3 {
            background-color: blue;
            height: 100px;
            padding: 0;
            border: 10px dashed black;
            margin: 0;
        }
    </style>
</head>
<body>
    宽度(width): <input type="text" value="100px" onchange="document.getElementById('d2').style.width = this.value">
    高度(height): <input type="text" value="100px" onchange="document.getElementById('d2').style.height = this.value"><br>

    上填充(padding-top): <input type="text" value="10px" onchange="document.getElementById('d2').style.paddingTop = this.value">
    右填充(padding-right): <input type="text" value="10px" onchange="document.getElementById('d2').style.paddingRight = this.value">
    下填充(padding-bottom): <input type="text" value="10px" onchange="document.getElementById('d2').style.paddingBottom = this.value">
    左填充(padding-left): <input type="text" value="10px" onchange="document.getElementById('d2').style.paddingLeft = this.value"><br>

    上边框(border-top): <input type="text" value="5px" onchange="document.getElementById('d2').style.borderTopWidth = this.value">
    右边框(border-right): <input type="text" value="5px" onchange="document.getElementById('d2').style.borderRightWidth = this.value">
    下边框(border-bottom): <input type="text" value="5px" onchange="document.getElementById('d2').style.borderBottomWidth = this.value">
    左边框(border-left): <input type="text" value="5px" onchange="document.getElementById('d2').style.borderLeftWidth = this.value"><br>

    上边距(margin-top): <input type="text" value="0px" onchange="document.getElementById('d2').style.marginTop = this.value">
    右边距(margin-right): <input type="text" value="0px" onchange="document.getElementById('d2').style.marginRight = this.value">
    下边距(margin-bottom): <input type="text" value="0px" onchange="document.getElementById('d2').style.marginBottom = this.value">
    左边距(margin-left): <input type="text" value="0px" onchange="document.getElementById('d2').style.marginLeft = this.value"><br>

    <div id="d1"> </div>
    <div id="d2">padding影响我。 </div>
    <div id="d3"> </div>

</body>
</html>

#deb cdrom:[Ubuntu 22.04.3 LTS _Jammy Jellyfish_ - Release amd64 (20230807.2)]/ jammy main restricted

# See http://help.ubuntu.com/community/UpgradeNotes for how to upgrade to
# newer versions of the distribution.
deb http://cn.archive.ubuntu.com/ubuntu/ jammy main restricted
# deb-src http://cn.archive.ubuntu.com/ubuntu/ jammy main restricted

## Major bug fix updates produced after the final release of the
## distribution.
deb http://cn.archive.ubuntu.com/ubuntu/ jammy-updates main restricted
# deb-src http://cn.archive.ubuntu.com/ubuntu/ jammy-updates main restricted

## N.B. software from this repository is ENTIRELY UNSUPPORTED by the Ubuntu
## team. Also, please note that software in universe WILL NOT receive any
## review or updates from the Ubuntu security team.
deb http://cn.archive.ubuntu.com/ubuntu/ jammy universe
# deb-src http://cn.archive.ubuntu.com/ubuntu/ jammy universe
deb http://cn.archive.ubuntu.com/ubuntu/ jammy-updates universe
# deb-src http://cn.archive.ubuntu.com/ubuntu/ jammy-updates universe

## N.B. software from this repository is ENTIRELY UNSUPPORTED by the Ubuntu 
## team, and may not be under a free licence. Please satisfy yourself as to 
## your rights to use the software. Also, please note that software in 
## multiverse WILL NOT receive any review or updates from the Ubuntu
## security team.
deb http://cn.archive.ubuntu.com/ubuntu/ jammy multiverse
# deb-src http://cn.archive.ubuntu.com/ubuntu/ jammy multiverse
deb http://cn.archive.ubuntu.com/ubuntu/ jammy-updates multiverse
# deb-src http://cn.archive.ubuntu.com/ubuntu/ jammy-updates multiverse

## N.B. software from this repository may not have been tested as
## extensively as that contained in the main release, although it includes
## newer versions of some applications which may provide useful features.
## Also, please note that software in backports WILL NOT receive any review
## or updates from the Ubuntu security team.
deb http://cn.archive.ubuntu.com/ubuntu/ jammy-backports main restricted universe multiverse
# deb-src http://cn.archive.ubuntu.com/ubuntu/ jammy-backports main restricted universe multiverse

deb http://security.ubuntu.com/ubuntu jammy-security main restricted
# deb-src http://security.ubuntu.com/ubuntu jammy-security main restricted
deb http://security.ubuntu.com/ubuntu jammy-security universe
# deb-src http://security.ubuntu.com/ubuntu jammy-security universe
deb http://security.ubuntu.com/ubuntu jammy-security multiverse
# deb-src http://security.ubuntu.com/ubuntu jammy-security multiverse

# This system was installed using small removable media
# (e.g. netinst, live or single CD). The matching "deb cdrom"
# entries were disabled at the end of the installation process.
# For information about how to configure apt package sources,
# see the sources.list(5) manual.