HTML5和CSS3四屬性總結一

代碼下載地址

padding屬性

padding 在一個聲明中設置內邊距屬性。不允許指定負邊距值。

可能的值

值	描述
auto	瀏覽器計算內邊距。
length	規定以具體單位計的內邊距值，比如像素、釐米等。默認值是 0px。
%	規定基於父元素的寬度的百分比的內邊距。
inherit	規定應該從父元素繼承內邊距。

        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>