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小时内与您取得联系。