CSS面经（未完待续）_代码007(未授权)

本文介绍: 重排(回流)：当增加或删除 dom 节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造 dom树，然后再次渲染。重绘：计算好盒模型的位置，大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制。浏览器的渲染机制：当dom的大小，位置发生改变时进行重排，当dom的样式如改变时进行重绘。网格布局笔记：网格布局表格布局可以看下面代码：结果如下：：独占一行，宽度继承至父盒子，多个元素会另起一行，可设置宽高以及和属性。：元素不会独占一行，宽度、高度由内容撑开，不可设置宽高，但可以设置水平方向的和。：行内

!important > 行内样式 > id选择器 > 类/伪类/属性选择器 > 标签/伪元素选择器 > 子/后台选择器 > *通配符

重排(回流)：当增加或删除dom 节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造 dom树，然后再次渲染。

重绘：计算好盒模型的位置，大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制。

浏览器的渲染机制：当dom的大小，位置发生改变时进行重排，当dom的样式如color、background-color改变时进行重绘。

属性值	作用
none	元素不显示，并且会从文档流中移除
block	块类型，默认宽度为父元素宽度，可设置宽高，换行显示
inline	行内元素类型，默认宽度为内容宽度，不可设置宽高，同行显示
inline–block	默认宽度为内容宽度，可设置宽高，同行显示
table	此元素会作为块级表格来显示，子元素可设置`display:table-row、table-cell`等
flex	flex 布局
grid	网格布局
in he rit	规定应该从父元素继承 di s play 属性的值

网格布局笔记：网格布局

表格布局可以看下面代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .table {
            display: table;  /* 表格 */
            width: 800px;
            height: 500px;
            margin: 20px auto;
			border: 3px solid #000;
        }
        .row {
            display: table-row;  /* 表格行 */
        }
        .cell {
            display: table-cell;    /* 表格单元 */
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="table">
        <div class="row">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
        </div>
        <div class="row">
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
        </div>
    </div>
</body>

</html>