HTML5和CSS3四属性总结一

代码下载地址

padding属性

padding 在一个声明中设置内边距属性。不允许指定负边距值。

可能的值

        p.p2 {
            background-color: green;
            padding: 5px 10px 15px 20px;/*上右下左*/
        }

CSS 拥有用于为元素的每一侧指定内边距的属性：

• padding-top 设置元素的上内边距。
• padding-right 设置元素的右内边距。
• padding-left 设置元素的左内边距。
• padding-bottom 设置元素的下内边距。

        h3 {
            text-align: center;
            padding-top: 30px;
            padding-bottom: 30px;
        }

CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

        p.p3 {
            background-color: blue;
            width: 400px;
            padding: 20px;
        }

若要将宽度保持为 400px，无论填充量如何，那么可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

        p.p4 {
            background-color: cyan;
            width: 400px;
            box-sizing: border-box;
            padding: 20px;
        }

margin属性

声明中设置外边距属性，与padding类似。

        p.p5 {
            background-color: pink;
            margin: 20px;
        }

将 margin 属性设置为 auto，以使元素在其容器中水平居中。该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

        p.p6 {
            background-color: yellow;
            width: 300px;
            margin: auto;
        }

position属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：static、relative、fixed、absolute、sticky。

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

position: static

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

        p.p7 {
            background-color: red;
            position: static;
        }

position: relative

元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间：

        p.p8 {
            background-color: green;
            position: relative;
            left: 20px;
        }

position: fixed

元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙，也不会占据自身的空间。

        p.p9 {
            background-color: blue;
            position: fixed;
            left: 0px;
            top: 0px;
        }

position: absolute

元素相对于最近的定位父元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有父元素，它将使用文档主体（body），并随页面滚动一起移动。

“被定位的”元素是其位置除 static 以外的任何元素。

        p.p10 {
            background-color: cyan;
            width: 400px;
            position: absolute;
            right: 100%;
            top: 0;
        }

position: sticky

元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的实例）。还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

        p.p11 {
            background-color: pink;
            position: sticky;
            top: 10px;
            width: 400px;
            margin: auto;
            z-index: 999;
        }

重叠元素

在对元素进行定位时，它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。元素可以设置正或负的堆叠顺序。

        p.p12 {
            background-color: yellow;
            position: relative;
            left: 100px;
            top: -10px;
            z-index: -1;
        }

display 属性

display 属性是用于控制布局的最重要的 CSS 属性，规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

• 块级元素（block element）：总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
• 行内元素（inline element）：不从新行开始，仅占用所需的宽度。

display: none， 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中。visibility:hidden; 也可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局。

    <span>display隐藏</span>
    <span>visibility隐藏</span>
    <span>我是参照</span> <br/>
    <input id="display" type="button" value="display隐藏">
    <input id="visibility" type="button" value="visibility隐藏">
    <input id="reset" type="button" value="重置">
    
    
    <script>
    window.onload = function () {
        document.getElementById("display").onclick = function () {
            document.querySelectorAll("span")[0].style.display = "none";
        }
        document.getElementById("visibility").onclick = function () {
            document.querySelectorAll("span")[1].style.visibility = "hidden";
        }
        document.getElementById("reset").onclick = function () {
            document.querySelectorAll("span")[0].style.display = "inline";
            document.querySelectorAll("span")[1].style.visibility = "visible";
        }
    }
</script>