整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在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命令，并掌握了其基本的使用方法?，F在，你可以利用tree命令來更高效地瀏覽和管理你的文件系統了。
現Tree樹的插件很多，比如常見的UI：Layui、ElementUI、iView ... 。這里我們介紹一個小巧的構建Tree樹的插件 zTree.js
zTree.js 官網API介紹的灰常詳細了，這里我們實戰使用zTree.js構建一棵Tree樹。
<!--more-->
寫在前面 下列文章中講述的實例，需要使用的后端數據是已經查詢好的，這里我們不講怎么查詢數據，只講如何使用現有的數據構建Tree樹，詳細的教程請查看我的 GitHub， 如果你覺得寫得好，歡迎star呀?。?/p>
使用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小時內與您取得聯系。
