整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在Linux系统中，tree命令是一个非常实用的工具，它能够以树状图的形式列出目录及其子目录的内容，使得目录结构一目了然。然而，并非所有的Linux发行版都默认安装了tree命令。本文将介绍如何在没有预装tree命令的Linux系统上安装它，并详细阐述其使用方法。
在基于Debian的Linux发行版上，你可以使用apt包管理器来安装tree。打开终端并输入以下命令：
sudo apt update
sudo apt install tree首先，apt update命令会更新软件包列表，确保你安装的是最新版本的软件包。然后，apt install tree命令会安装tree软件包。
在基于RPM的Linux发行版上，你可以使用yum（在较旧的CentOS版本中）或dnf（在Fedora和较新版本的CentOS中）来安装tree。
对于使用yum的系统：
sudo yum install tree对于使用dnf的系统：
sudo dnf install tree在Arch Linux上，你可以使用pacman包管理器来安装tree：
sudo pacman -S tree如果上述方法都不适用，或者你倾向于从源代码编译安装，你可以访问tree的官方网站或其他可靠的源代码仓库下载最新的源代码包。解压后，按照README文件中的说明进行编译和安装。不过，这种方法相对复杂，且通常不是必要的，除非你需要安装特定版本的tree或有其他特殊需求。
安装完tree命令后，你就可以开始使用它了。以下是一些基本用法示例：
只需在终端中输入tree（不带任何参数），它将列出当前目录及其所有子目录和文件的树状结构。
tree如果你只想查看前几层的目录结构，可以使用-L选项来限制目录的深度。例如，要查看当前目录及其直接子目录的结构，可以使用：
tree -L 2如果你只对目录结构感兴趣，而不关心文件，可以使用-d选项来只显示目录。
tree -d使用-h选项（人类可读的格式），tree将显示每个文件和目录的大小。
tree -h有时，你可能想忽略某些特定的文件或目录。tree命令提供了-I选项来实现这一点。例如，要忽略所有.txt文件和名为temp的目录，可以这样做：
tree -I '*.txt|temp'注意：在某些shell中，你可能需要使用引号或转义字符来正确传递模式。
tree命令还有许多其他选项，可以通过阅读其手册页（man tree）来了解更多信息。手册页详细描述了每个选项的作用和用法，是学习和掌握tree命令的好资源。
--help Outputs a verbose usage listing.
--version Outputs the version of tree.
-a All files are printed. By default, tree does not print hidden files (those beginning with a dot `.'). In no event does tree print the file system constructs `.' (current directory) and `..' (previous directory).
-d List directories only.
-f Prints the full path prefix for each file.
-i Tree does not print the indentation lines. Useful when used in conjunction with the -f option.
-l Follows symbolic links to directories as if they were directories. Links that would result in a recursive loop are avoided.
-x Stay on the current file system only, as with find -xdev.
-P pattern List only those files that match the wildcard pattern. Note: you must use the -a option to also consider those files beginning with a dot `.' for matching. Valid wildcard operators are `*' (any zero or more characters), `?' (any single character), `[...]' (any single character listed between brackets (optional - (dash) for character range may be used: ex: [A-Z]), and `[^...]' (any single character not listed in brackets) and `|' separates alternate patterns.
-I pattern Do not list those files that match the wildcard pattern.
--prune Makes tree prune empty directories from the output, useful when used in conjunction with -P or -I.
--filelimit # Do not descend directories that contain more than # entries.
--timefmt format Prints (implies -D) and formats the date according to the format string which uses the strftime syntax.
--noreport Omits printing of the file and directory report at the end of the tree listing.
-p Print the protections for each file (as per ls -l).
-s Print the size of each file with the name.
-u Print the username, or UID # if no username is available, of the file.
-g Print the group name, or GID # if no group name is available, of the file.
-D Print the date of the last modification time for the file listed.
--inodes Prints the inode number of the file or directory
--device Prints the device number to which the file or directory belongs
-F Append a `/' for directories, a `=' for socket files, a `*' for executable files and a `|' for FIFO's, as per ls -F
-q Print non-printable characters in file names as question marks instead of the default carrot notation.
-N Print non-printable characters as is instead of the default carrot notation.
-r Sort the output in reverse alphabetic order.
-t Sort the output by last modification time instead of alphabetically.
--dirsfirst List directories before files.
-n Turn colorization off always, overridden by the -C option.
-C Turn colorization on always, using built-in color defaults if the LS_COLORS environment variable is not set. Useful to colorize output to a pipe.
-A Turn on ANSI line graphics hack when printing the indentation lines.
-S Turn on ASCII line graphics (useful when using linux console mode fonts). This option is now equivalent to `--charset=IBM437' and eventually is depreciated.
-L level Max display depth of the directory tree.
-R Recursively cross down the tree each level directories (see -L option), and at each of them execute tree again adding `-o 00Tree.html' as a new option.
-H baseHREF Turn on HTML output, including HTTP references. Useful for ftp sites. baseHREF gives the base ftp location when using HTML output. That is, the local directory may be `/local/ftp/pub', but it must be referenced as `ftp://host-name.organization.domain/pub' (baseHREF should be `ftp://hostname.organization.domain'). Hint: don't use ANSI lines with this option, and don't give more than one directory in the directory list. If you want to use colors via CSS stylesheet, use the -C option in addition to this option to force color output.
-T title Sets the title and H1 header string in HTML output mode.
--charset charset Set the character set to use when outputting HTML and for line drawing.
--nolinks Turns off hyperlinks in HTML output.
-o file name Send output to file name.tree命令是Linux系统中一个非常有用的工具，它以直观的方式展示了目录结构。通过本文，你应该已经学会了如何在不同的Linux发行版上安装tree命令，并掌握了其基本的使用方法。现在，你可以利用tree命令来更高效地浏览和管理你的文件系统了。
现Tree树的插件很多，比如常见的UI：Layui、ElementUI、iView ... 。这里我们介绍一个小巧的构建Tree树的插件 zTree.js
zTree.js 官网API介绍的灰常详细了，这里我们实战使用zTree.js构建一棵Tree树。
<!--more-->
写在前面 下列文章中讲述的实例，需要使用的后端数据是已经查询好的，这里我们不讲怎么查询数据，只讲如何使用现有的数据构建Tree树，详细的教程请查看我的 GitHub， 如果你觉得写得好，欢迎star呀！！
使用zTree.js首先需要导入zTree的依赖库文件，传送门。
由于我使用了基于boostrap主题的zTree，所以还是建议大家去我的GitHub项目地址下载（CSS是修改过的），传送门：GitHub
页面中需要引入如下依赖库文件：
<link rel="stylesheet" href="static/lib/bootstrap.min.css"/> <link rel="stylesheet" href="static/lib/css/demo.css"/> <link rel="stylesheet" href="static/lib/css/metroStyle/metroStyle.css"/> <script type="text/javascript" src="static/lib/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="static/lib/jquery.ztree.core.min.js"></script> <script type="text/javascript" src="static/lib/jquery.ztree.excheck.min.js"></script>
<!--more-->
查阅zTree.js官网API，构建一棵Tree树很简单：
一、前端初始化一个div，用来展示Tree树
zTree构建的Tree树是用iframe嵌套的，所以不用担心宽度、高度的问题
<div class="zTreeDemoBackground"> <ul id="tree" class="ztree"></ul> </div>
初始化的div只需要关注id属性即可，因为JS中会根据这个ID找到构建Tree树的位置。
二、javaScript加载Tree树
为了真实点构建Tree树，我这里用一个json文件来模拟请求后端的数据。在同级目录下创建data.json，在其中写入指定格式的JSON字符串：
[{ "id": 21,
"name": "总经理",
"pid": 0,
"parent": true
}, {"id": 26,
"name": "技术部",
"pid": 0,
"parent": true
}, {
"id": 27,
"name": "项目经理",
"pid": 26,
"parent": false
}, {"id": 28,
"name": "项目组组长",
"pid": 26,
"parent": false
}, {
"id": 29,
"name": "安全部",
"pid": 0,
"parent": true
}, {"id": 30,
"name": "网络安全部负责人",
"pid": 29,
"parent": false
}, {
"id": 31,
"name": "项目安全测试员",
"pid": 29,
"parent": false
}]
然后，写JavaScript代码：
var setting = {
view: {
selectedMulti: true
},
check: {
enable: true,
},
data: {
simpleData: {
enable: true,//是否采用简单数据模式
idKey: "id",//树节点ID名称
pIdKey: "pid",//父节点ID名称
rootPId: -1,//根节点ID
}
}
};
$(function () {
//加载后端构建的ZTree树（节点的数据格式已在后端格式化好了）
$.ajax({
url: 'data.json',
type: 'get',
dataType: "json",
success: (data) => {
console.log(data);
$.fn.zTree.init($("#tree"), setting, data);//初始化树节点时，添加同步获取的数据
},
error: (data) => {
alert(data.message);
}
});
});
解释
以上参数配置，大家最好去参看zTree.js官网API。
如果配置好了setting，那下面就要ajax请求数据并渲染出来。如上在ajax的success回调函数中使用$.fn.zTree.init($("#treeID"),setting,data)渲染树节点，其中第一个参数：树要渲染的位置、第二个参数：刚才写的setting配置，第三个参数：要加载的数据。
如上，我们先看下效果：
其中我们最该关心的是如何实现节点的渲染，说白了就是要弄明白怎样的数据结构zTree才能渲染出一棵树。
Tree树数据结构分析
首先，zTree渲染节点需要的数据一定是JSON格式的数据，且JSON数据的格式和simpleData配置参数有关；想要使用ajax这种方式渲染节点，你必须开启enable: true，其次idKey是树节点ID名称，也就是说树的每个节点都有一个id，我们在这里要指定被渲染的数据中展示id的名称；其次要指定pIdKey，因为你的节点不会都是平级的没有子节点，当需要子节点，就必须指定一个区分父子节点的ID名称；最后就是rootPId表示根节点ID，即最上层的节点ID，一般写为-1即可。
此时，你或许应该参考一下我这篇文章：Shiro实现权限管理之表结构设计 ，表结构的设计和tree树的构建也算是有一部分的关系吧。
如果你的simpleData是这样配置的：
simpleData: {
enable: true,//是否采用简单数据模式
idKey: "id",//树节点ID名称
pIdKey: "pid",//父节点ID名称
rootPId: -1,//根节点ID
}
那么你就应该提供这样的JSON数据：
[{"id": "xx", "pid": "xx", "pid": "xx"},{"id": "xx",....},{....}]
只要名称和JSON数据中对应就行，不然无法渲染出节点。
如何实现默认选中
实现默认选中，就是在初始化树的时候，将（用户）已拥有的节点选项选中。要知道所有的节点数据应该是从数据库中读取出出来的，例如这篇博文 权限管理系统数据库表设计 中用户都可能拥有一个角色，那么在遍历角色树的时候就应该默认选中一些节点表述用户已经拥有了这个节点角色。
简单一句话：遍历需要默认选中的节点数据（ID..），调用zTree.js相关的方法根据（ID）实现默认选中。
首先我们需要了解：
| 函数 | 用处 | | -- | -- | | $.fn.zTree.getZTreeObj('') | 获取zTree对象，根据div中指定的ID获取此渲染的ZTree对象，下面的方法都用到此对象调用 | | zTree.selectNode(treeNode,addFlag,isSilent) | 根据上面获取的zTree对象调用selectNode，参数一：要选中的节点数据；参数二：是否允许同时选中多个节点；参数三：为false选中节点自动滚动到可视区域，实现选中子节点的父节点默认展开 | | zTree.checkNode(treeNode,checked,checkTypeFlag,callbackFlag) | selectNode只实现选择了节点，checkNode实现勾选节点，参数二：是否勾选节点；参数三：勾选父节点是否联动勾选其下的子节点；参数四：是否自动触发beforeCheck & onCkeck 回调函数 | | zTree.getNodeByParam(key,value,parentNode) | 获取完全匹配节点数据的JSON对象，参数一：要精确匹配的属性名称；参数二：要精确匹配的属性值；参数三：在某个父节点下查找 |
用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/lib/bootstrap.min.css">
<link rel="stylesheet" href="static/lib/css/metroStyle/metroStyle.css">
<link rel="stylesheet" href="static/lib/css/demo.css">
</head>
<body>
<div class="zTreeDemoBackground">
<ul id="tree" class="ztree"></ul>
</div>
</body>
<script type="text/javascript" src="static/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="static/lib/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="static/lib/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript">
var setting = {
view: {
selectedMulti: false
},
check: {
enable: true,
},
data: {
simpleData: {
enable: true,//是否采用简单数据模式
idKey: "id",//树节点ID名称
pIdKey: "pid",//父节点ID名称
rootPId: -1,//根节点ID
}
}
};
$(function () {
//加载后端构建的ZTree树（节点的数据格式已在后端格式化好了）
$.ajax({
url: 'data.json',
type: 'get',
dataType: "json",
success: (data) => {
console.log(data);
$.fn.zTree.init($("#tree"), setting, data);//初始化树节点时，添加同步获取的数据
checkNodes();
},
error: (data) => {
alert(data.message);
}
});
});
//处理默认选中的方法
function checkNodes(){
//模拟数据库中已存在的数据（要实现默认选中的数据）
var data = [{"id": 21, "name": "总经理", "pid": 0},{"id":'27', "name": "项目经理", "pid": 26}];
var zTree = $.fn.zTree.getZTreeObj("tree"); //获取zTree对象
data.forEach(row => {
zTree.selectNode(zTree.getNodeByParam("id", row.id), true, false);
zTree.checkNode(zTree.getNodeByParam("id", row.id), true, false);
});
}
</script>
</html>
如上，实现默认选中，在初始化树后立即调用处理默认选中的方法即可。我们模拟默认选中的数据中包含了id和name以及pid，这些都是比较基础的数据，ztree的selectNode和checkNode方法都是根据id实现选中的， 默认选中要提供的数据和渲染树用的格式是相同的。其中:
如何获取选中的节点
获取选中的节点，只需要了解zTree.getCheckedNodes()，用来获取选中节点数据的JSON对象。其中获取到的选中节点数据包含一定顺序：选中父节点永远在选中子节点的最前面。
如果想要在提交表单的时候，将选中节点的值传给后台，就可以使用getCheckedNodes()方法获取到选中节点数据，然后遍历得到各个选中节点的数据。
如何实现单选
实现单选，只需要在setting的check中配置chkStyle: "radio"即可实现单选，但是，此时实现的单选只在同级节点上才能实现单选，也就是说你在同级节点上只能单选，但是在你可以同时选中子节点和父节点。
那么，在你调用getCheckedNodes()方法获取选中节点数据时，其中也包含了选中的父节点，因为父节点可能只是个分组不一定要存入到数据库中；那么此时你就要判断下如果选中的节点的长度>0，那么就取索引位置的最后一个值；
<!--more-->
上面我们将的都是前端如何将JSON数据渲染成一棵Tree树，但是渲染用的数据应该是冲数据库中读取的。下面我们应该学习一下后端如何实现封装Tree树用的JSON数据。
我们使用SpringMVC作为与后端交互的Web层框架，关于SpringMVC + Spring + Mybatis 框架的整合，大家可以参看我的这个项目 SSM框架整合
封装实体类
想必大家一定知道@ResponseBody这个注解，如果方法或类上添加了这个注解，那么@RequestMapping()映射return的东西将不再是InternalResourcecViewResolver视图解析器解析的视图地址，而是JSON格式的数据。 那么想要让SpringMVC相应一串[{"id": "xx", "name": "", "xx"},{"id": "xx", "name": "xx"}]这种格式的数据，我们就必须手动将数据封装成这种格式，如此SpringMVC才能将对象转换成JSON串。
我们会想到，我们可以将从数据库中读取的数据，依次存入到Map（或List）集合中，然后return map。当然，这是可行的，但是或许麻烦了些，因为整个项目中不止要构建一棵Tree树，每次都要new Map重用率就太低了。所以，一个简单的方式，就是手动创建一个实体类TreeEntity.java用以存放从数据库中读取到的数据，这样每次构建Tree树都能使用这个实体类对象。
TreeEntity.java属性如下：
public class TreeEntity implements Serializable {
private Long id; //节点的id值
private String name; //节点的名称
private Boolean isParent; //是否是父节点
private Long pid; //当前节点对应父节点的id值
public TreeEntity(Long id, String name, Boolean isParent, Long pid){
this.id = id;
this.name = name;
this.isParent = isParent;
this.pid = pid;
}
getter/setter ....
}
如上，你会发现，这是不是和我们前面说的前端构建Tree树的结构是一样的呢。没错，我们前端既然定义了这种格式，后端就必须要给它一个这样格式的数据。
Web层封装Tree数据结构
这里不再讲Dao层中如何查询的数据，我们仅以一个最简单的查询（findAll查询所有）来讲述Tree的数据结构封装。
先看代码：
@ResponseBody
@RequestMapping("/getZTreeForUserRoles")
public List<TreeEntity> getTreeForUserRoles() {
try {
List<TreeEntity> treeList = new ArrayList<TreeEntity>();
List<Role> roleList = roleService.findAll();
for (Role role : roleList) {
// 为tree树节点添加数据，节点pid为0的都是父节点，其他为子节点
if(role.getPid() != null){
if (role.getPid() == 0) {
treeList.add(new TreeEntity(role.getId(), role.getDescription(), true, (long) 0));
} else {
treeList.add(new TreeEntity(role.getId(), role.getDescription(), false, role.getPid()));
}
}
}
return treeList;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
解释
我们来看一下这个请求映射返回的数据格式是如何的：
如上，我们已经实现了目的。
拓展
上面的代码中还要说明的就是调用TreeEntity的带参构造函数传入的参数值。我们定义的带参构造函数如下：
public TreeEntity(Long id, String name, Boolean isParent, Long pid) {
this.id = id;
this.name = name;
this.isParent = isParent;
this.pid = pid;
}
在为List<TreeEntity>集合循环添加值时，要弄清楚：
节点的id是每个节点的唯一标识，就像数据库的主键值一样，所以我们通常将其设置为数据库中的主键值。并且以后也要获取这个主键值。
节点的名称name是前端展示的各个节点的名称。而这些名称应该和数据库中的值是相同的，所以我们将其设置为数据库的description的值。
父节点，我们在数据库中已经定义了，即数据库中存在一个字段pid，这个字段表示的是上级节点的id值，即如果存在上级节点（或叫上级分组），那么就给此row的pid字段设置为上级row的主键id值。
根据构造方法中的isParent字段，如果是父节点就直接手动设置为true，否则就设置为false。 如何判断是父节点？根据数据库（实体类）中已有的属性值pid判断，如果pid不为0就表示是子节点，如果pid是0就是父节点（因为主键值不可能为0）。
言
对于项目，那就是我们的亲儿子啊，作为一个前端菜鸟，面向用户就是将自己的儿子介绍给别人认识，肯定要让他白白净净，漂漂亮亮的啦，给别人一眼就喜欢上的感觉咯，哈哈哈~
常在河边走，哪有不湿鞋，在我们编程的工程中，尤其是前端的同学，肯定少不了跟Css打交道，命名、缩写、书写顺序等都是有一定规范，这个规范可能来源于你、我、或者浏览器等不定向人群（这个规范是我瞎编的），今天自己整合收集，以及个人项目用到的html+css的书写规范送给在"编程界"奋斗的小伙伴，你 不是一个人在战斗。
话不多说，锅烧空气，锅热放油，放入写好的html+css炸一遍，捞出，控油，裹上鸡蛋液，粘上面包糠，再炸，隔壁小孩都馋哭了，不好吃你来打我。
一 命名规则说明
1、所有的命名最好都小写
2、属性的值一定要用双引号("")括起来，且一定要有值如class="app",id="app"
3、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整例如：<div></div>
4、空元素要有结束的tag或于开始的tag后加上"/" <br />、<img />
5、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
6、<h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询,因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
7、给每一个表格和表单加上一个唯一的、结构标记id
8、给图片加上alt标签,alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器。
9、尽量使用英文命名原则
10、尽量不缩写，除非一看就明白的单词如btn。
11、命名方式(BEM)：类-体（例：g-head）、类-体-修饰符（例：u-btn-active）。
12、scss中的变量、函数、混合、placeholder采用驼峰式命名
13、后代选择器：体-修饰符即可（例：.m-page .cut{}）注：后代选择器不要在页面布局中使用，因为污染的可能性较大；
14、减少id命名，id在JS是唯一的，不能多次使用，id的优先级优先与class，所以id应该按需使用，而不能滥用。
二 网页外层重要部分CSS样式命名
wrap ------------------ 用于最外层 header ---------------- 用于头部 main ------------------ 用于主体内容（中部） main-left ------------- 左侧布局 main-right ------------ 右侧布局 nav ------------------- 网页菜单导航条 content --------------- 用于网页中部主体 footer ---------------- 用于底部
三 样式属性顺序
1. 定位：positionz-indexleftrighttopbottomclip等。
2. 自身属性：widthheightmin-heightmax-heightmin-widthmax-width等。
3. 文字样式：colorfont-sizeletter-spacing, colortext-align等。
4. 背景：background-imageborder等。
5.文本属性: text-alignvertical-aligntext-wraptext-transformtext-indenttext-decoration letter-spacingword-spacingwhite-spacetext-overflow等。
6. css3中属性：content、box-shadow、animation、border-radius、transform等
/* yes */
.example {
z-index: -1;
display: inline-block;
font-size: 16px;
color: red;
background-color: #eee;
}
/* no */
.example {
color: red;
background-color: #eee;
display: inline-block;
z-index: -1;
font-size: 16px;
}
目的：减少浏览器reflow(回流)，提升浏览器渲染dom的性能。
关注我的头条号，分享更多的技术学习文章，我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
文档加载完成到完全显示之间浏览器的渲染流程为：
1）浏览器解析html构建dom树，解析css构建cssom树即css rule tree：将html和css都解析成树形的数据结构；dom树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。2）构建render树：DOM树和cssom树合并之后形成render树。为了构建渲染树，浏览器大体完成了下列工作：从DOM树的根节点开始遍历每个可见节点。对于每个可见节点，为其找到适配的CSSOM规则并应用它们。发射可见节点，连同其内容和计算的样式。渲染树中包含了屏幕上所有可见内容及其样式信息。3）布局render树：有了render树，浏览器已经知道网页中有哪些节点，各个节点的css定义以及它们的从属关系，接着就开始布局，计算出每个节点在屏幕中的位置和大小。(html采用了一种流式布局的布局模型，从上到下，从左到右顺序布局，布局的起点是从render树的根节点开始的，对应dom树的document节点，其初始位置为(0,0)，详细的布局过程为：每个renderer的宽度由父节点的renderer确定。父节点遍历子节点，确定子节点的位置(x,y)，调用子节点的layout方法确定其高度，父节点根据子节点的height, margin, padding确定自身的高度)。4）渲染，绘制render树：浏览器已经知道啦哪些节点要显示，每个节点的css属性是什么，每个节点在屏幕中的位置是哪里。就进入啦最后一步，按照计算出来的规则，通过显卡把内容画在屏幕上。浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序按照dom树的结构分布render样式，完成第（2）步，然后开始遍历每个树节点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的的书写顺序，在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染。例如css样式：{width: 100px; height: 100px; background-color: red; position: absolute;}当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到回流的影响而重新排位，最终导致（3）步骤花费时间太久而影响到（4）步骤的显示，影响了用户体验。
注：render树的结构不等同于DOM树的结构，一些设置display:none的节点不会被放在render树中，但会在dom树中。
有些情况，比如修改了元素的样式，浏览器并不会立刻回流(reflow)或重绘(repaint)，而是把这些操作积攒一批，然后做一次reflow，这也叫做异步reflow。但是在有些情况下，比如改变窗口大小，改变页面默认字体等浏览器会马上进行reflow。为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现在屏幕上，并不会等到所有html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在网络上下载其余内容。
四 css样式书写规范
使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
去掉小数点前的“0”
简写命名(前提是要让人看懂你的命名才能简写哦)
16进制颜色代码缩写
连字符CSS选择器命名规范
1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器，为什么呢？
功能
状态
注释的写法
/* Header */ 内容区 /* End Header */
id的命名
1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center(2)导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
CSS样式表文件命名
主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
五 HTML5-语义化
距HTML5标准规范制定完成并公开发布已经有好些年了，但是多数公司还是用的不是很多，可能一部分原因是部分用户在使用低版本浏览器吧。
什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。
语义化优点：
1、header
<header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer>或 <header>元素的子元素。
2、nav
<nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。在一个文档中，可定义多个元素。
3、main
<main>定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。需要注意的是在一个文档中不能出现多个<main>标签。
4、article
<article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的元素可嵌套在代表博客文章的元素中。
5、aside
<aside>元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
6、footer
<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。使用footer插入联系信息时，应在 footer 元素内使用 元素。注意不能包含<footer>或者<header>
7、section
<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。
如果元素内容可以分为几个部分的话，应该使用 <article>而不是 <section>。不要把 <section>元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。
*请认真填写需求信息，我们会在24小时内与您取得联系。
