使用function關(guān)鍵字定義函數(shù)
函數(shù)聲明會被提升（Hoisting），將聲明移動到當(dāng)前作用域頂端的默認(rèn)行為。
參數(shù)：
如果函數(shù)調(diào)用的參數(shù)太多（超過聲明），則可以使用函數(shù)的內(nèi)置對象arguments
arguments.length 會返回函數(shù)被調(diào)用時收到的參數(shù)數(shù)目
arguments[index]可以得到相應(yīng)的參數(shù)
傳遞對象的時候是使用引用來傳遞的，如果函數(shù)修改了對象屬性，則原始對象也改變了。
調(diào)用：
以函數(shù)形式調(diào)用函數(shù)：（這種方式調(diào)用默認(rèn)的是全局對象調(diào)用）
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2);
作為方法來調(diào)用函數(shù)：（這種方式調(diào)用屬于函數(shù)的擁有者myObject）
var myObject = {
firstName:"Bill",
lastName: "Gates",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName();
通過函數(shù)構(gòu)造器來調(diào)用函數(shù)：（如果函數(shù)調(diào)用的前面是 new 關(guān)鍵字，那么這是一個構(gòu)造函數(shù)調(diào)用）
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("Bill", "Gates");
x.firstName;
call()和apply()方法：
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates",
}
var person2 = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
call() 方法是預(yù)定義的 JavaScript 方法。
它可以用來調(diào)用所有者對象作為參數(shù)的方法。
通過 call()，您能夠使用屬于另一個對象的方法。
如：
person.fullName.call(person1)// person1來調(diào)用person的fullName方法
call()可以帶參數(shù),參數(shù)對應(yīng)按順序的傳給方法
person2.fullName.call(person1,"Seattle", "USA")
apply()方法和call()方法類似
區(qū)別在于接收參數(shù)的方式不一樣。
call(obj,"x","y") 方法分別接受參數(shù)
apply(obj,["x","y"]) 方法接收數(shù)組形式的參數(shù)
箭頭函數(shù)：（ES6）
箭頭函數(shù)不需要function關(guān)鍵字、return關(guān)鍵字和大括號
var x = function(x, y) {
return x y;
}
var x = (x, y) => x y;
兩個的作用相同。
箭頭函數(shù)沒有自己的this、如果函數(shù)是單個語句，則只能省略 return 關(guān)鍵字和大括號
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
User表：
User類：
package pers.zhang.domain;
public class User {
private Long user_id;
private String user_code;
private String user_name;
private String user_password;
private String user_state;
public Long getUser_id() {
return user_id;
}
public void setUser_id(Long user_id) {
this.user_id = user_id;
}
public String getUser_code() {
return user_code;
}
public void setUser_code(String user_code) {
this.user_code = user_code;
}
public String getUser_name() {
return user_name;
}
public void setUser_name(String user_name) {
this.user_name = user_name;
}
public String getUser_password() {
return user_password;
}
public void setUser_password(String user_password) {
this.user_password = user_password;
}
public String getUser_state() {
return user_state;
}
public void setUser_state(String user_state) {
this.user_state = user_state;
}
}
ORM元數(shù)據(jù)：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC
"-//Hibernate/Hibernate Mapping DTD 3.0//EN"
";
<hibernate-mapping package="pers.zhang.domain" >
<class name="User" table="sys_user" >
<id name="user_id" >
<generator class="identity"></generator>
</id>
<property name="user_code" column="user_code" ></property>
<property name="user_name" column="user_name" ></property>
<property name="user_password" column="user_password" ></property>
<property name="user_state" column="user_state" ></property>
</class>
</hibernate-mapping>
控制層：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//獲得查詢參數(shù)
String userIdStr = request.getParameter("userId");
String userName = request.getParameter("userName");
//獲得離線查詢對象
DetachedCriteria detachedCriteria = DetachedCriteria.forClass(User.class);
//拼裝查詢條件
if(userIdStr != null && !"".equals(userIdStr)) {
Long userId = (long) Integer.parseInt(userIdStr);
detachedCriteria.add(Restrictions.eq("user_id", userId));
}
if(userName != null && !"".equals(userName)) {
detachedCriteria.add(Restrictions.like("user_name", userName, MatchMode.ANYWHERE));
}
//作為參數(shù)傳遞給service層
UserService userService = new UserService();
List<User> list = userService.findUserByCondition(detachedCriteria);
request.setAttribute("userList", list);
request.getRequestDispatcher("list2.jsp").forward(request, response);
}
Service層：
public List<User> findUserByCondition(DetachedCriteria detachedCriteria) {
//傳遞給Dao層
UserDao userDao = new UserDao();
return userDao.findUserByCondition(detachedCriteria);
}
1
2
3
4
5
Dao層：
public List<User> findUserByCondition(DetachedCriteria detachedCriteria) {
Session session = HibernateUtils.openSession();
Transaction tx = session.beginTransaction();
//關(guān)聯(lián)session
Criteria criteria = detachedCriteria.getExecutableCriteria(session);
//查詢
List<User> list = criteria.list();
return list;
}
前端頁面：
忘記寫查詢數(shù)據(jù)回顯了…
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<form class="form-inline" role="form" method="post" action="${pageContext.request.contextPath }/findUserByCondition">
<div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail2" placeholder="用戶ID" name="userId">
</div>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputPassword2" placeholder="用戶名" name="userName">
</div>
<button type="submit" class="btn btn-default">篩選</button>
</form>
<div style="text-align: center; width: 600px;">
<table class="table table-hover">
<tr><td>編號</td><td>用戶ID</td><td>用戶名</td><td>昵稱</td><td>密碼</td></tr>
<!-- 顯示數(shù)據(jù) -->
<c:forEach items="${userList }" var="list">
<tr><td>${list.user_id }</td><td>${list.user_code }</td><td>${list.user_name }</td><td>${list.user_password }</td><td>${list.user_state }</td></tr>
</c:forEach>
</table>
</div>
</body>
</html>
測試：
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
講述邊際效應(yīng)對應(yīng)不同線上線下產(chǎn)品的不同狀態(tài)以及優(yōu)勢
現(xiàn)如今對于大多數(shù)的互聯(lián)網(wǎng)產(chǎn)品來說，其實都大致會用到“邊際效應(yīng)”這個概念，在看似華麗渲染的互聯(lián)網(wǎng)背后，真正支撐著的是對人的深刻認(rèn)識與理解。當(dāng)然，現(xiàn)如今的產(chǎn)品很多都有規(guī)律可循，包括商業(yè)模式、變現(xiàn)方式等等，那么這次我們就來說說那些在互聯(lián)網(wǎng)中產(chǎn)品的邊際成本遞減效應(yīng)的設(shè)計。
首先呢，在這里我要先為大家解釋一下何為邊際成本。
從概念性角度解釋：邊際成本指的是每一個單位新增的產(chǎn)品（或購買的產(chǎn)品）所帶來的總成本增量。
比如說現(xiàn)如今的共享單車，在僅生產(chǎn)第一輛的時候，其公司花費(fèi)的成本是極大的，它包含：設(shè)計費(fèi)、電話費(fèi)、路程費(fèi)、人工費(fèi)等等等等……但是，在生產(chǎn)第100輛的時候，小車兒的成本就低很多了，再不創(chuàng)新的前提下，只要復(fù)制就可以了，而如果在生產(chǎn)第1000輛的時候，那成本就更低了，這就是經(jīng)濟(jì)規(guī)模帶來的效應(yīng)。那么，同樣的復(fù)制，為什么越復(fù)制越便宜呢？其實，這里面有一個對等的增產(chǎn)量對比，由于小車數(shù)量的增多，遍布區(qū)域的擴(kuò)大，所以，也就導(dǎo)致公司的機(jī)會成本增高，也就是成本更低，所以，考慮邊際成本遞減的同時，也要考慮機(jī)會的增多。
剛才說到的其實就是邊際效應(yīng)里成本遞減的模式，也是我們這次討論產(chǎn)品的核心，所謂的邊際效應(yīng)遞減，就是指在其他條件不變的情況下，如果一種投入要素連續(xù)的等量增加，當(dāng)增加到一定產(chǎn)值后，所提供的產(chǎn)品增量就會下降，同時可變要素的邊際產(chǎn)量就會遞減。
我在舉個例子：日常的滴滴打車，就是遞減的模式，因為滴滴大多數(shù)的供給側(cè)平臺用戶就是私家車出來接單，所以，當(dāng)平臺每多接入一輛車，那么對于滴滴平臺來講邊際成本就越趨于零。
其實，類似于滴滴打車這樣的線上+線下的資源整合性平臺，更加符合互聯(lián)網(wǎng)的經(jīng)營模式，這是因為互聯(lián)網(wǎng)在21世紀(jì)，就是以免費(fèi)為前提的，隨著用戶的增多，邊際成本的下降，無非就是在完善經(jīng)營的條件下，多開一些服務(wù)器和寬帶罷了，其他的成本幾乎已經(jīng)可以忽略不計，而這也正是互聯(lián)網(wǎng)產(chǎn)品成為霸主的必要因素之一。
注（供給側(cè)：經(jīng)濟(jì)學(xué)術(shù)語的一種，意思是指供給方面，國民經(jīng)濟(jì)的平穩(wěn)發(fā)展取決于經(jīng)濟(jì)中需求和供給的相對平衡。 供給顯示了隨著價錢升降而其它因素不變的情況下，某個體在每段時間內(nèi)所愿意賣出的某貨物的數(shù)量。在某一價格下，消費(fèi)者愿意購買的某一貨物的總數(shù)量稱為需求量。在不同價格下，供給量會不同。供給和需求也就是說價格與需求量的關(guān)系。若以圖像表示，便稱為供給曲線。）
在我們逛街購物時，幾乎都會買一杯奶茶飲品，而這里面就運(yùn)用到了邊際效應(yīng)的負(fù)效應(yīng)模式，他們運(yùn)用第二杯半價的手段來提升消費(fèi)者對產(chǎn)品第一次的貪婪程度，也就是“欲望值”，同時也提升了產(chǎn)品的銷售，但邊際成本不變，當(dāng)消費(fèi)者購買后，負(fù)效應(yīng)可能就會產(chǎn)生，因為消費(fèi)者不一定能喝完。這里就體現(xiàn)的是商品價值取決于人的欲望和欲望被滿足的程度比例。
再比如商場內(nèi)大牌服裝都寫著全場8折，其實仔細(xì)想想，8折的價格真的很劃算么？他們這么做也同樣是在運(yùn)用了邊際效應(yīng)的同時調(diào)取了消費(fèi)者心理的欲望值，在消費(fèi)者第一次購買時，單純考慮的爽點(diǎn)而非負(fù)效應(yīng)，但隨著商品購買完的數(shù)量，才真正會產(chǎn)生負(fù)效應(yīng)。
還有一個是關(guān)于電影票的，我的一個朋友會經(jīng)常去看電影，之前去看電影的時候是在現(xiàn)場買的票，那次售票員給他推送了一個非常超值的套餐，就是單買一張票是原價48元，但是近期有一個限量套餐，這個套餐里包含：5場電影+1桶爆米花，價格是149元，但是需要一次性消費(fèi)，聽起來是不是非常超值？我的朋友考慮反正也沒事，那就多看幾場，還便宜。但是如果按照邊際成本遞減與負(fù)效應(yīng)來講，這絕對是一件虧本的買賣，誰能一直做著看十幾個小時的電影不走？我想電影院也一定有這樣的數(shù)據(jù)才會推出這樣的套餐吧。但隨著消費(fèi)者購買人數(shù)越多，邊際成本遞減，其他人也會紛紛模仿，這里面包含一個人類固有的“羊群效應(yīng)”，也就形成了商業(yè)價值，但隨著消費(fèi)者看電影時間的延長，負(fù)效應(yīng)也隨之而來。
注（羊群效應(yīng)：羊群效應(yīng)理論，也稱羊群行為、從眾心理。經(jīng)濟(jì)學(xué)里經(jīng)常用“羊群效應(yīng)”來描述經(jīng)濟(jì)個體的從眾跟風(fēng)心理。）
首當(dāng)其沖的，自然是微信了，這個傳奇產(chǎn)品堪稱邊際成本做的最好的一個，在我們之前都是運(yùn)用短信電話的時候，每發(fā)一條短信，每打一個電話都要考慮不同的費(fèi)用，但由于微信的出現(xiàn)，極大的解決了用戶的這個痛點(diǎn)，微信已最核心的打字聊天、語音/視頻通話為主要支點(diǎn)，并賦予各種特色產(chǎn)品輔助。在微信最大化的邊際成本趨于零的同時，迅速擴(kuò)大了用戶使用產(chǎn)品的范圍區(qū)，所以，作為互聯(lián)網(wǎng)的邊際成本，我想微信的在這方面確實做的很好。
這款產(chǎn)品為共享汽車類型，屬于線上+線下產(chǎn)品，Gofun出行的邊際成本做的比較合理是，首先是他的供給側(cè)能力較足，因為依托了首汽集團(tuán)的優(yōu)勢資源，極大的降低了邊際成本，并通過對用戶的日常作息將碎片打車時間、坐公交時間、出游時間等需求作為整體分析，提供了這一種出行服務(wù)，并且現(xiàn)在的產(chǎn)品里還融合了長時間租車服務(wù)，這就極大的又一次挖掘了一批潛在用戶，在邊際成本遞減并趨于零的同時，反響的用戶群體范圍也在逐漸擴(kuò)大。同時這個產(chǎn)品還在登陸時跳出有廣告提示，“分享可得免費(fèi)時長開車券等優(yōu)惠”，這種手法也是除了在邊際成本遞減的同時，運(yùn)用的用戶酬賞機(jī)制，目的是通過用戶引流用戶。
在文章開篇的時候我拿共享單車舉過例子，其實摩拜單車的性質(zhì)與共享汽車的性質(zhì)大體一致，主線路相似程度可達(dá)到80%，這里我要和大家說一個定律，關(guān)于用戶的定律。當(dāng)產(chǎn)品開發(fā)者抓區(qū)并成功解決掉某幾種目標(biāo)用戶的痛點(diǎn)后，其相等模式可無限制復(fù)制，并形成范圍值生產(chǎn)從而解決掉這幾種用戶對等的群體用戶痛點(diǎn)。
我給大家舉個例子應(yīng)該就徹底明白了，就像醫(yī)藥行業(yè)診斷，當(dāng)醫(yī)生遇到一種從未遇見過的病毒時，其第一次需要花費(fèi)的成本是極其昂貴的，但只要一旦得到解決，那么當(dāng)再次遇到同類型病毒時，就可以快速復(fù)制解決，其邊際成本迅速降低，反之收益增高，同時同類型病毒則可批量解決。共享汽車和單車產(chǎn)品正是邊際成本與復(fù)制的這一體現(xiàn)。
邊際成本在20世紀(jì)時是非常難得的一個概念，因為在20世紀(jì)的成本里，幾乎都是建立在“原子經(jīng)濟(jì)”上的，而直到21世紀(jì)互聯(lián)網(wǎng)形體的出現(xiàn)，邊際成本將真實的成倍數(shù)下降，這是因為21世紀(jì)的成本發(fā)生了轉(zhuǎn)移，建立在了“比特經(jīng)濟(jì)”上。
所謂原子經(jīng)濟(jì)的本質(zhì)就是需要以大規(guī)模生產(chǎn)取勝，它所遵從的是絕對的單一化、標(biāo)準(zhǔn)化、格式化創(chuàng)造。這種創(chuàng)造，并不能形成邊際成本的遞減，甭別說是趨于零，它需要的是逐漸遞增服務(wù)，就像和滴滴打車對抗的線下出租車，隨著消費(fèi)者的增多，它能做的不是整合，而是新增出租車和司機(jī)進(jìn)行匹配，如果不加入互聯(lián)網(wǎng)行業(yè)，他們將很難維持下去。
而比特經(jīng)濟(jì)，則正好是多元化、個性化、小眾化、扁平化的。它所崇尚的就是一種主客一體、多元共生共存的理念、可以使使用者分享滿足感和快樂感。這樣的好處是在快速擴(kuò)大用戶群體區(qū)值的同時還能使邊際成本下降。
文章來源：站酷
不知道從什么時候我開始 對“創(chuàng)新”這個詞感到些許乏力和恐懼，開始思考為什么有些人能看透問題本質(zhì)？于是有了本文的探索和總結(jié)。
平時我們大部分時間都在做一些“應(yīng)激反應(yīng)”的事情，經(jīng)常處于“被安排”的情況下，大腦逐漸懶得去思考背后的東西，通常根據(jù)自己的主觀意愿做出一些反應(yīng)。慢慢依賴一些“道聽途說”而來的方法論來做一些事情，“套用”效果也不理想。
有一定履歷的產(chǎn)品經(jīng)理多數(shù)也會迷上“經(jīng)驗論”。
種種行為都是沒有通過本質(zhì)思考的行為表現(xiàn)，都是一些脈沖式的思考。別人做什么 ，我們也跟著去做，只能在這個行業(yè)里面產(chǎn)生細(xì)微的迭代，無法實現(xiàn)真正的創(chuàng)新。
關(guān)于創(chuàng)新，埃隆馬斯克引爆了一個概念，回歸到事物本質(zhì)，看透問題本源的思維叫“第一性原理”，它不是一個定律也不是真理，而是一種思維模式。
我先不解釋到底什么是第一性原理，因為本來就處于蒙圈的情況下再去看一些專業(yè)的解釋就會更加蒙圈。
下面分享一個故事，一起來了解一下本質(zhì)思考這種思考方式，拋開哲學(xué)、生命、宇宙本質(zhì)，圍繞“搶域名”這件事，主角蔡文勝是如何將域名搶注成功率從十萬分之一變成50%以上？他到底是怎么做到及如何思考的。
背景：fm365.com注冊于1999年10月21日，因忘記續(xù)費(fèi)，到2003年10月21日過期，當(dāng)時這個網(wǎng)站是聯(lián)想重金打造的門戶網(wǎng)站流量非?？捎^，當(dāng)時可能有10萬人要想搶注這個域名。
想搶注域名的人都知道域名釋放時間是在2003年10月21日，但很多人沒有做好基本的調(diào)研與了解，不同域名服務(wù)商釋放時間不一樣，有些是次日0點(diǎn)，有些是30天，所以當(dāng)時大部分人都不知道這個具體域名掉落時間，實際上這個域名掉落時間是在70天之后。
那么知道了域名掉落的具體日期， 也不可能一整天都去注冊搶注， 還需要知道具體時間才能搶注成功，而事實上當(dāng)時這個域名在美國一個域名商手上，所以掉落時間是在美國的中午12點(diǎn)，對應(yīng)中國是凌晨3點(diǎn)，在那個時間點(diǎn)域名才完全掉落。
那么問題來了，知道了最后具體掉落日期和時間，怎樣才能脫穎而出，成為那個唯一一個能把域名搶到的人？
蔡文勝做了以下4件事：
第一件，首先注冊域名上所有信息、 名字、郵箱等字段事先填好 ，這個過程大概需要5秒鐘， 然后直接按f5就可以了，只要1秒不到，就能提交注冊信息。
第二件，蔡文勝當(dāng)時查了一下這個網(wǎng)絡(luò)請求到底是怎么走的，發(fā)現(xiàn)這個請求是先從廈門連到上海，上海連到美國，請求的路徑非常長，當(dāng)時在2003年網(wǎng)速還是非常的慢，所以蔡文勝索性租了一臺上海的服務(wù)器，直接從上海連到美國，這樣至少在中國理論上是最快的。
第三件，節(jié)省注冊資料字節(jié)長度，把88888@qq.com改成 1@1.com，因為這信息回頭也可以修改，壓縮后比完整的信息要少幾百個字節(jié)，這樣加快提交速度，又提高成功率。
第四件，當(dāng)時據(jù)說搶注這個域名的人有10萬人，蔡文勝預(yù)估有大概前面3件事能淘汰掉90%的人，還和剩余10%的人進(jìn)行競爭，所以還是不能保證能夠注冊并搶注成功。最后蔡文勝搞了一個自動點(diǎn)擊腳本，每秒提交1000次。最終蔡文勝從10萬人里面脫穎而出，成為唯一一個搶到域名的人。
回歸到搶域名這件事的本質(zhì)上，把域名開放時間設(shè)為T0，提交信息到域名服務(wù)器的時間設(shè)為T1，使T1-T0的時間最短就能搶注成功。
看完上面的故事，回歸產(chǎn)品人如何訓(xùn)練/培養(yǎng)自己的本質(zhì)思維。
每個人都有一定思維慣性，看到事物會下意識的做出一些反應(yīng)。
在《思考，快與慢》書中的知識叫“快系統(tǒng)”，人會本能直覺迅速做出一些判斷和反應(yīng)，這套系統(tǒng)好處是大腦反應(yīng)非常快，功耗低還”省電“。
所以我們一旦意識到自己在用過往或他人、競爭對手等經(jīng)驗時先打住，不是說不能用，而先思考這些“經(jīng)驗”對現(xiàn)在是否真正能用上。
每個人都有自己對主觀意識，特別是產(chǎn)品經(jīng)理這個崗位主觀意識真的太強(qiáng)了。在數(shù)據(jù)報表或調(diào)研結(jié)果上看到一批數(shù)據(jù)會帶上自己的主觀想法來解釋這一批數(shù)據(jù)原因。
擺脫原有的思維慣性應(yīng)該啟動大腦的“慢系統(tǒng)”，慢系統(tǒng)需要調(diào)動我們的邏輯思維等能力，一旦啟動邏輯思維能力周期很長，啟動很慢很費(fèi)力，所以我們?nèi)粘Ｄ敲炊嗍虑樘幚淼臅r候，沒有什么時間去切換慢系統(tǒng)，所以會造成前面所說的應(yīng)激反應(yīng)。
當(dāng)然我們也非常難做到每次都使用“慢系統(tǒng)”來解決問題，大腦處理不過來，頭發(fā)也堅持不住，但我們可以鍛煉出好的思維方式，讓自己思考時不輕易的跑到原有的思維慣性去。
蔡文勝在搶注FM365這事上就是不斷追問自己，“我還能不能更快一點(diǎn)？”、“我怎樣才能比別人更快搶到！”、“如何將請求路徑變短？”、“怎樣才能提升請求速度？” 從解決問題的路徑上，根據(jù)目標(biāo)一層一層的不斷的對自己發(fā)問，最終這些問題都會迎刃而解。
有問題請教別人也是突破思維慣性的好方法，拋開對錯，觀點(diǎn)過濾，交流時可以認(rèn)真聽但不要照著做，和老板給你提需求是一個道理。問題方和解決方看到的視角都是不一樣的，利于思維開闊。
“實踐”指的洞察已發(fā)生的事物做出自我思考的問題和想法、比如在“產(chǎn)品分析”環(huán)節(jié)重點(diǎn)研究下對方可能接下來會做些什么事，預(yù)估做了會產(chǎn)生哪些結(jié)果？當(dāng)前的業(yè)務(wù)形態(tài)為什么會這樣設(shè)計？
總之產(chǎn)品方法論有時候并沒有那么重要，最重要的不是學(xué)習(xí)別人的方法論，而是通過自己的本質(zhì)思考，不斷總結(jié)出自己的方法論，有意識的去訓(xùn)練自己的思維習(xí)慣，養(yǎng)成思維模型，這對產(chǎn)品經(jīng)理才是重要的事情。
文章來源：人人都是產(chǎn)品經(jīng)理
AI被熱捧那么久，王維嘉博士的《暗知識》是第一本把它講明白的中文科普書。
這本書第一個知識框架，就是下面這張4象限圖：
(該圖來自：王維嘉的《暗知識》）
該圖將知識按“是否可表達(dá)”、“是否可感受”的兩個維度分為四類：
具體來說，暗知識是機(jī)器發(fā)現(xiàn)的，人類無法感受也無法表達(dá)的知識。
就像圍棋，人類2000年來保留的棋譜大概有3000萬個（8位數(shù)），但圍棋上棋子的擺放方法的可能性有2的361次方個（108位數(shù)），中間何止相差萬億倍。人類對圍棋的認(rèn)知，就是基于3000萬這個8位數(shù)范圍的認(rèn)知。與機(jī)器相比，相差10的100次方。這部分機(jī)器能掌握而人不能的，就是暗知識。
這是本書讓人驚嘆的第一個點(diǎn)，通過設(shè)立一個新的二維坐標(biāo)模型，就能夠找到人類以往概念上的盲區(qū)！其次，王博士選的詞匯也是超一流的，“暗”和“默”兩個字都很有神采。
雖然是“科普書”，但書里還是不得不講到人類的“神經(jīng)網(wǎng)絡(luò)”、計算機(jī)的“機(jī)器學(xué)習(xí)”、“卷積”等復(fù)雜概念。
我用自己的語言，以“識別一只貓”為例，為大家簡單講述一下AI吧：
（1）識別貓與計算“1+2=？”不同，前者是“默知識”—— 無法用準(zhǔn)確的語言描述出來。在計算機(jī)歷史上，通過“尖尖的耳朵”、“長尾巴”、“圓眼睛”等信息來識別貓的程序都失敗了。
（2）我們閉上眼睛想想，如何把一只貓與一只豹子的照片區(qū)別開，需要補(bǔ)充很多語言描述。把一只貓與一只狗區(qū)別開，又需要補(bǔ)充一些描述，其實人是不能把“識別一只貓”這件事情用語言明確說清楚的 —— 既然人說不清，傳統(tǒng)計算機(jī)程序就做不到。但人，哪怕是三歲的孩子都能區(qū)別貓和狗，背后是什么原理呢？
（3）后來科學(xué)家通過研究人類大腦的神經(jīng)網(wǎng)絡(luò)，發(fā)現(xiàn)大腦是通過分層判斷，最終在神經(jīng)元中留下“歷史痕跡”的邏輯鏈條的。這是很有趣的生物學(xué)現(xiàn)象，一個神經(jīng)元受到的刺激（生物電擊）越多，得到的營養(yǎng)就越多、就會成長得越強(qiáng)大。而每次判斷在每層神經(jīng)元中留下的痕跡，就會強(qiáng)化今后整個人腦神經(jīng)網(wǎng)絡(luò)的判斷能力。
（4）計算機(jī)科學(xué)家根據(jù)對人類大腦神經(jīng)網(wǎng)絡(luò)的認(rèn)識，開發(fā)了計算機(jī)“神經(jīng)網(wǎng)絡(luò)”。這個網(wǎng)絡(luò)不但可以識別“貓”，而且識別貓的過程也同樣無法輸出成為人能認(rèn)識的“文字描述”。
（5）這些識別算法就沉淀在“神經(jīng)網(wǎng)絡(luò)”中（表現(xiàn)為數(shù)據(jù)及數(shù)據(jù)關(guān)系），無法被人類直接掌握，人只能通過安裝了神經(jīng)網(wǎng)絡(luò)的計算機(jī)獲得這個能力。
（6）不知大家注意到?jīng)]有，為了讓計算機(jī)解決這個“默知識”的問題，我們最終是用了“暗知識”來解決。
（7）這類“暗知識”，能夠在計算機(jī)之間快速復(fù)制，但無法在人和人之間復(fù)制，人和人之間能傳遞的只能是控制AI計算機(jī)的方法。
暗知識大體說完，我再回到與我們的思考方式相關(guān)度更高的“默知識”。
《思考，快與慢》這本書大約是我2013年讀到的，我認(rèn)為這是那一年我讀到最好的書。好就好在研究老對象（人類行為與注意力）的過程中，用了新思考框架，并建立了有說服力的體系。
幾年來，這本書被我放在電腦顯示器下面，意喻為“抬高了我的視野”。當(dāng)然，最初是為抬高了顯示器，起到保護(hù)頸椎的作用。
書里是這樣定義人的兩種思維模式的：
當(dāng)系統(tǒng)2學(xué)習(xí)掌握了重復(fù)使用的套路后，大腦會將重復(fù)工作轉(zhuǎn)給系統(tǒng)1。
我高中時，經(jīng)常因為簡單的數(shù)學(xué)加減乘除四則混合運(yùn)算錯誤，導(dǎo)致考試得不到高分。我訓(xùn)練自己做了大量專項練習(xí)，后來不僅計算過程不出錯，而且感覺當(dāng)時是把簡單的四則運(yùn)算從“系統(tǒng)2”挪到“系統(tǒng)1”了?？荚嚂r，手上做著乘法豎式，腦子里考慮是否有更好的解題思路。
從另一個角度看，大腦的重復(fù)套路工作從“系統(tǒng)2”轉(zhuǎn)給“系統(tǒng)1”，還有一個更大的好處 —— 降低能力消耗。
系統(tǒng)1反應(yīng)很快，對能量的消耗遠(yuǎn)低于系統(tǒng)2。我查了《人類簡史》、《文明是副產(chǎn)品》等書籍，看到這樣的資料：晚期智人的大腦占體重的1/20，但耗能、耗氧量卻達(dá)到全身的1/5。在工業(yè)革命前的5萬年里，智人供養(yǎng)這樣一個大腦是極其不容易的，所以我推斷：
系統(tǒng)1畢竟簡化了判斷過程，是否會造成很多誤判呢？我相信是的，但因為能量的限制，人類當(dāng)時應(yīng)該是找到了中間最優(yōu)解。
我認(rèn)為：《思考，快與慢》的“系統(tǒng)1”，學(xué)習(xí)的其實就是前一節(jié)說的“默知識”。
還是以騎自行車為例，咱們可以教新手一些保持自行車平衡的要領(lǐng)，但一個新手學(xué)會騎車的過程，是實踐重于理論的。最后形成的知識，就是無法說清的“默知識”，這個默知識保存在我們每個人的“系統(tǒng)1”當(dāng)中。
當(dāng)然，系統(tǒng)1與系統(tǒng)2的關(guān)系還有很多層次，并對人類社會產(chǎn)生了深遠(yuǎn)影響。
例如：遇到緊急情況時（“快撞到行人了”），系統(tǒng)2會從系統(tǒng)1接管人體控制權(quán)，多費(fèi)一點(diǎn)腦力控制好自行車的方向，避免造成交通事故。
畢竟我的讀者都是toB企業(yè)同事，我還是講一個書中與咱們業(yè)務(wù)有關(guān)的故事。作者丹尼爾·卡尼曼是諾貝爾經(jīng)濟(jì)學(xué)獎獲得者，21歲時（1955年）曾經(jīng)在以色列軍隊里負(fù)責(zé)設(shè)計士兵面試流程。這之前，面試官完全根據(jù)感覺打分，結(jié)果篩選出來的新兵合格率很低?？崧隽艘惶自O(shè)計，聽起來和我在《SaaS創(chuàng)業(yè)路線圖（六）：如何擴(kuò)張團(tuán)隊？》中的做法類似，就是要求面試官嚴(yán)格按框架打分。
（上圖為我系列文章（六）中提供的打分表）
卡尼曼不是他的面試官們的上級，面試官們不喜歡做“打分機(jī)器人”。卡尼曼的讓步是，同意面試官根據(jù)標(biāo)準(zhǔn)格式打分后，最后“閉上眼睛給士兵打個總分”。
最后的結(jié)果是，新的測評方法大幅提高了有效率。45年后卡尼曼回到該部隊，發(fā)現(xiàn)他的面試方法還在延用。
而我的面試表最后也有這樣一行：“自己是否愿意帶領(lǐng)此人去完成一個困難的任務(wù)？”其實這是一個非常感性的問題，與表格其它部分（記錄工作年限、記錄回答情況等）非常不同。
我觀察，這就是在很多領(lǐng)域中，決策復(fù)雜問題的一個優(yōu)選方法：
這個過程的好處是：
我們企業(yè)決策中，如果死板地使用調(diào)查前設(shè)計的“打分表”，往往會錯過發(fā)展機(jī)會。因為環(huán)境在劇烈變化，調(diào)查前很難做出完美的打分表。而“默知識”會讓我們熟悉業(yè)務(wù)的決策者更準(zhǔn)確地做出判斷。
上面說了很多“默知識”的例子，具體怎么學(xué)習(xí)和使用“默知識”呢？最近“得到APP”的精英日課正好也推出了一篇文章“內(nèi)隱學(xué)習(xí)和外顯學(xué)習(xí)”。
簡而言之，外顯學(xué)習(xí)就是學(xué)習(xí)“明知識”的過程，掌握歷史知識、化學(xué)公式……
內(nèi)隱學(xué)習(xí)，則是學(xué)習(xí)“默知識”的過程，學(xué)到的是個“感”。例如：英語的語感。
1993年高考時，記得我的英語成績大約是140分（滿分150）。因為不考口語，這全都是英語語法和單詞，大多是“明知識”。
但我工作后能在外企說流利的英文，全有賴于大學(xué)時在華中理工（現(xiàn)在的華中科技大學(xué)）有一個教“外貿(mào)英語”的廖老師。他逼著我們每人整篇整篇地背誦外貿(mào)英語，上課經(jīng)?，F(xiàn)場考對話，當(dāng)時那個厭惡哪……沒想到堅持了一個學(xué)期，死記硬背了幾百句常用對話后，英語“語感”就形成了。大腦中可以用英文思考問題，我是一生受用。
“精英日課”引用的一個調(diào)查研究還有個有趣的結(jié)論：外顯學(xué)習(xí)明知識，注意力越集中越好；但集中注意力反而會妨礙內(nèi)隱學(xué)習(xí)。
為什么？因為“默知識”是沒有明確規(guī)則的，越努力找規(guī)律越學(xué)不會，不如放松一些，讓頭腦直接沉浸在直觀信息中，這樣更容易領(lǐng)悟那個“感”。
在企業(yè)經(jīng)營中，我們經(jīng)常需要新的創(chuàng)意：如何設(shè)計一個擺脫俗套的新激勵方式？如何做營銷上的創(chuàng)新？如何設(shè)計一個全新的內(nèi)容？這時候，讓注意力分散些，看看不相關(guān)的書籍、討論一些別的話題，可能靈感會來的更快。
就像我寫這篇文章，目的與路線圖系列是一樣的，還是想幫助大家提升經(jīng)營管理能力。但如果不引入更多關(guān)于思考方式、關(guān)于人類發(fā)展史的文章，就會跳不出日常操作的層面，不能給大家?guī)硇碌目諝狻?
這篇文字是“思考方式革命”的第一篇。我講的不是明知識、也不是默知識，我講的是一些新的思考方法。
（1）如何通過增添新的維度，讓你對研究對象（無論是客戶群、團(tuán)隊或產(chǎn)品服務(wù)）增加新的評估方式？操作工具就是最前面的四象限圖。
（2）設(shè)計新體系時，用詞要精準(zhǔn)。王維嘉博士用一個“暗”字，一個“默”字，把體系講的很清楚?！懊徽圆豁槨保@是我經(jīng)常說的道理。一個事兒的“名字”選錯了，要費(fèi)很多口舌解釋，到頭來沒聽到解釋的人看了還是會誤解。
（3）計算機(jī)AI算法是基于人類的“神經(jīng)網(wǎng)絡(luò)”模型的。企業(yè)管理中，一個體系的設(shè)計、一個測算模型的建立，都要基于“自然”的業(yè)務(wù)規(guī)則，基于人性的需求進(jìn)行考量。我不是講抽象的“道”，我說的是可以操作的規(guī)則。
（4）例如：人的大腦將重復(fù)套路工作交給系統(tǒng)1，就是符合降低消耗的規(guī)則的。而“能量的限制”就是工業(yè)革命前的20萬年里控制人類發(fā)展的主要因素。
（5）我們做企業(yè)，也是同樣有很多限制，財務(wù)上有利潤要求、有任何時點(diǎn)現(xiàn)金流不得低于安全線的要求。這屬于“明知識”。
（6）在不能用“明知識”直接通過計算做出決策的復(fù)雜情況下，基于“感覺”的判斷實際上更準(zhǔn)確。所以專業(yè)知識重要，但業(yè)務(wù)背景更重要。
（7）但如果只靠“感覺”決策，也很危險。文中舉了一個新兵打分的例子。最佳方法是：讓決策者先結(jié)構(gòu)化地全面多維度打分，然后再“感性”地做出最終判斷。
（8）注意力分散些，有利于創(chuàng)新。所以需要新點(diǎn)子時，要給團(tuán)隊成員新環(huán)境、新場景和一些新時間。
（9）默知識這么重要，如何得到？要反復(fù)練習(xí)，不專注（忘掉規(guī)則）地學(xué)習(xí)。
當(dāng)下消費(fèi)市場，年輕人是絕對的主力人群。對于品牌來講，抓住年輕人就是抓住了市場，于是品牌們紛紛開始“年輕化”。但是在這條路上，一不小心，可能就會陷入“坑”中。本文筆者對品牌年輕化進(jìn)行分析解讀，總結(jié)了自己的看法，供大家學(xué)習(xí)參考。
互聯(lián)網(wǎng)打破了渠道與媒介的壁壘，加速了整個社會消費(fèi)觀念、品味、需求的變遷。無論是消費(fèi)觀念還是購買能力，顯然當(dāng)下的年輕人是絕對的主力人群。
對于品牌而言，就好像牧羊一般，草在哪兒，羊群就在哪兒，不追草的羊不是已經(jīng)餓死，就是在餓死的路上。
于是品牌年輕化好似成為了一切品牌問題的解藥，不幸的是，這些品牌在年輕化的道路，都走到了相似的逼仄中，年輕化僅僅達(dá)到了“形”的貼近，卻夭折在了“神”的部分。
那品牌年輕化到底該如何做呢？
木蘭姐認(rèn)為，在回答這個問題之前，我們需要先弄清楚一點(diǎn)：
品牌年輕化≠品牌年輕人化
與人一樣，品牌也有自己的生命周期，會經(jīng)歷誕生-成長-成熟-老化的過程。但與人不同的是，品牌生命周期并不單純以年齡來劃分，而是與市場環(huán)境、經(jīng)濟(jì)環(huán)境、消費(fèi)者行為綁定在一起。
但很多品牌往往容易陷進(jìn)一個誤區(qū)：認(rèn)為品牌年輕化就是年輕人化，于是先給年輕人貼幾個標(biāo)簽，然后再把這些標(biāo)簽貼在自己身上，試圖收獲年輕人的認(rèn)同，混進(jìn)他們的圈子，用看似時尚、熱門、流行的元素將自己打扮成“年輕人”，但往往最后結(jié)果卻是不被年輕人買單的無效溝通。
舉個例子：
KFC前段時間的形象風(fēng)波就是大型的翻車現(xiàn)場，讓消費(fèi)者者覺得品牌對“年輕”有誤解。
KFC為了更貼合年輕消費(fèi)者對顏值的要求，完全翻轉(zhuǎn)了大家對爺爺慈祥微胖的印象，以更時尚的高顏值形象走入消費(fèi)者眼簾。
但這個形象橫空出現(xiàn)，只給消費(fèi)者帶來了短暫的視覺沖擊，并沒有讓其產(chǎn)生情感上的認(rèn)同，甚至是嚇到了部分消費(fèi)者，很多人直呼不買賬。
△圖片截取自網(wǎng)絡(luò)
所幸這只是KFC品牌年輕化的一次嘗試，并沒有真正投入市場，也沒有給品牌帶來太多的影響。
從KFC的案例中我們可以得到什么樣的警醒呢：或許品牌用表面的裝嫩的方式能夠獲得一時關(guān)注，但混入年輕人的圈子，走進(jìn)他們的內(nèi)心卻有些難度。
就像1000個讀者就有1000個哈姆雷特一樣，1000個消費(fèi)者可能會有1000種需求或喜好，品牌無法對這個群體“一刀切”，也沒有一個品牌能做到被所有年輕人追捧。
要知道，這一代年輕人并不是很多品牌自以為所謂的 “狂拽炸酷吊炸天”這么簡單，品牌需要做的是真正洞察年輕人的生活態(tài)度，先在價值觀上找到和年輕人真正的契合點(diǎn)，強(qiáng)調(diào) “我”，而不是追隨 “他”。
那正解如何呢？
就像物理學(xué)中的杠桿支點(diǎn)一樣，支點(diǎn)找得準(zhǔn)不準(zhǔn)，直接影響其他要素的確定。對企業(yè)而言，突破品牌桎梏，精準(zhǔn)地找到品牌年輕化的支點(diǎn)，才是贏得消費(fèi)群體的王道。
而這個“品牌年輕化”的支點(diǎn)，木蘭姐認(rèn)為應(yīng)該是為品牌灌注新鮮活力，延長或恢復(fù)品牌的“青春期”，讓品牌可以一直活躍在時代主力消費(fèi)人群的面前，不至于被消費(fèi)者和市場遺忘。
無疑，旺旺是其中的佼佼者者。
旺旺在年輕化的道路上摸索出了一條康莊大道，除了主打情懷回憶殺，還不斷嘗試將品牌時尚化，以此來滿足年輕人的潮流需求，比如六一攜手奈雪的茶推出寶藏奶茶；與自然堂聯(lián)合，打造自然堂x旺旺定制款氣墊BB霜組合裝，以及聯(lián)名款服裝等，一系列令人意外又驚喜的跨界合作，無疑賺足了眼球。
這一波國民經(jīng)典IP與原創(chuàng)潮牌的跨界合作，不僅意味著旺旺已經(jīng)洞察到現(xiàn)如今年輕一代的喜好，更代表了旺旺作為一個國民老品牌，有著高度的包容性，在打破以往成就、固化的品牌形象后，以有活力、年輕化、時尚潮流的品牌范兒，不斷刷新品牌的高曝光度，以及年輕人對品牌的認(rèn)可度。
可以說，旺旺在嘗試年輕化營銷的同時，也能看到其要做年輕化內(nèi)容、年輕化產(chǎn)品、年輕化品牌的決心。
還有我們的國民老品牌百雀羚，不管是提到廣告，還是產(chǎn)品，百雀羚都是美妝界永遠(yuǎn)繞不開的話題，而百雀羚能在消費(fèi)者心中留下如此重要的認(rèn)知，都離不開其一直以來的努力和創(chuàng)新。
從三生花系列到現(xiàn)如今的故宮美什件，從《一九三一》到今天的《見微知著》、《多了一點(diǎn)》，通過消費(fèi)者喜歡的方式，為品牌注入新鮮的血液，讓經(jīng)典老品牌顯得“年輕力”十足，成功激活了消費(fèi)群體，并在品牌年輕化的形象和銷售轉(zhuǎn)化量上都實現(xiàn)了質(zhì)的突破。
可見，只有為品牌注入與時代相符的新內(nèi)涵，才能積極契合消費(fèi)族群的變遷，才是品牌永葆年輕的護(hù)城河。
提到這一點(diǎn)之前，我們先來看一個2018年最佳汽車營銷廣告案例，來自奧迪。
在這支廣告里，奧迪沒有流于表面的年輕元素，而是全程展現(xiàn)了一位滑雪飛人，觀眾跟著他腳下的雙板劃過幾乎地球上所有的地貌：山地，森林，沙漠，草原，火山，長城，海洋…
而整個片子中，奧迪車全程沒有入境，只在影片結(jié)尾，藍(lán)色海洋的背景里出現(xiàn)奧迪的廣告語：“All Conditions Are Perfect Conditions.（所有場景，都是完美場景）”。
但就是這支充滿“挑戰(zhàn)、無畏、前進(jìn)等精神”的廣告大片最后贏得戛納社會化營銷金獎，引起熱議，深受年輕觀眾的喜愛。
這說明了什么？品牌年輕化，不應(yīng)拘泥于品牌面貌的年輕，更多的是品牌內(nèi)核的年輕。
再舉個極端的案例：
年過123歲的銳步（Reebok）簽下80歲“高齡青年”王順德為品牌代言人。這個加在一起超過200歲的“超高齡組合”，如果純粹按年紀(jì)來說，絕對稱不上“年輕”，而如果單從代言人王順德的外形上硬要找一點(diǎn)年輕元素的話，可能也就能是那一頭狂野白發(fā)中的“狂野”了。
為什么會選中王順德？銳步看中了王順德身上年輕的態(tài)度——堅持、自信、突破極限，向消費(fèi)者傳遞出“任何年紀(jì)，都可以活出自己的樣子，突破極限，打破年齡的疆界”的心態(tài)。
而這跟當(dāng)代年輕人釋放個性，崇尚平等，追求自由，積極進(jìn)取，享受生活，不喜歡權(quán)威，不喜歡說教的價值觀是一致的，銳步升華了代言人背后的品牌精神。
所以木蘭姐認(rèn)為，如果你正在為品牌年輕化發(fā)愁，不妨從品牌的核心精神和態(tài)度入手，形成年輕的品牌價值觀，去發(fā)現(xiàn)目標(biāo)消費(fèi)群的價值需求，找到一個能在你們之間產(chǎn)生共鳴的態(tài)度，讓他們對品牌產(chǎn)生認(rèn)同。
此外，90后及00后的自我意識是全面覺醒的，與以往的群體不同，他們天生具有強(qiáng)烈的表達(dá)欲及掌控欲，這也進(jìn)一步催化品牌要用“陪伴心態(tài)”去與年輕人相處，真正懂他們，幫他們發(fā)聲，彰顯自我……最終成為他們心里“陪在他們身邊的人”。
比如說江小白的文案，其實不少是用戶自己寫的文案，然后通過篩選量產(chǎn)出來。再比如有時間火爆的《我的說明書》H5、DIY類H5，引發(fā)了同類H5作品的爆發(fā)，背后都是用戶的自我價值表達(dá)。
還有今年五四青年節(jié)百度APP通過創(chuàng)意互動手繪形式，站在年輕人的角度，說出了他們的心聲，彰顯年輕人的才華和態(tài)度，也是狠狠地刷了一波存在感。
我們從不拒絕新事物
青年人，就要站在時代與潮流的風(fēng)口浪尖
甭管哪年，在愛國這個原則性問題上
我們的脾氣還是有點(diǎn)大
在國家最需要我們的時候
青年人逆風(fēng)而行，救民于水火之中
這就像安裝了八個情感按鍵，撬動用戶心中的共鳴開關(guān)，最終完成內(nèi)容與用戶的深度溝通，讓用戶認(rèn)同品牌價值；更重要的是設(shè)計出文案，讓用戶表達(dá)自我，從而在用戶群中分享傳播品牌價值。
由此可見，年輕化不是品牌的一廂情愿，而是品牌和消費(fèi)者的合謀：“看見世界，找到自己”。
最后，木蘭姐想說，年輕化的“套路”不可能一成不變，無須刻意貼合年輕人時下的熱點(diǎn)，抓住深的洞察獲得年輕人共鳴，才是品牌年輕化的最好方式。
文章來源：人人都是產(chǎn)品經(jīng)理
區(qū)分取消與關(guān)閉，可以很大程度上避免丟失用戶已操作的內(nèi)容。在關(guān)閉視圖之前保存用戶的更改，使用文本標(biāo)簽而不是「X」圖標(biāo)，并在破壞性操作之前提供確認(rèn)對話框。
很久以前，「X」這個符號是用在地圖上，標(biāo)記「寶藏的藏身地」。但在今天的數(shù)字化界面中，「X」符號不再用來標(biāo)記位置，而是被用來取消進(jìn)程，或者關(guān)閉某個臨時頁面/彈框。但是如何確定「X」代表的是「取消」 還是「關(guān)閉」？有的時候可以確定，有時卻模糊不清難以界定。
其實，主要的問題在于「X」圖標(biāo)缺少了文本標(biāo)簽。當(dāng)同一個圖標(biāo)在不同的界面，卻代表不同的含義，該圖標(biāo)的可用性就會受到影響，因為用戶判斷不了到底是什么含義。
當(dāng)用戶單擊/點(diǎn)擊「X」按鈕來關(guān)閉模態(tài)彈框或視圖時，系統(tǒng)會完全取消該過程并清空之前所有操作，這讓人沮喪，甚至抓狂。因為用戶通常認(rèn)為「X」圖標(biāo)表示取消或者關(guān)閉，所以區(qū)分這兩種可能性對于交互的成功至關(guān)重要。
在某些情況下，區(qū)分取消 or 關(guān)閉并不重要。當(dāng)一個彈窗占據(jù)你的大部分屏幕時，點(diǎn)擊「X」按鈕（盡可能快地），既可以關(guān)閉該模態(tài)，也可以取消它可能觸發(fā)的任何進(jìn)程。
但是，如果頁面中包含正在運(yùn)行的計時器，正在播放的音頻，正在選擇多個選項標(biāo)簽，或其他類型未保存的內(nèi)容，那就很有必要說明「X」圖標(biāo)所代表的意義。因為用戶可能打算讓計時器或音頻繼續(xù)運(yùn)行，或者希望立刻應(yīng)用這些選好的選項標(biāo)簽，或保存正在進(jìn)行的工作，同時希望關(guān)閉該視圖繼續(xù)其他操作。
例如：絲芙蘭在結(jié)賬過程中，使用模態(tài)窗口來展示用戶可以添加到購物車的免費(fèi)商品。在以下示例中，單擊「 ADD（添加）」按鈕選擇商品后， 該按鈕直接被變成了「 Remove（移除）」，看起來似乎商品已經(jīng)被添加到購物車中了。但是，實際上當(dāng)用戶單擊右上角的「X」圖標(biāo)后，該商品并不在購物車中。他需要再重復(fù)這個步驟，最后點(diǎn)擊「Done（完成）」按鈕，商品才會被加入購物車。
Sephora：單擊右上角的「X」會取消選擇這些試用商品整個過程。用戶必須先單擊「ADD」，再單擊「Done」才能將商品添加到購物車。
要避免丟失用戶正在操作的內(nèi)容，首先需要確定用戶的意圖，是取消還是關(guān)閉，并提供明確的選項。有以下幾種方法：
1. 要求確認(rèn)
如果用戶在已經(jīng)執(zhí)行操作的模態(tài)彈框或頁面視圖中，點(diǎn)擊「X」圖標(biāo)，app 則可以在關(guān)閉視圖之前，直接詢問用戶是否應(yīng)用該操作，來確認(rèn)其意圖。此解決方案非常適合會破壞用戶工作的破壞性取消操作。例如，過濾器視圖可能會被意外關(guān)閉，并且關(guān)閉會導(dǎo)致用戶丟失其選定的選項。
這個問題在移動端界面上很常見，因為過濾器視圖占用了很大的屏幕空間，這使用戶很難或不能判斷是否已經(jīng)應(yīng)用了那些選擇。為了防止這種潛在的錯誤，在關(guān)閉過濾器視圖之前，跟用戶確認(rèn)是否要應(yīng)用這些選擇并關(guān)閉視圖，抑或是清除這些選擇。例如：下圖中，當(dāng)用戶選擇后，點(diǎn)擊「X」圖標(biāo)時，Lowes 會出現(xiàn)如下確認(rèn)彈框。
左 ：點(diǎn)擊「X」圖標(biāo)或返回箭頭，所有的選項都會被取消，并將用戶帶回上一個頁面。右：點(diǎn)擊「X」后，出現(xiàn)一個確認(rèn)對話框，確認(rèn)用戶是應(yīng)用還是取消篩選，然后再返回結(jié)果列表頁。
同樣，當(dāng)用戶關(guān)閉正在進(jìn)行的課程時，語言學(xué)習(xí)應(yīng)用Duolingo 會顯示一個確認(rèn)對話框，課程進(jìn)行中不能中途離開，除非確認(rèn)「退出」。至少，該 APP 向用戶傳達(dá)了這一限制，同時他們也可以選擇「取消」來繼續(xù)課程。點(diǎn)擊「X」按鈕將結(jié)束當(dāng)前課程。為了防止出錯，結(jié)束前會出現(xiàn)一個確認(rèn)對話框。
缺點(diǎn)：
2. 使用文本標(biāo)簽
不要完全依賴對話框來讓用戶確認(rèn)模糊的「X」圖標(biāo)，而是使用明確的文本標(biāo)簽。文本可以消除歧義，并清楚地傳達(dá)將發(fā)生的操作：取消與關(guān)閉。
Yelp 的篩選頁面在屏幕頂部提供了標(biāo)有「Cancel（取消）」和「Reset（重制）」的按鈕，在底部提供了一個大大的「Apply（應(yīng)用）」按鈕。類似地，Etsy 中的 Filters 視圖提供了「Clear（清除）」和「Done（完成）」兩個按鈕。
注意：Etsy 使用「Done」而不是「Apply」，因為過濾器一經(jīng)選擇就可以被應(yīng)用，而這里是關(guān)于開關(guān)切換與否的建議。
（左）Yelp：Cancel、Reset 和 Apply 這三個文本標(biāo)簽既直接又清晰，這樣用戶就不太可能不小心關(guān)閉視圖而丟失他們過濾器中的選擇。（右）Etsy：Clear 為用戶取消提供了一種清晰的方式，而點(diǎn)擊 Done 則返回到「產(chǎn)品列表」頁，其中的選擇已經(jīng)應(yīng)用。
3. 關(guān)閉并保存
如果必須使用「X」圖標(biāo)而不是文本標(biāo)簽（比如為了以節(jié)省空間，或者正在遵循團(tuán)隊的設(shè)計語言），請謹(jǐn)慎使用，并在用戶完成前保存操作/內(nèi)容。另外，可以提供一個單獨(dú)的「取消」按鈕，讓用戶在進(jìn)程之外有一個緊急出口，并消除「X」在兩種含義之間的歧義。
例如：Gmail 會自動保存在非模態(tài)窗口中填寫的郵件信息到草稿（Drafts）。這樣的好處是，用戶在需要折疊或關(guān)閉該窗口時，仍然保存原來的內(nèi)容以便于下次繼續(xù)編輯。將鼠標(biāo)懸停在消息窗口右上角的「X」圖標(biāo)上時，會顯示一段提示：Save & Close（保存到草稿并關(guān)閉）。此外，點(diǎn)擊窗口右下角的「垃圾桶」圖標(biāo)可以刪除該郵件，這個圖標(biāo)離頂部的「保存和關(guān)閉」選項很遠(yuǎn)，可以防止用戶誤點(diǎn)。
Gmail：Hover 透露，「X」圖標(biāo)是用于關(guān)閉窗口而不是刪除草稿，它允許用戶保存并關(guān)閉消息窗口而不會丟失剛剛正在編輯的郵件。
對于長進(jìn)程或傾向于在后臺運(yùn)行的進(jìn)程（如計時器），默認(rèn)自動保存也是一種很好的解決方案。
例如，Glow Baby 中，后臺運(yùn)行喂食或睡眠計時器時，用戶還可以瀏覽 APP 的其他區(qū)域。因為這些計時器一般會運(yùn)行很長一段時間。此功能還能讓用戶在 APP 中做其他的任務(wù)操作，例如記錄之前換尿布的時間、瀏覽文章、逛論壇等。點(diǎn)擊計時器視圖中的「X」圖標(biāo)也只是關(guān)閉窗口并不會取消正在運(yùn)行的計時器。
Glow Baby：（左）點(diǎn)擊運(yùn)行計時器視圖中的「X」圖標(biāo)，在不停止計時器的情況下取消視圖，從而允許用戶繼續(xù)使用 APP 記錄其他類型的事件、參與社區(qū)討論、閱讀文章等。（中）運(yùn)行計時器的狀態(tài)顯示在屏幕頂部的狀態(tài)欄中。（右）在計時器暫停時點(diǎn)擊「X」圖標(biāo)，彈出「放棄」或「取消」按鈕以確認(rèn)用戶的真正意圖。
請注意：在關(guān)閉前保存中間工作或維護(hù)正在進(jìn)行的過程是主動的，但有時可能會與用戶的意圖相反。如果用戶打算通過單擊「X」按鈕取消其選擇，那自動應(yīng)用這些選擇可能會令人困惑和沮喪。
這就是為什么還必須有一個單獨(dú)的「取消」按鈕，給用戶一個出口，而不是強(qiáng)迫他們必須關(guān)閉時自動保存。
雖然「X」圖標(biāo)會造成模棱兩可，而且經(jīng)常導(dǎo)致可用性問題，但它不太可能馬上從所有接口中消失。設(shè)計人員應(yīng)該注意「X」圖標(biāo)的多重含義，消除「關(guān)閉」和「取消」之間的歧義，并提供確認(rèn)對話框或自動保存等保護(hù)性措施，避免丟失任何用戶正在操作的內(nèi)容。
若存在疑問，請記?。合缺４妫偻顺?。
為什么手機(jī)驗證碼登錄微信/淘寶時，驗證碼輸入錯誤，二者都是用的模態(tài)對話框提示用戶，而不是用 Toast 呢？
補(bǔ)充：Toast 這一控件，原是 Android 系統(tǒng)的控件。但自 Android 5.0 推出原質(zhì)化設(shè)計后，Toast 就被弱化，而是將 Snackbar 作為官方推薦的控件。如今在 Material Design 中更是找不到 Toast 的蹤影。主要原因還是 Snackbar 在交互友好性方面比 Toast 要好，例如：支持手勢交互、支持與 CoordinatorLayout 聯(lián)動等。
在本篇開始之前，我們稍作回顧。目前已經(jīng)完成的兩個系列包括：「iOS 13 設(shè)計新特性」，涉及深色模式、SF Symbols、卡片面板及情境菜單等話題，錯過的朋友不妨回看，畢竟新系統(tǒng)將會在近兩日正式推送。在「基礎(chǔ)設(shè)計原理」當(dāng)中，演講人通過一場夏威夷之旅帶領(lǐng)我們了解了一系列重要的設(shè)計原理，包括一致性、可供性、心智模型、漸進(jìn)呈現(xiàn)等等，深入淺出，老少咸宜，強(qiáng)烈推薦。
△ Mike Stern 老師的「基礎(chǔ)設(shè)計原理」
而本期開始的新話題則聚焦于如何面向 Apple 生態(tài)體系中的多種設(shè)備進(jìn)行設(shè)計，包括如何選擇平臺，如何針對不同的平臺權(quán)衡功能與外觀風(fēng)格，如何構(gòu)建生態(tài)體驗等等；演講者是 Apple 的設(shè)計師 Cas Lemmens。
在 Apple，我們非常自豪于我們所創(chuàng)造的一系列設(shè)備平臺。在創(chuàng)造和升級這些平臺的過程中，我們都會以提升人們的日常生活品質(zhì)為目標(biāo)，并力圖在人與設(shè)備之間構(gòu)建富有意義的關(guān)聯(lián)。這關(guān)聯(lián)未必僅存在于單一平臺當(dāng)中；你所使用的 Apple 設(shè)備越多，便越發(fā)能體會到整個生態(tài)帶來的依存關(guān)系。
你可能會戴著 Apple Watch 晨跑，可能會在 MacBook 或是 iMac 上完成一天的工作；下班后，你可能會借助 iPhone 的一系列功能來使用公共交通，或是在你的車?yán)锸褂?CarPlay；回到家，你可能會通過 Apple TV 看劇或電影；睡前，你可能還會在 iPad 上讀書。
無論你正在使用何種設(shè)備，Apple 的平臺生態(tài)都可以識別你、理解你，并幫助到你。
面向這樣的生態(tài)體系進(jìn)行設(shè)計，你必須對其中的每一個平臺都有著深刻的理解。對于 Apple 的設(shè)計師而言，這樣的挑戰(zhàn)已經(jīng)變得司空見慣。我們必須謹(jǐn)慎思考每一個 app 可能適合的平臺類型，以及如何使其針對不同的平臺進(jìn)行相應(yīng)的調(diào)整。
Apple 開發(fā)的 app 當(dāng)中，有些是面向全平臺的，例如「照片」或「音樂」。
而有些則僅存在于特定的平臺當(dāng)中，例如「備忘錄」、「郵件」等等。
有些服務(wù)可以在你擁有多種設(shè)備的情況下帶來最優(yōu)體驗，例如 ApplePay；另外一些則必須基于多臺設(shè)備同時運(yùn)行，例如 FaceTime。
今天，我要與各位分享的，便是 Apple 的設(shè)計師在進(jìn)行跨平臺設(shè)計時所采用的典型流程。希望這些經(jīng)驗可以幫助各位更加且目標(biāo)明確地將你的產(chǎn)品和服務(wù)推向 Apple 生態(tài)圈當(dāng)中的更多平臺。
我們首先會從「平臺選擇」開始，即了解每一個平臺的情境特質(zhì)與能力特征，并以此為基礎(chǔ)選擇最恰當(dāng)?shù)哪繕?biāo)平臺。
然后是「平臺適配」，即基于目標(biāo)平臺的設(shè)備特性，對我們希望實現(xiàn)的功能進(jìn)行權(quán)衡與管理。
接下來是「風(fēng)格協(xié)調(diào)」，即在品牌風(fēng)格與平臺規(guī)范之間尋求平衡，對 app 的視覺外觀及操作體驗進(jìn)行定義。
然后是「平臺連接」，即探索如何在不同的設(shè)備平臺之間實現(xiàn)功能的連續(xù)性，打造輕松、無縫的使用體驗。
最后，我們還會嘗試「平臺擴(kuò)展」，即探索如何同時基于多平臺實現(xiàn)最優(yōu)的綜合生態(tài)體驗。
以上便是跨平臺設(shè)計的主要流程。接下來，我們將對這五個步驟逐一進(jìn)行了解。
所謂「平臺選擇」，即回答「我要面向哪個平臺進(jìn)行設(shè)計」這個問題。
或許你還沒有上線過任何 app，目前正在考慮以哪個平臺作為首發(fā)；或許你已經(jīng)在一兩個平臺上發(fā)布過 app，正在考慮接下來應(yīng)該進(jìn)行怎樣的擴(kuò)展。
在選擇平臺時，有兩個最為關(guān)鍵的概念需要我們重點(diǎn)思考：
對于「情境」的理解至關(guān)重要，因為當(dāng)情境發(fā)生變化時，人們通常會切換他們所使用的設(shè)備，以不同的方式完成不同的任務(wù)。
舉個例子。譬如你正在辦公室里工作，或是在學(xué)校上著課；這些都是高度聚焦和穩(wěn)定的情境。當(dāng)你離開這些場所，乘上了公交車或地鐵，你便進(jìn)入了高度動態(tài)和移動化的情境。這兩類情境之間的差異非常明顯，我們通常會從 Mac 切換至 iPhone 或 Watch，因為后兩者本就是面向移動化情境進(jìn)行設(shè)計的。
而對于「能力」的理解則可以幫助你掌握并充分利用特定平臺的獨(dú)特功能。
接下來，讓我們從「情境」與「能力」這兩個方面，對 Apple 生態(tài)體系當(dāng)中的一些典型平臺進(jìn)行分析。
首先是 iPhone，因為這可能是我們多數(shù)人最為熟悉的平臺了。
從情境的角度來看，iPhone 始終保持開機(jī)，始終與我們相隨，因此它是高度移動化的；同時，iPhone 也是高度私人化的設(shè)備，我們不會輕易與他人共享使用；此外，iPhone 通常被用于高頻而短時的互動，我們每次使用不會超過幾分鐘。
iPhone 所具有的能力可以有效地支持其情境特質(zhì)?！甘冀K開機(jī)，常伴于身」的特性要求 iPhone 必須具備良好的環(huán)境感知能力，其內(nèi)置的陀螺儀、加速計等傳感器可以始終在背景進(jìn)程當(dāng)中處理環(huán)境相關(guān)的信息，即便是在我們沒有使用 iPhone 的時候；iPhone 的 Touch ID（及 Face ID 等機(jī)制）則會為我們提供私人化的保護(hù)；其高清晰度的觸屏則能確保我們在短時間的互動過程中獲得輕松與愉悅的體驗。
與 iPhone 類似，Watch 也具備「始終開機(jī)，常伴于身」的特性，且同樣是高度私人化的。但 Watch 具有更強(qiáng)的即刻性，所面向的是更為短暫的互動，譬如你只需一瞥便可以從表盤上獲取與當(dāng)下情境最為相關(guān)的信息；而提示信息在你注視稍久時還會進(jìn)一步提供詳細(xì)信息。
Watch 所具備的能力與其私人化的情境特質(zhì)息息相關(guān)。Watch 可以追蹤你的運(yùn)動狀態(tài)、地理位置及心率；其觸覺反饋可以通過輕觸手腕來提醒你查看信息；而表盤也是高度定制化的，你可以讓最為需要的信息始終呈現(xiàn)在表盤之上，便于一瞥之間快速獲取。
而 iPad 則具有較為復(fù)雜的情境特質(zhì)，既可以被用于穩(wěn)定的環(huán)境，同時也支持移動化場景。你可以用 iPad 完成一些而聚焦的任務(wù)，也可以將其作為放松型設(shè)備來享受影視或游戲體驗。而所有這些互動過程都比 iPhone 或 Watch 更加持久。
從能力的角度，iPad 的大屏正是對這些情境特質(zhì)的有效支持。充足的屏幕尺寸可以幫助你完成高精度的操作，環(huán)境光傳感器可以使其良好適應(yīng)于日夜不同的光照條件；高保真揚(yáng)聲器和高精度觸屏可以為影音或游戲帶來更具沉浸感的視聽體驗；若是配合 Apple Pencil，iPad 還能幫助你完成更加、更具創(chuàng)意性的工作。
再來看 Mac。其情境特質(zhì)具有高度的專業(yè)性，你可以進(jìn)行非常而聚焦的工作，譬如設(shè)計和開發(fā) app；MacBook 可以被作為共享設(shè)備來使用，但它同時也是個人化的，因為多數(shù)使用者都擁有獨(dú)立的個人帳戶；我們通常會長時間使用 MacBook 或 iMac，譬如每天都會有幾個小時的互動時間。
在能力方面，為了支持高度專業(yè)化的任務(wù)，Mac 具備著非常高的性能表現(xiàn)；鍵盤鼠標(biāo)可以幫助你進(jìn)行而復(fù)雜的操作；多任務(wù)能力允許你以自己所需的方式進(jìn)行工作；而多帳戶體系則能使 Mac 適用于更多樣的工作場景。
最后來看 Apple TV。這是生態(tài)當(dāng)中最具共享性的平臺，我們通常會與家人或朋友一起觀看；TV 最具穩(wěn)定性，始終與電視機(jī)綁定在一起，不會四處移動；TV 是完完全全的放松型設(shè)備，我們用它來享受影音或游戲，每次使用時長通常在三十分鐘到幾個小時之間。
配以高清顯示屏，TV 的畫質(zhì)將會鮮活得呼之欲出；TV 的遙控器輕便易用，你可以輕松地將其傳遞給朋友和家人；TV 可以與 HomeKit 良好配合，使其高度穩(wěn)定的特性得以在「家庭」這個場景中充分地發(fā)揮；其界面設(shè)計特別面向 10 碼左右的距離進(jìn)行優(yōu)化，使你可以輕松地窩在沙發(fā)里享受娛樂體驗。
通過以上分析，你便能理解，為何了解每個平臺的「情境」與「能力」對于你的目標(biāo)平臺選擇來說是如此重要的事了。
「情境」是平臺的立命之本，而「能力」則決定了其獨(dú)特性。
對于你的 app 來說也是如此。你需要問自己兩個關(guān)鍵問題：我的 app 可以在怎樣的情境里體現(xiàn)產(chǎn)品價值？要實現(xiàn)產(chǎn)品價值，需要哪些特定的技術(shù)能力作為支持？
在 Apple 內(nèi)部，每當(dāng)需要為 app 選擇目標(biāo)平臺時，我們都會反復(fù)進(jìn)行一項簡單的練習(xí)?，F(xiàn)在我來為各位進(jìn)行演示。
首先讓我們以「健身記錄」 app 為例。
想想看「健身記錄」的產(chǎn)品特性，你會發(fā)現(xiàn)它首先必須具備移動性。它需要追蹤你全天的運(yùn)動行為，以便進(jìn)行的數(shù)據(jù)統(tǒng)計。因此它需要設(shè)備平臺具備「始終開機(jī)，常伴于身」的特質(zhì)，即高度的移動性。
同時，「健身記錄」還必須是私人化的。它應(yīng)該能且只能追蹤你個人的數(shù)據(jù)。
接下來，我們要通過象限圖來建立情境特質(zhì)與平臺之間的映射關(guān)系。其中橫軸代表「移動性」，從左到右遞減；一系列 Apple 設(shè)備平臺按照各自的特質(zhì)分布在軸線上，譬如 Watch 最具移動性，而 TV 最具穩(wěn)定性。
而縱軸代表「私人性」，從上到下遞減。其中 Watch 最具私人性，TV 則最具共享性。
對于「健身記錄」而言，由于要同時具備高度的移動性與私人性，因此在象限圖當(dāng)中會大致位于左上方的位置。這便解釋了為什么它會出現(xiàn)在 Watch 和 iPhone 當(dāng)中，而非其他平臺。
接下來我們以 GarageBand 為例。
GarageBand 涉及到的人機(jī)互動是高度精準(zhǔn)型的，因為人們需要非常準(zhǔn)確地操作音頻內(nèi)容，使它們出現(xiàn)在正確的時間和地點(diǎn)。
此外，GarageBand 必須良好地支持多任務(wù)，因為人們往往會將多種音頻器材和樂器連接進(jìn)來同時進(jìn)行演奏。
我們通過象限圖來建立映射關(guān)系。其中橫軸代表交互的性，左端為粗放型，最具代表性的平臺是 Watch，因為其屏幕較小，而人們的手指相對粗大，難以完成具有高精度要求的操作；右端為精準(zhǔn)型，代表平臺為 MacBook 或 iMac，因為鍵鼠操作具備最高的度。
縱軸則代表「多任務(wù)能力」，從上到下遞減。在 Mac 上，我們可以輕松地進(jìn)行多任務(wù)操作；而對于 Watch，你每次只能完成一項任務(wù)。
GarageBand 需要同時具備高度的交互能力，以及良好的多任務(wù)能力，因此在象限圖當(dāng)中會大致位于右側(cè)偏上的位置，所對應(yīng)的即是 Mac、iPad 和 iPhone。
這兩個例子都非常簡單，各自僅涉及到兩方面的情境特質(zhì)。在實際當(dāng)中，我們通常需要將更多、更復(fù)雜的特質(zhì)因素考慮進(jìn)去；最終，我們希望能夠為 app 找到最適合其生存的平臺。
以上便是跨平臺設(shè)計流程中的第一步，「平臺選擇」，即綜合考量不同設(shè)備的情境特質(zhì)及能力特征，進(jìn)而為 app 選擇最為適合的平臺。
對于同一個頁面布局，幾乎每個人的寫法都不一樣，有人喜歡Flex彈性盒子布局，有的人則喜歡Float浮動布局，有些人喜歡Margin負(fù)值布局，等等。從來就沒有一種統(tǒng)一的布局方案，現(xiàn)在大伙寫代碼也就放飛自我，只要能在規(guī)定的環(huán)境上跑起來，不會亂就行了。但是，身為腦癱正經(jīng)前端，我們還是有必要分出在不同情況應(yīng)使用的布局。
這一篇博客比起作為文章，不如作為工具書。當(dāng)你對布局迷茫時，不妨打開看看。我們可以不求甚解，只需要先把所有布局掌握熟練。
文章目錄
CSS3 終極布局指南
正常布局（語義化布局）
正常布局，按照瀏覽器的內(nèi)置CSS渲染
應(yīng)用場景
帶來的問題
挫
不兼容
沒有自適應(yīng)
解決方案
Float浮動布局
什么是浮動？
浮動元素的排列
浮動解決的布局問題
浮動帶來的問題
父元素高度坍縮
不希望浮動時清除浮動
總結(jié)
定位布局
定位的應(yīng)用
static
relative
absolute
高度坍縮
對比float
總結(jié)
fixed
祖先未使用transform:none
使用
sticky 粘性定位
Flex布局
瀏覽器支持
Flex使用介紹
Flex容器屬性
flex-direction 排布方向
flex-wrap 控制換行
flex-flow [排布方向/控制換行]的簡稱
justify-content 子項目在主軸上的排布
align-items 子項目在交叉軸排布
align-content 定義多根軸線排布
Flex子項屬性
order 子項排布靠前排名
flex-grow 子項放大比例
flex-shrink 子項縮小比例
flex-basis
flex
align-self
Grid 布局
參考
聲明
正常布局（語義化布局）
正常布局，按照瀏覽器的內(nèi)置CSS渲染
大道至簡在遠(yuǎn)古時代，CSS還有沒被發(fā)明，瀏覽器渲染HTML的時候，只是按照規(guī)定好的如標(biāo)題、段落、表格等格式渲染。且不同的瀏覽器對于相同元素的渲染也是不同的，現(xiàn)在這項傳統(tǒng)藝能保留到了今天。
不過到了今天，正常布局也稍微被W3C重視了一下。在HTML5的規(guī)定中，新增加了不少語義化的元素。所謂語義化元素就是讓大家規(guī)定它就是來做這件事的。
新增加的語義化元素。
標(biāo)簽名稱 作用
hearder header 標(biāo)簽定義文檔的頁面組合，通常是一些引導(dǎo)和導(dǎo)航信息。
nav nav 標(biāo)簽定義顯示導(dǎo)航鏈接不是所有的成組的超級鏈接都需要放在nav標(biāo)簽里。nav標(biāo)簽里應(yīng)該放入一些當(dāng)前頁面的主要導(dǎo)航鏈接。 例如在頁腳顯示一個站點(diǎn)的導(dǎo)航鏈接（如首頁，服務(wù)信息頁面，版權(quán)信息頁面等等），就可以使用nav標(biāo)簽，當(dāng)然，這不是必須的。
article article標(biāo)簽裝載顯示一個獨(dú)立的文章內(nèi)容。例如一篇完整的論壇帖子，一則網(wǎng)站新聞，一篇博客文章等等，一個用戶評論等等 artilce可以嵌套，則內(nèi)層的artilce對外層的article標(biāo)簽有隸屬的關(guān)系。例如，一個博客文章，可以用article顯示，然后一 些評論可以以article的形式嵌入其中。
section section 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。
aside aside 用來裝載非正文類的內(nèi)容。例如廣告，成組的鏈接，側(cè)邊欄等等。
hgroup hgroup 標(biāo)簽用于對網(wǎng)頁或區(qū)段的標(biāo)題元素（h1-h6）進(jìn)行組合。例如，在一個區(qū)段中你有連續(xù)的h系列的標(biāo)簽元素，則可以用hgroup將他們括起來。
time time 標(biāo)簽定義公歷的時間（24 小時制）或日期，時間和時區(qū)偏移是可選的。該元素能夠以機(jī)器可讀的方式對日期和時間進(jìn)行編碼，這樣， 舉例說，用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結(jié)果。
mark mark 標(biāo)簽定義帶有記號的文本。請在需要突出顯示文本時使用 <mark> 標(biāo)簽。
figure figure標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。figure 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對文檔流產(chǎn)生影響。
可以看到HTML5規(guī)定中增加了不少新的標(biāo)簽，但是這些標(biāo)簽大部分并不是為了補(bǔ)充正常的文檔布局的，而是服務(wù)于搜索引擎的爬蟲。不要覺得頁面布局只是給人看的！對于布局清晰地頁面，搜索引擎的爬蟲也會給出更高的分?jǐn)?shù)。
應(yīng)用場景
作為布局的基石。
開發(fā)較為單一的頁面，比如電子書閱讀頁面，面向視力障礙人士的報紙頁面等。
帶來的問題
挫
使用瀏覽器默認(rèn)的CSS意味著你不可定制自己的頁面，對于像<ul>、<table>這樣的標(biāo)簽，你也只能忍受上世紀(jì)的設(shè)計風(fēng)格了。
不兼容
先前說了，每個瀏覽器對于基礎(chǔ)的HTML節(jié)點(diǎn)的渲染都不一樣，也就是說你寫的頁面在IE上是一個風(fēng)格，換到Safari上又是一種風(fēng)格。
沒有自適應(yīng)
有一說一，正常布局（語義化）還是用來當(dāng)基石比較好，對于響應(yīng)式、自適應(yīng)那還得看下面伙計的發(fā)揮。
解決方案
解決挫的方法就是使用style屬性，也就是使用CSS美化我們的頁面。解決不兼容的問題則需要初始化CSS，大伙應(yīng)該在不少的頁面的頭部見過一大坨css代碼吧，就像下面Google頁面。(部分)
body{color:#000;margin:0}body{background:#fff}a.gb1,a.gb2,a.gb3,.link{color:#1a0dab !important}.ts{border-collapse:collapse}.ts td{padding:0}#res,#res .j{line-height:1.2}.g{line-height:1.2;text-align:left;}.ti,.bl{display:inline}.ti{display:inline-table}#rhs_block{padding-bottom:15px}a:link,.w,#prs a:visited,#prs a:active,.q:active,.q:visited,.kl:active,.tbotu{color:#1a0dab}.mblink:visited,a:visited{color:#609}.cur,.b{font-weight:bold}.j{width:42em;font-size:82%}.s{max-width:48em}.sl{font-size:82%}
1
頁面初始化也是很重要的，它可以使我們的代碼健壯的運(yùn)行在各個環(huán)境的瀏覽器上。
Float浮動布局
什么是浮動？
如果首先要認(rèn)識一個物品，認(rèn)識一個東西的最好方式是了解為什么會產(chǎn)生它，也就是要翻它的歷史?！狽aoTan·Ma·Nong
看上圖，啊，報社最愛的環(huán)繞，一堆文字環(huán)繞一張圖片，這樣的布局使得頁面緊湊，并且有較好的閱讀體驗。如果我們要在HTML中實現(xiàn)這樣的布局應(yīng)當(dāng)怎么設(shè)置呢？手動設(shè)置換行？不行，缺少靈魂。如果能使文字繞過圖片排列下來就好了。
于是Float屬性出世，它不僅解決了文字環(huán)繞問題，并且?guī)砹诵碌牟季址桨浮?br />
如上面的布局，我們用代碼實現(xiàn)主要部分。
.side-bar{
float:left;
}
.main-content{
float:left;
}
1
2
3
4
5
6
浮動元素的排列
當(dāng)一個元素被設(shè)置為浮動元素時，首先，它會被移除文檔流，設(shè)置float:left|right則元素會向設(shè)置方向排列，直到遇到父元素邊框(或者說最大寬度)或者另一個浮動元素時停止。
當(dāng)設(shè)置父元素display:flex時，子元素的浮動值無效！
浮動解決的布局問題
使用浮動我們可以解決傳統(tǒng)的兩列布局、三列布局的自適應(yīng)。下面代碼是用浮動實現(xiàn)的兩列布局。
<!DOCTYPE html>
<html lang="zh">
<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>
<style>
body,
html {
margin: 0;
background-color: rgb(228, 228, 228);
}
header {
margin-bottom: 20px;
}
footer {
margin-top: 20px;
}
.layout {
height: 50px;
border: 1px solid black;
}
aside {
width: 25%;
float: left;
border: solid 1px black;
height: 500px;
}
article {
width: 70%;
border: solid 1px black;
height: 500px;
float: right;
}
</style>
</head>
<body>
<header class="layout"></header>
<div style="overflow:auto;">
<aside>
</aside>
<article>
</article>
</div>
<footer class="layout"></footer>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
效果如下
浮動帶來的問題
父元素高度坍縮
一般來說新手在學(xué)習(xí)浮動布局之后，遇到的第一個問題就是父元素高度坍縮。什么是高度坍縮？
看上圖，在父元素的四個子元素均為浮動元素，由于浮動元素的特性浮動元素脫離文檔流，所以父元素不會被撐起高度。
如何解決？答案很簡單，使用BFC塊級格式上下文。當(dāng)父元素為BFC的時候，內(nèi)部計算高度會帶上浮動元素的高度。
不希望浮動時清除浮動
使用clear屬性可以使元素清除周圍的浮動。
如上圖，對段落文字清除浮動，導(dǎo)致原本環(huán)繞的文字，另起一行。順便解決了高度坍縮的問題。
總結(jié)
浮動在帶來方便的同時也引入了新的問題，如果能處理好這些問題那么浮動也可以當(dāng)做布局的主力，但是都已經(jīng)9102年了，我們應(yīng)該追隨CSS3的布局方案，盡量少使用浮動。
定位布局
收拾房子的時候總會把物品按照相應(yīng)的位置放置，這樣會讓房間看上去更加整潔。所以，我們CSS也是可以這樣做的。
使用position屬性，調(diào)整元素的位置。position一共有四種定位類型：定位元素、相對定位、絕對定位、粘性定位，五種取值：static、relative、absolute、fixed、sticky。
名稱 描述 定位類型
static 該關(guān)鍵字指定元素使用正常的布局行為，即元素在文檔常規(guī)流中當(dāng)前的布局位置。此時 top, right, bottom, left 和 z-index屬性無效。 定位元素
relative 該關(guān)鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調(diào)整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素?zé)o效。 相對定位
absolute 不為元素預(yù)留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設(shè)置外邊距（margins），且不會與其他邊距合并。 絕對定位
fixed 不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現(xiàn)在的每頁的固定位置。fixed 屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。 絕對定位
sticky 盒位置根據(jù)正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對后續(xù)元素造成影響。當(dāng)元素 B 被粘性定位時，后續(xù)元素的位置仍按照 B 未定位時的位置來確定。position: sticky對 table 元素的效果與 position: relative相同。 粘性定位
一般使用position屬性時，會使用其相對定位與絕對定位、粘性定位，它們都使用top、bottom、left、right來調(diào)整自身位置，但是調(diào)整的基準(zhǔn)不一樣。
定位的應(yīng)用
static
static是元素正常出現(xiàn)在文檔流中的定位，文檔流中的排列為自上而下，自左至右。一般來說block元素自占一行，inline元素橫向排列。
正常情況下在我們的頁面中大部分元素為static定位，對于一些特殊需求我們需要使用其他定位。比如像wiki中的關(guān)鍵詞，鼠標(biāo)移動上去的時候，關(guān)鍵詞下面顯示式卡片。
relative
relative是在實現(xiàn)一些特殊布局的時候經(jīng)常使用的一種定位方式。設(shè)置為relative的元素并不會脫離文檔流，但是可以通過top、bottom、left、right調(diào)整元素對于默認(rèn)基準(zhǔn)的位置。
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
position: relative;
top: 20px;
left: 20px;
background: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
使用相對定位可以實現(xiàn)一些炫酷的效果。
.content{
text-align: center;
margin: 20px;
}
.card{
position: relative;
display: inline-block;
width: 200px;
height: 200px;
background-color: darkgray;
top: 210px;
right: 170px;
visibility: hidden;
}
span:hover+.card{
visibility:visible;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="content">
<span>鼠標(biāo)移到我身上！</span>
<div class="card">
</div>
</div>
1
2
3
4
5
6
效果
但是，使用相對定位依然會出現(xiàn)一些問題。relative定位并不會脫離文檔流，所以.content元素的高度為200px。
absolute
與relative定位不同的是absolute是脫離文檔流的，而且相對基準(zhǔn)是position屬性不為static的祖先元素，如果祖先都是static則元素相對body定位。并且，對于absolute元素，如果不設(shè)置top/bottom/left/right的話依然排列在正常布局位置。
html,
body {
margin: 0;
}
.content {
position: relative;
/ top: 50px; /
margin-top: 50px;
}
.static {
position: static;
}
.relative {
position: relative;
margin: 20px 0;
}
.absolute {
display: inline-block;
width: 50px;
height: 50px;
background-color: lightcoral;
position: absolute;
}
.non-ab {
display: inline-block;
width: 50px;
height: 50px;
background-color: darkblue;
margin-left: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="content">
<div style="height: 50px;"></div>
<div class="static">
<div class="non-ab">
</div>
<div class="absolute">
</div>
</div>
<div class="relative">
<div class="absolute">
</div>
<div class="non-ab">
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
上面的代碼很有意思，有興趣的同學(xué)可以放在codepen上面跑一下子。這個例子驗證了absolute的排列方式。當(dāng)我們知道我們在做什的時候，也就不需要墨守成規(guī)（對于absolute元素的父元素統(tǒng)一設(shè)置relative屬性）了。
高度坍縮
只要是脫離了文檔流的元素都會出現(xiàn)高度坍縮，所以在使用absolute屬性時，請確保父元素不會因此而改變。
對比float
Float與absolute都會使元素脫離文檔流，但是眾所周知對相同元素設(shè)置float與設(shè)置absolute會出現(xiàn)不同的效果。這是因為float與absolute本身的排列不一樣。
float：脫離文檔流，排列時以父元素為基準(zhǔn)，并且會為占用其他浮動元素的位置。
absolute：脫離文檔流，排列時分情況：第一種情況，對于未設(shè)置left、right、top、bottom屬性的元素，排列在正常顯示位置，并不占用空間。第二種情況，設(shè)置位置屬性的元素，基于非static祖先元素排列。
上面兩者比較顯著的差異為float會影響下一個float元素，但是absolute元素不會。
總結(jié)
說absolute為絕對定位也并不貼切，它也是基于祖先元素定位的，只是脫離了文檔流。我個人還是比較推薦在處理元素相對位置問題上使用absolute屬性的，但前提是您已經(jīng)深刻理解了absolute的排列方式。
fixed
不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現(xiàn)在的每頁的固定位置。fixed 屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。
fixed元素也會脫離文檔流，并且和absolute元素一樣，當(dāng)不設(shè)置任何left、top、bottom、right值的時候，元素依然按照正常定位的位置放置。
祖先未使用transform:none
當(dāng)祖先元素未使用transform:none的時候，fixed元素相對于該祖先元素進(jìn)行定位。
在上面的圖片中，我設(shè)置小黃塊為fiexd屬性，并讓父元素設(shè)置為 使用transform:matrix(1, 0, 0, 1, 0, 0);，這時候小黃塊并沒有相對于body進(jìn)行定位，當(dāng)滾動條下拉時，小黃塊定位固定在父元素左上角。
使用
fiexd元素一般用在如：to-top按鈕，或者側(cè)邊懸浮面板，或者懸浮導(dǎo)航欄之中。
sticky 粘性定位
盒位置根據(jù)正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對后續(xù)元素造成影響。當(dāng)元素 B 被粘性定位時，后續(xù)元素的位置仍按照 B 未定位時的位置來確定。position: sticky對 table 元素的效果與 position: relative相同。
上面我們使用了fiexd與transform，發(fā)生了我們意想不到的效果，那就是fixed元素并未相對于body進(jìn)行移動，也沒有在父元素中進(jìn)行標(biāo)準(zhǔn)的fixed定位?，F(xiàn)在我們使用以下sticky屬性來看一下效果。
<style>
.box{
box-sizing: border-box;
height: 150px;
border:solid 3px black;
margin: 0 0 20px 0;
overflow: auto;
}
.block{
width: 50px;
height: 50px;
background-color: orange;
}
.sticky-1{
position:sticky;
top: 0px;
}
</style>
<div class="box box-1">
<p>下面這個小黃塊設(shè)置為sticky</p>
<div class="sticky-1 block">
</div>
<p>
hahah
</p>
<p>
hahah
</p>
<p>hahaha</p>
<p>hahaha</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
當(dāng)我們向下滾動的時候神奇的事情發(fā)生了。
小黃塊固定到了父元素的top:0位置了，不僅如此，再向上滑動后，小黃塊又回復(fù)了當(dāng)時的位置，而且占用了文檔本身的位置。
使用這個特性我們可以制作浮動的Header組件，當(dāng)用戶向下滑動至窗口上側(cè)的時候，Header組件也跟隨窗口滑動。
Flex布局
對于前端工程師來說，最讓人頭疼的莫過于自適應(yīng)布局。對于不同分辨率的設(shè)備要做到頁面統(tǒng)一，在CSS3出現(xiàn)之前，還是挺不容易的。還有就是前端工程師頭疼的一個布局問題：垂直居中。
CSS3中新出了一種布局技術(shù)：CSS彈性盒子布局，我們來看一下MDN是如何介紹的。
CSS 彈性盒子布局是 CSS 的模塊之一，定義了一種針對用戶界面設(shè)計而優(yōu)化的 CSS 盒子模型。在彈性布局模型中，彈性容器的子元素可以在任何方向上排布，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿未使用的空間，也可以收縮尺寸以避免父元素溢出。子元素的水平對齊和垂直對齊都能很方便的進(jìn)行操控。通過嵌套這些框（水平框在垂直框內(nèi)，或垂直框在水平框內(nèi)）可以在兩個維度上構(gòu)建布局。
接下來，我會使用Flex布局技術(shù)，設(shè)計一些我們常使用頁面布局，并指出優(yōu)點(diǎn)與缺點(diǎn)。但是，我們首先要來看一下瀏覽器的支持程度。
瀏覽器支持
特性 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基礎(chǔ)支持 20.0 (20.0) 21.0-webkit 29.0 10.0-ms 11.0 12.10 6.1-webkit
主流的瀏覽器全部支持Flex屬性。注：與社會脫軌的IE9并不支持Flex，如果想寫出兼容IE9的頁面，請不要使用Flex。
Flex使用介紹
使用flex務(wù)必清楚一些屬性概念。
Flex容器：對于一個基本元素(不含任何CSS屬性，如div)，設(shè)置display:flex，即可創(chuàng)建一個Flex容器。
Flex子項：父元素為Flex容器的元素，稱之為Flex子項，其排布受到父元素影響。注：一定是父元素為Flex容器的元素，祖先不算。
排布方向：指Flex子項在Flex容器中的排布方向。排布方向有兩種：column、row。在Flex容器上使用flex-direction: column|row(默認(rèn));即可設(shè)置。
主軸：指的Flex容器中是與排列方式相同的方向的軸。如設(shè)置Flex容器direction: column;則其主軸為豎直方向。
交叉軸：指的Flex容器中是與排列方式相反的方向的軸。如設(shè)置Flex容器direction: column;則其主軸為水平方向。
我們一定要清楚上面的基礎(chǔ)概念，這對深入使用Flex有很大的幫助。下面我會介紹一些Flex常用的屬性，主要分為兩部分：對Flex容器、對Flex子項。
Flex容器屬性
flex-direction 排布方向
flex-direction 屬性指定了內(nèi)部元素是如何在 flex 容器中布局的，定義了主軸的方向(正方向或反方向)。
flex-direction屬性接受以下值：
row:子項目在flex容器中橫向，從左至右排列。
row-reverse:表現(xiàn)和row相同，也是橫向，但是是從右到左。
column:子項在容器中豎向排列，從上至下。
這里不貼圖了
column-reverse:表現(xiàn)和column相同，子項在容器中豎向排列，從下至上。
這里不貼圖了
flex-wrap 控制換行
CSS flex-wrap 指定 flex 元素單行顯示還是多行顯示 。如果允許換行，這個屬性允許你控制行的堆疊方向。
取值:
nowrap(默認(rèn))
flex 的元素被擺放到到一行，這可能導(dǎo)致溢出 flex 容器。 cross-start 會根據(jù) flex-direction 的值 相當(dāng)于 start 或 before。
wrap
flex 元素 被打斷到多個行中。cross-start 會根據(jù) flex-direction 的值選擇等于start 或before。cross-end 為確定的 cross-start 的另一端。
wrap-reverse
和 wrap 的行為一樣，但是 cross-start 和 cross-end 互換。
flex-flow [排布方向/控制換行]的簡稱
CSS flex-flow 屬性是 flex-direction 和 flex-wrap 的簡寫。
示例：flex-flow: column-reverse wrap;
justify-content 子項目在主軸上的排布
CSS justify-content 屬性定義了瀏覽器如何分配順著父容器主軸的彈性元素之間及其周圍的空間。
justify-content同時受到父容器主軸的影響。
取值：
start
從行首開始排列。每行第一個元素與行首對齊，同時所有后續(xù)的元素與前一個對齊。
flex-start（默認(rèn)）
從行首開始排列。每行第一個彈性元素與行首對齊，同時所有后續(xù)的彈性元素與前一個對齊。
flex-end
從行尾開始排列。每行最后一個彈性元素與行尾對齊，其他元素將與后一個對齊。
center
伸縮元素向每行中點(diǎn)排列。每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同。
left
伸縮元素一個挨一個在對齊容器得左邊緣，如果屬性的軸與內(nèi)聯(lián)軸不平行，則left的行為類似于start
right
元素以容器右邊緣為基準(zhǔn), 一個挨著一個對齊,如果屬性軸與內(nèi)聯(lián)軸不平行,則right的行為類似于start.
space-between
在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。
space-around
在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。
space-evenly
flex項都沿著主軸均勻分布在指定的對齊容器中。相鄰flex項之間的間距，主軸起始位置到第一個flex項的間距,主軸結(jié)束位置到最后一個flex項的間距，都完全一樣。
看上去與space-around的排布很相似，但其實還是有一些區(qū)別的。space-evenly會在每一行均勻分布間隙，而space-around是均勻分布項目。
借一張圖
看上去我們要學(xué)的屬性很多，但是其實我們只需要記住我們常用的幾個屬性就行:flex-start、flex-end、space-between、center、space-around、space-evenly。以上這幾個就是我們常用的屬性值，通過設(shè)置主軸方向、設(shè)置排列方式，我們可以靈活地組織我們的元素。
align-items 子項目在交叉軸排布
CSS align-items屬性將所有直接子節(jié)點(diǎn)上的align-self值設(shè)置為一個組。 align-self屬性設(shè)置項目在其包含塊中在交叉軸方向上的對齊方式。
取值：
normal
這個關(guān)鍵字的效果取決于我們處在什么布局模式中：在絕對定位的布局中，對于被替代的絕對定位盒子，這個效果和start的效果的一樣；對于其他所有絕對定位的盒子，這個效果和stretch的效果一樣。 在絕對定位布局的靜態(tài)位置上，效果和stretch一樣。對于那些彈性項目而言，效果和stretch一樣。對于那些網(wǎng)格項目而言，效果和stretch一樣，除了有部分比例或者一個固定大小的盒子的效果像start。這個屬性不適用于會計盒子和表格。
flex-start
元素向側(cè)軸起點(diǎn)對齊。
flex-end
元素向側(cè)軸終點(diǎn)對齊。
center
元素在側(cè)軸居中。如果元素在側(cè)軸上的高度高于其容器，那么在兩個方向上溢出距離相同。
因為align-items其實和justify-content我這里就不放一些圖片湊字?jǐn)?shù)了。
align-content 定義多根軸線排布
該屬性對單行彈性盒子模型無效。（即：帶有flex-wrap: nowrap）。
CSS的align-content屬性設(shè)置了瀏覽器如何沿著伸縮盒子容器（flexbox container）的縱軸和網(wǎng)格容器（Grid Container）的主軸在內(nèi)容項之間和周圍分配空間。
它的取值和align-items差不多，經(jīng)常有人會把他們搞混。
align-content一般定義多行的交叉軸排列。
絕大多數(shù)情況下我們使用align-items即可實現(xiàn)我們的需求。
Flex子項屬性
order 子項排布靠前排名
CSS order 屬性規(guī)定了彈性容器中的可伸縮項目在布局時的順序。元素按照 order 屬性的值的增序進(jìn)行布局。擁有相同 order 屬性值的元素按照它們在源代碼中出現(xiàn)的順序進(jìn)行布局。
取值：
<integer>
表示此可伸縮項目所在的次序組。
flex-grow 子項放大比例
CSS flex-grow 屬性定義彈性盒子項（flex item）的拉伸因子
取值：
<number>
默認(rèn)值0，即如果存在剩余空間，也不放大。負(fù)值無效。
flex-shrink 子項縮小比例
CSS flex-shrink 屬性指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認(rèn)寬度之和大于容器的時候才會發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值。
總而言之，你定了這個屬性，其他項目會先壓榨你的空間，然后再均勻縮小其他項目。
flex-basis
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。
注：分配多余空間之前！！
也就是說你給的flex-basis值大于當(dāng)前分配空間時，依然會被壓縮。
flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個屬性可選。
align-self
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
這個屬性了不得，它也是我們經(jīng)常用的子項目屬性之一。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
1
2
3
就像上面的圖，他可以決定子項目的交叉軸單獨(dú)排列方式。
Grid 布局
未完待續(xù)…明天補(bǔ)上
參考
HTML5語義化標(biāo)簽屬性-HTML5屬性手冊
All About Floats | CSS-Tricks
清除浮動的四種方式及其原理理解
【前端Talkking】CSS系列——CSS深入理解之a(chǎn)bsolute定位
CSS 彈性盒子布局
Flex 布局教程：語法篇
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
three.js 的簡單實例
三大主件: 渲染器、場景、相機(jī)
思想核心: 相機(jī)獲取到場景內(nèi)顯示的內(nèi)容, 然后再通過渲染器渲染到畫布上面
渲染器: 實例化渲染器的同時生成的一個 Canvas 畫布, 之后將這個畫布添加到了 DOM 當(dāng)中
場景: 場景只是一個容器, 顯示的內(nèi)容需要進(jìn)行添加, 添加一個內(nèi)容稱作一個網(wǎng)格, 每個網(wǎng)格基本上包括幾何體和材質(zhì), 網(wǎng)格也稱之為模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>three</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body onload="init()">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/dat.gui.min.js"></script>
<script>
//聲明一些全局變量
var renderer, camera, scene, geometry, material, mesh, stats, rotate = true;
//初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer(); //實例化渲染器
renderer.setSize(window.innerWidth, window.innerHeight); //設(shè)置寬和高
document.body.appendChild(renderer.domElement); //添加到dom
}
//初始化場景
function initScene() {
scene = new THREE.Scene(); //實例化場景
}
//初始化相機(jī)
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //實例化相機(jī)
camera.position.set(0, 0, 15); //初始化的坐標(biāo)
}
//創(chuàng)建模型
function initMesh() {
geometry = new THREE.BoxGeometry(2, 2, 2); //創(chuàng)建幾何體
material = new THREE.MeshNormalMaterial(); //創(chuàng)建材質(zhì)
mesh = new THREE.Mesh(geometry, material); //創(chuàng)建網(wǎng)格
scene.add(mesh); //將網(wǎng)格添加到場景
}
//運(yùn)行動畫
function animate() {
requestAnimationFrame(animate); //循環(huán)調(diào)用函數(shù)
//判斷是否可以旋轉(zhuǎn)
if(rotate) {
mesh.rotation.x += 0.01; //每幀網(wǎng)格模型的沿x軸旋轉(zhuǎn)0.01弧度
mesh.rotation.y += 0.02; //每幀網(wǎng)格模型的沿y軸旋轉(zhuǎn)0.02弧度
}
stats.update(); //更新性能檢測框
renderer.render(scene, camera); //渲染界面
}
//性能檢測框
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//創(chuàng)建調(diào)試框
function initGui() {
//控制參數(shù)初始值
controls = {
positionX: 0,
positionY: 0,
positionZ: 0,
rotate: true
};
gui = new dat.GUI(); //實例化對象
gui.add(controls, "positionX", -10, 10).onChange(updatePosition);
gui.add(controls, "positionY", -5, 5).onChange(updatePosition);
gui.add(controls, "positionZ", -10, 10).onChange(updatePosition);
function updatePosition() {
mesh.position.set(controls.positionX, controls.positionY, controls.positionZ);
}
gui.add(controls, "rotate").name("旋轉(zhuǎn)").onChange(function(e) {
rotate = e;
});
}
//初始化函數(shù)，頁面加載完成是調(diào)用
function init() {
initRenderer();
initScene();
initCamera();
initMesh();
initStats();
initGui();
animate();
}
</script>
</body>
</html>
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://www.bouu.cn