body沒有高度設置背景色為什么可以全屏顯示？

-- 關于html和body的那些事

還記得我們開發全屏頁面或者是移動端頁面時經常會設置一句話

html, body { height: 100%; }

是不是只知道用？卻不知道怎么回事？

原因是，當沒有內容撐開高度時，html和body的默認高度是0，如果內容想要按照比例或是撐滿全屏時，就沒辦法正常使用百分比

而如果只設置body { height: 100%; }，這時body以html的高度為基準，但html默認高度也是0，所以需要設置html與body高度同與瀏覽器等高

但！

當我們沒有設置任何高度的情況下，給body設置背景色，顏色竟然是可以布滿瀏覽器的，然而可以看到控制臺中，body實實在在是沒有高度的，這究竟是為什么呢？

body {
    background: pink;
}

事實上，當我們單獨給body設置背景顏色時，并不是body標簽被賦予了背景色，而是【 瀏覽器畫布 】賦上了顏色，可以理解為，body的背景色被瀏瀏覽器”吃掉“

那如果我們同時給html與body設置背景色，會發生什么樣的結果呢

html {
    background: orange;
}

body {
    background: pink;
}

可以看到，我們設置的body背景色竟然“失效了”，瀏覽器被賦予了html的背景色

而在我看來，實際是我們設置的body背景色[生效了]，但因body默認高度為0，所以在頁面中并沒有粉色區塊顯示，那我們嘗試在body中添加一些內容

可以看出，body的高度被撐開，而body的背景色則是實實在在只給了body

所以我們可以得出一個結論

瀏覽器會“吸收”html與body的背景色

當只設置了body背景色時，瀏覽器發現了，于是把這個背景色“占為己有”

而如果html設置了背景色，瀏覽器則會認為html離我更近，所以會“拿走”html的背景色當成自己的顏色

當然，到現在為止，我們實驗的都是純色背景，那如果我們設置成漸變色，還是相同的結果嗎？

疑問產生，開始實驗

首先，只設置body的背景為線性漸變粉色pink到白色#fff，預想結果應該是和背景一樣，直接瀏覽器從上往下的漸變

body {
    background: linear-gradient(pink, #fff);
}

嗯？這怎么和預想不一樣，再放大頁面看一下漸變，就可以發現每個漸變的高度和html的高度是一致的，而html的高度則是body的默認margin撐開

于是開始設置

* {
    margin: 0;
    padding: 0;
}

同樣，如果漸變給html設置的，也不會作用到瀏覽器上

說明瀏覽器并不會把漸變色據為己有，那如果想要設置全屏漸變，就需要用到我們文章開頭說到的

html, body { height: 100%; }

你曉得了吧！！！

CSS table表格 thead固定 tbody滾動效果

由于項目需要，在表格中，當數據量越來越多時，就會出現滾動條，而在滾動的過程中，默認情況下表格頭部會跟著表格內容一起滾動，導致看不到頭部對應的字段名，影響體驗效果！

實現思路：

將內容要滾動的區域控制在 tbody 標簽中添加 overflow-y: auto; 樣式，給 tr 標簽添加 table-layout:fixed; (這是核心)樣式，由于 tbody 有了滾動條后，滾動條也要占位，又會導致 tbody 和 thead 不對齊，所以在設置 tbody 的寬度時要把滾動條的寬度也加上【如果不想顯示滾動條的話，可以把滾動條的寬度設置為0px，滾動條就沒有了。

下面是效果圖，具體完整實例代碼也在下面：

完整實例代碼：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>純CSS table表格 thead固定 tbody滾動</title>
    <style>
        .table-box {
            margin: 100px auto;
            width: 1024px;
        }
 
        /* 滾動條寬度 */
        ::-webkit-scrollbar {
            width: 8px;
            background-color: transparent;
        }
 
        /* 滾動條顏色 */
        ::-webkit-scrollbar-thumb {
            background-color: #27314d;
        }
 
        table {
            width: 100%;
            border-spacing: 0px;
            border-collapse: collapse;
        }
 
        table caption{
            font-weight: bold;
            font-size: 24px;
            line-height: 50px;
        }
 
        table th, table td {
            height: 50px;
            text-align: center;
            border: 1px solid gray;
        }
 
        table thead {
            color: white;
            background-color: #38F;
        }
 
        table tbody {
            display: block;
            width: calc(100% + 8px); /*這里的8px是滾動條的寬度*/
            height: 300px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
 
        table tfoot {
            background-color: #71ea71;
        }
 
        table thead tr, table tbody tr, table tfoot tr {
            box-sizing: border-box;
            table-layout: fixed;
            display: table;
            width: 100%;
        }
 
        table tbody tr:nth-of-type(odd) {
            background: #EEE;
        }
 
        table tbody tr:nth-of-type(even) {
            background: #FFF;
        }
 
        table tbody tr td{
            border-bottom: none;
        }
 
    </style>
</head>
 
<body>
    <section class="table-box">
        <table cellpadding="0" cellspacing="0">
            <caption>純CSS table表格 thead固定 tbody滾動</caption>
            
            <thead>
                <tr>
                    <th>序 號</th>
                    <th>姓 名</th>
                    <th>年 齡</th>
                    <th>性 別</th>
                    <th>手 機</th>
                </tr>
            </thead>
 
            <tbody>
                <tr>
                    <td>001</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>005</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>006</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>007</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>008</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
            </tbody>
 
            <tfoot>
                <tr>
                    <td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
                </tr>
            </tfoot>
        </table>
    </section>
</body>
 
</html>

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

原文鏈接：https://blog.csdn.net/muguli2008/article/details/103787152

ext-decoration屬性介紹#

text-decoration屬性是用來設置文本修飾線呢，text-decoration屬性一共有4個值。

text-decoration屬性值說明表#

值作用none去掉文本修飾線underline設置下劃線overline設置上劃線line-through設置刪除線

HTML標簽自帶修飾線#

在開始實踐text-decoration屬性之前，筆者先給大家普及下HTML中的標簽自帶修飾線如：u標簽、s標簽，若有不全大家可以在下面評論中告訴筆者,畢竟筆者也是前端的一個小白,希望和大家相互交流，互幫互助，共同進步。

u標簽#

下面讓我們進入u標簽的實踐，u標簽自帶的是文本下劃線。
代碼塊

Copy<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>設置文本修飾線</title>
 
</head>
<body>
 <u>成功不是擊敗別人，而是改變自己</u>
</body>
</html>

結果圖

在線咨詢

上一篇：CSS基礎-初識CSS
下一篇：通過python的正則表達式re模塊匹配出html標

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。