一、CSS修饰表格

1.1、CSS表格属性

（1）边框

通过【border】属性设置表格的边框，边框设置时候，一般会给：【table、th、td】设置边框。

table标签设置边框。

给table标签设置边框，是设置的表格最外层的边框，如下所示：

th标签设置边框，td标签设置边框。。

th、td标签设置边框，这个时候会将每一个th、td标签添加边框，并且每个th、td标签边框直接存在间隙，如下所示：

当给【table、th、td】边框同时设置边框，效果如下所示：

【border-collspse】属性调整边框间距。

上面表格的边框之间存在间距，非常不好看，CSS可以通过【border-collapse】属性取消边框的间距，只要属性取值：【collapse】即可。

<style>
    table {
         border-collapse: collapse;
    }
</style>

效果如下所示：

（2）宽度和高度

通过给【table、th、tr、td】标签设置宽度、高度。table设置整个表格的宽度、高度；th设置表头的宽度、高度；tr设置一行的宽度、高度；td设置单元格的宽度、高度。

（3）对齐方式

文本水平方向对齐方式：【text-align】属性，取值：left、center、right。

文本垂直方向对齐方式：【vertical-align】属性，取值：top、middle、bottom。

二、CSS修饰表单

2.1、CSS表单

运行效果：

案例代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        form {
            width: 600px;
            padding: 20px;
            margin: 50px;
            border: 3px solid blue;
            border-radius: 15px;
        }

        form>label {
            display: block;
            margin-bottom: 20px;
        }

        form>label>span {
            display: inline-block;
            width: 95px;
            text-align: right;
        }

        form>label>input {
            padding: 5px 10px;
        }

        form>input[type=button],
        form>input[type=reset] {
            width: 130px;
            height: 30px;
            font-size: 16px;
            cursor: pointer;
            color: #fff;
            border: none;
        }
        form > input[type=button] {
            background-color: lightgreen;
        }
        form > input[type=reset] {
            background-color: orange;
        }
    </style>
</head>

<body>
    <form action="#">
        <label>
            <span>姓名: </span>
            <input type="text">
        </label>
        <label>
            <span>年龄: </span>
            <input type="text">
        </label>
        <label>
            <span>手机号: </span>
            <input type="text">
        </label>
        <label>
            <span>QQ: </span>
            <input type="text">
        </label>
        <input type="button" value="确定提交">
        <input type="reset" value="垂直">
    </form>
</body>

</html>

三、CSS重排和重绘

3.1、HTML渲染过程

浏览器在渲染一个HTML页面的时候，首先浏览器会获取到HTML使用标签，并且将这些标签组成一个HTML标签树，这个时候这些标签还没有样式，浏览器又会解析CSS文件，产生一个CSS样式树，接着浏览器将HTML标签树和CSS样式树进行对比组合，将样式和标签组合成一个render渲染树，最终浏览器根据render渲染树，开始一点一点的渲染出页面效果。