整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
元素的定位屬性主要包括定位模式和邊偏移兩部分。
在CSS中，position屬性用于定義元素的定位模式，其基本語(yǔ)法格式如下：
選擇器{position:屬性值;}position屬性的常用值：
也就說(shuō)，以后定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
靜態(tài)定位是所有元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置。所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。
上面的話翻譯成白話：就是網(wǎng)頁(yè)中所有元素都默認(rèn)的是靜態(tài)定位哦！其實(shí)就是標(biāo)準(zhǔn)流的特性。
在靜態(tài)定位狀態(tài)下，無(wú)法通過(guò)邊偏移屬性（top、bottom、left或right）來(lái)改變?cè)氐奈恢谩?/p>
靜態(tài)定位唯一的用處： 就是取消定位。position: static;
相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對(duì)位置。
對(duì)元素設(shè)置相對(duì)定位后，可以通過(guò)邊偏移屬性改變?cè)氐奈恢茫撬谖臋n流中的位置仍然保留。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 100px; height: 100px; background-color: red; position: relative; left: 120px; top: 100px; } .dv2 { width: 100px; height: 100px; background-color: blue; }</style></head><body> <div class="dv1"></div> <div class="dv2"></div></body></html>注意：
就是說(shuō)，相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對(duì)待它。（相對(duì)定位不脫標(biāo)）
如果說(shuō)浮動(dòng)的主要目的是 讓多個(gè)塊級(jí)元素一行顯示，那么定位的主要價(jià)值就是移動(dòng)位置， 讓盒子到我們想要的位置上去。
如果文檔可滾動(dòng)，絕對(duì)定位元素會(huì)隨著它滾動(dòng)，因?yàn)樵刈罱K會(huì)相對(duì)于正常流的某一部分定位。
當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。
絕對(duì)定位最重要的一點(diǎn)是，它可以通過(guò)邊偏移移動(dòng)位置，但是它完全脫標(biāo)，完全不占位置。
若所有父元素(祖先)都沒(méi)有定位，以瀏覽器當(dāng)前屏幕為準(zhǔn)對(duì)齊(document文檔)，相對(duì)于body。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 100px; height: 100px; background-color: blue; position: absolute; left: 130px; top: 50px; } .dv2 { width: 120px; height: 120px; background-color: red; }</style></head><body> <div class="dv1"></div> <div class="dv2"></div></body></html>若所有父元素(祖先)有定位，依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素（祖先）進(jìn)行定位。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 120px; height: 120px; background-color: blue; position: absolute; } .dv2 { width: 80px; height: 80px; background-color: red; position: absolute; top: 0; }</style></head><body> <div class="dv1"> <div class="dv2"></div> </div></body></html>子絕父相
這句話的意思是子級(jí)是絕對(duì)定位的話，父級(jí)要用相對(duì)定位。
絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素（祖先）進(jìn)行定位。就是說(shuō)， 子級(jí)是絕對(duì)定位，父親只要是定位即可（不管父親是絕對(duì)定位還是相對(duì)定位，甚至是固定定位都可以）。但是為什么會(huì)有“子絕父相”這個(gè)詞呢？
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .parent1 { width: 100px; height: 100px; background-color: red; } .parent2 { width: 100px; height: 100px; background-color: pink; position: relative; } .parent3 { width: 100px; height: 100px; background-color: blue; } .child { width: 50px; height: 50px; background-color: green; position: absolute; top: 20px; }</style></head><body> <div class="parent1"></div> <div class="parent2"> <div class="child"></div> </div> <div class="parent3"></div></body></html>因?yàn)樽蛹?jí)是絕對(duì)定位，不會(huì)占有位置， 可以放到父盒子里面的任何一個(gè)地方。
父盒子布局時(shí)，需要占有位置，因此父親只能是相對(duì)定位。
這就是子絕父相的由來(lái)。
絕對(duì)定位的盒子水平/垂直居中
設(shè)置left,top值均為50%,同時(shí)margin-left設(shè)置為絕對(duì)定位元素(要居中的元素)width的一半取負(fù),margin-top設(shè)為其height的一半取負(fù)。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .parent { width: 300px; height: 200px; background-color: blue; position: relative; } .child { width: 100px; height: 70px; background-color: red; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -40px; }</style></head><body> <div class="parent"> <div class="child"></div> </div></body></html>固定定位是絕對(duì)定位的一種特殊形式，類似于 正方形是一個(gè)特殊的 矩形。它以瀏覽器窗口作為參照物來(lái)定義網(wǎng)頁(yè)元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。
當(dāng)對(duì)元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來(lái)定義自己的顯示位置。不管瀏覽器滾動(dòng)條如何滾動(dòng)也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。
固定定位有兩點(diǎn)：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 50px; height: 50px; background-color: red; position: fixed; right: 50px; bottom: 50px; } .dv2 { width: 50px; height: 2000px; background-color: blue; }</style></head><body> <div class="dv1"></div> <div class="dv2"></div></body></html>文公眾號(hào)來(lái)源：01二進(jìn)制 作者：雇個(gè)城管打天下
記得在面試的時(shí)候也被問(wèn)到這題，當(dāng)時(shí)答得并不好，這道題目其實(shí)可以挖掘很多的知識(shí)點(diǎn)出來(lái)，建議閱讀！
前幾天有個(gè)學(xué)妹問(wèn)我為什么在瀏覽器里面輸了網(wǎng)址就會(huì)顯示出來(lái)頁(yè)面，雖然這個(gè)現(xiàn)象很常見(jiàn)，但是要想解釋清楚確實(shí)有些小困難，當(dāng)時(shí)也只是簡(jiǎn)單的回答了她，現(xiàn)在想趁著這個(gè)機(jī)會(huì)好好整理下相關(guān)知識(shí)。整理完才覺(jué)得其實(shí)就和我們?nèi)ヒ粋€(gè)地方找人是一個(gè)道理。所以說(shuō)藝術(shù)源于生活卻又高于生活，技術(shù)同樣如此。
在回答這個(gè)問(wèn)題前， 我們先來(lái)了解下我們平常說(shuō)的那個(gè)網(wǎng)址到底是啥？
網(wǎng)址的學(xué)名叫做統(tǒng)一資源定位符（Uniform Resource Locator， 常縮寫(xiě)為URL）， 我們知道現(xiàn)在的互聯(lián)網(wǎng)其實(shí)就是由眾多資源所構(gòu)成的一張巨大的網(wǎng)， 如何定位那些資源就是靠的URL， 因此我們也可以把URL理解為是網(wǎng)絡(luò)上資源的“門牌號(hào)“， 我們?cè)跒g覽器中輸入網(wǎng)址， 就相當(dāng)于開(kāi)一輛車（瀏覽器）去找一個(gè)地址（URL）
1. 緩存查找
如果你要出門找一個(gè)地方， 第一想法肯定是先想這個(gè)地方你有沒(méi)有去過(guò)， 你要是去過(guò)的話那就不需要問(wèn)人直接過(guò)去就好了。 我們的系統(tǒng)也是這么想的。 當(dāng)你在瀏覽器中輸入了URL之后， 瀏覽器會(huì)先查看 瀏覽器緩存 中有沒(méi)有這個(gè)地址， 如果沒(méi)有那就再去 系統(tǒng)緩存， 如果系統(tǒng)緩存還沒(méi)有， 那就去路由器緩存找， 總之只要緩存中有， 就說(shuō)明有這個(gè)資源， 那瀏覽器直接顯示出來(lái)就好了。
Tips： 這里說(shuō)下 hosts文件 ， hosts 是一個(gè)沒(méi)有擴(kuò)展名的系統(tǒng)文件， 可以用記事本等工具打開(kāi)， 其作用就是將一些常用的網(wǎng)址域名與其對(duì)應(yīng)的IP地址建立一個(gè)關(guān)聯(lián)“數(shù)據(jù)庫(kù)”， 當(dāng)用戶在瀏覽器中輸入一個(gè)需要登錄的網(wǎng)址時(shí)， 系統(tǒng)會(huì)首先自動(dòng)從 hosts 文件中尋找對(duì)應(yīng)的 IP 地址，一旦找到， 系統(tǒng)會(huì)立即打開(kāi)對(duì)應(yīng)網(wǎng)頁(yè)， 如果沒(méi)有找到， 則系統(tǒng)會(huì)再將網(wǎng)址提交 DNS 域名解析服務(wù)器進(jìn)行IP地址的解析。 需要注意的是， hosts文件配置的映射是靜態(tài)的， 如果網(wǎng)絡(luò)上的計(jì)算機(jī)更改了請(qǐng)及時(shí)更新IP地址， 否則將不能訪問(wèn)。
2. DNS 解析
如果你認(rèn)得去那個(gè)地址的路自然是最好， 那如果你根本就沒(méi)去過(guò)那咋辦？ 肯定會(huì)有人說(shuō)導(dǎo)航， 但并不是所有的地方都是導(dǎo)航能搜到的， 這個(gè)時(shí)候我們自然而然就會(huì)想著去問(wèn)路人了。 瀏覽器也是這樣的， 如果在本地緩存中沒(méi)有找到想要的資源， 那就只能去其他網(wǎng)絡(luò)上的機(jī)器中尋找我想要的資源了。 那你怎么知道你要的資源在那臺(tái)機(jī)器上？ 這時(shí)， DNS就橫空出世了。
DNS（Domain Name System， 域名系統(tǒng)），DNS解析的過(guò)程就是尋找哪臺(tái)機(jī)器上有你需要資源的過(guò)程。當(dāng)你在瀏覽器中輸入一個(gè)地址時(shí)， 例如 www.baidu.com， 其實(shí)這段URL并不是真正意義上的地址。 互聯(lián)網(wǎng)上每一臺(tái)計(jì)算機(jī)的唯一標(biāo)識(shí)是它的 IP 地址（比如127.0.0.1就是我們本機(jī)的 IP 地址）， 但是 IP 地址并不方便記憶（畢竟都是很長(zhǎng)的數(shù)字串）， 所以也就出現(xiàn)了網(wǎng)址（URL）這個(gè)玩意了， 目的就是為了方便普通用戶去尋找網(wǎng)絡(luò)上的其他計(jì)算機(jī)。 所以 DNS 實(shí)際上充當(dāng)了一個(gè)翻譯的角色， 將網(wǎng)址翻譯成 IP 地址（就跟我想去南京大學(xué)， 問(wèn)路的那個(gè)人告訴我南京大學(xué)在廣州路上是一個(gè)道理）。
2.1 DNS 解析過(guò)程
DNS解析其實(shí)是一個(gè)遞歸查詢的過(guò)程：
在上述過(guò)程中， 首先在本地域名服務(wù)器中查詢 IP 地址， 如果沒(méi)有找到， 本地域名服務(wù)器會(huì)向根域名服務(wù)器發(fā)送一個(gè)請(qǐng)求， 如果根域名服務(wù)器也不存在該域名時(shí)， 本地域名會(huì)向com頂級(jí)域名服務(wù)器發(fā)送一個(gè)請(qǐng)求， 依次類推下去。 直到最后找到目標(biāo)網(wǎng)址所對(duì)應(yīng)的 IP， 并將其緩存到本地， 以供下次使用。
2.2 DNS負(fù)載均衡
在講DNS負(fù)載均衡前先來(lái)看張圖片：
看到這可能就會(huì)有人犯嘀咕了， 我們不是 ping 的同一個(gè)網(wǎng)址嗎， 為啥兩次IP都不一樣啊？ 其實(shí)原因很簡(jiǎn)單， 如果每次都一樣是否說(shuō)明你請(qǐng)求的資源都位于同一臺(tái)機(jī)器上面， 那么這臺(tái)機(jī)器需要多高的性能和儲(chǔ)存才能滿足億萬(wàn)請(qǐng)求呢？ 其實(shí)真實(shí)的互聯(lián)網(wǎng)世界背后存在成千上百臺(tái)服務(wù)器， 大型的網(wǎng)站甚至更多。 但是在用戶的眼中， 它需要的只是處理他的請(qǐng)求， 哪臺(tái)機(jī)器處理請(qǐng)求并不重要。 DNS可以返回一個(gè)合適的機(jī)器的IP給用戶， 例如可以根據(jù)每臺(tái)機(jī)器的負(fù)載量， 該機(jī)器離用戶地理位置的距離等等， 這種過(guò)程就是DNS負(fù)載均衡， 又叫做DNS重定向。
再來(lái)舉個(gè)例子， 如果你在新街口用地圖搜南京大學(xué)， 返回給你的第一條數(shù)據(jù)可能就是南京大學(xué)鼓樓校區(qū)（因?yàn)榫嚯x最近）， 但如果你是在仙林用地圖搜南京大學(xué)， 返回給你的第一條數(shù)據(jù)就有可能是南京大學(xué)仙林校區(qū)了。 DNS負(fù)載均衡簡(jiǎn)單來(lái)說(shuō)也是這個(gè)道理。
2.3 DNS 污染
DNS 污染（DNS cache pollution）， 又稱域名服務(wù)器緩存投毒（DNS cache poisoning）， 是指一些刻意制造或無(wú)意中制造出來(lái)的域名服務(wù)器數(shù)據(jù)包， 把域名指往不正確的IP地址。
某些網(wǎng)絡(luò)運(yùn)營(yíng)商為了某些目的， 對(duì)DNS進(jìn)行了某些操作， 導(dǎo)致上網(wǎng)的用戶無(wú)法通過(guò)域名取得正確的IP地址。 某些國(guó)家或地區(qū)出于某些目的為了防止某網(wǎng)站被訪問(wèn)， 而且其又掌握部分國(guó)際DNS根目錄服務(wù)器或鏡像， 也會(huì)利用此方法進(jìn)行屏蔽。 （Google、 Facebook等）
至于如果防止DNS污染， 這里只說(shuō)一個(gè)方法就是修改hosts文件， 其他的自行搜索吧。
3. TCP連接
其實(shí)在上面DNS解析的圖中就已經(jīng)有了TCP連接的過(guò)程了：
我們通過(guò)DNS解析獲取到了網(wǎng)址所對(duì)應(yīng)的IP地址后， 便需要發(fā)起TCP連接請(qǐng)求， 這里總共需要三次握手， 具體的過(guò)程就不贅述了， 可以查閱相關(guān)資料， 這里推薦劉欣老師的《TCP/IP 之 大明王朝郵差》， 以及大學(xué)計(jì)算機(jī)網(wǎng)絡(luò)課本里面的TCP相關(guān)章節(jié)。
4. HTTP 請(qǐng)求
握手成功后， 瀏覽器就可以向服務(wù)器發(fā)送http請(qǐng)求了， 請(qǐng)求數(shù)據(jù)包。 發(fā)送HTTP請(qǐng)求的過(guò)程就是構(gòu)建HTTP請(qǐng)求報(bào)文并通過(guò)TCP協(xié)議中發(fā)送到服務(wù)器指定端口(HTTP協(xié)議80/8080, HTTPS協(xié)議443)。HTTP請(qǐng)求報(bào)文是由三部分組成: 請(qǐng)求行,請(qǐng)求報(bào)頭和請(qǐng)求正文。
4.1 請(qǐng)求行
格式如下:
Method RequestURL HTTPVersion CRLF
例如：
GET index . html HTTP / 1.1
常用的方法有: GET,POST,PUT,DELETE,OPTIONS,HEAD。
4.2 請(qǐng)求報(bào)頭
請(qǐng)求報(bào)頭允許客戶端向服務(wù)器傳遞請(qǐng)求的附加信息和客戶端自身的信息。
Tips：客戶端不一定特指瀏覽器， 有時(shí)候也可使用Linux下的CURL命令以及HTTP客戶端測(cè)試工具等。
常見(jiàn)的請(qǐng)求報(bào)頭有: Accept,AcceptCharset,AcceptEncoding,AcceptLanguage,ContentType,Authorization,Cookie,UserAgent等。
上圖是使用Chrome開(kāi)發(fā)者工具截取的對(duì)百度的HTTP請(qǐng)求以及響應(yīng)報(bào)文， 從圖中可以看出， 請(qǐng)求報(bào)頭中使用了Accept, AcceptEncoding, AcceptLanguage, CacheControl, Connection, Cookie等字段。 Accept 用于指定客戶端用于接受哪些類型的信息， AcceptEncoding 與 Accept 類似， 它用于指定接受的編碼方式。Connection 設(shè)置為 Keepalive 用于告訴客戶端本次 HTTP 請(qǐng)求結(jié)束之后并不需要關(guān)閉 TCP 連接， 這樣可以使下次 HTTP 請(qǐng)求使用相同的 TCP 通道， 節(jié)省 TCP 連接建立的時(shí)間。
5. 服務(wù)器響應(yīng)
這部分對(duì)應(yīng)的就是后端工程師眼中的 HTTP。 后端從在固定的端口接收到 TCP 報(bào)文開(kāi)始， 這一部分對(duì)應(yīng)于編程語(yǔ)言中的 socket。 它會(huì)對(duì) TCP 連接進(jìn)行處理， 對(duì) HTTP 協(xié)議進(jìn)行解析， 并按照?qǐng)?bào)文格式進(jìn)一步封裝成 HTTP Request對(duì)象， 供上層使用。 這一部分工作一般是由 Web 服務(wù)器去進(jìn)行， 常用的Web服務(wù)器有 Tomcat, IIS 和 Netty 等等。
HTTP響應(yīng)報(bào)文也是由三部分組成: 狀態(tài)碼, 響應(yīng)報(bào)頭和響應(yīng)報(bào)文。 篇幅原因這里就不詳細(xì)展開(kāi)了。
6. 瀏覽器解析網(wǎng)頁(yè)信息
服務(wù)器返回給瀏覽器的文本信息， 通常是 HTML, CSS, JS, 圖片等文件， 那么瀏覽器是如何對(duì)澤瀉內(nèi)容進(jìn)行渲染呢？ 通常是下面五個(gè)步驟：
不過(guò)這五個(gè)步驟在不同內(nèi)核的瀏覽器中執(zhí)行細(xì)節(jié)是不同的， 想深入了解的可以查閱相關(guān)資料， 這里推薦一篇文章：《瀏覽器渲染頁(yè)面過(guò)程與頁(yè)面優(yōu)化》（https://segmentfault.com/a/1190000010298038）
瀏覽器是一個(gè)邊解析邊渲染的過(guò)程。 首先瀏覽器解析HTML文件構(gòu)建DOM樹(shù)， 然后解析CSS文件構(gòu)建渲染樹(shù)， 等到渲染樹(shù)構(gòu)建完成后， 瀏覽器開(kāi)始布局渲染樹(shù)并將其繪制到屏幕上。
JS的解析是由瀏覽器中的 JS 解析引擎完成的。 JS是單線程運(yùn)行， 也就是說(shuō)， 在同一個(gè)時(shí)間內(nèi)只能做一件事， 所有的任務(wù)都需要排隊(duì)， 前一個(gè)任務(wù)結(jié)束， 后一個(gè)任務(wù)才能開(kāi)始。 但是又存在某些任務(wù)比較耗時(shí)， 如IO讀寫(xiě)等， 所以需要一種機(jī)制可以先執(zhí)行排在后面的任務(wù)， 這就是： 同步任務(wù)(synchronous)和異步任務(wù)(asynchronous)。 JS的執(zhí)行機(jī)制就可以看做是一個(gè)主線程加上一個(gè)任務(wù)隊(duì)列(task queue)。 同步任務(wù)就是放在主線程上執(zhí)行的任務(wù)， 異步任務(wù)是放在任務(wù)隊(duì)列中的任務(wù)。 所有的同步任務(wù)在主線程上執(zhí)行， 形成一個(gè)執(zhí)行棧; 異步任務(wù)有了運(yùn)行結(jié)果就會(huì)在任務(wù)隊(duì)列中放置一個(gè)事件； 腳本運(yùn)行時(shí)先依次運(yùn)行執(zhí)行棧， 然后會(huì)從任務(wù)隊(duì)列里提取事件， 運(yùn)行任務(wù)隊(duì)列中的任務(wù)， 這個(gè)過(guò)程是不斷重復(fù)的， 所以又叫做事件循環(huán)(Event loop)。 如下圖所示：
7. 總結(jié)
當(dāng)上述步驟執(zhí)行完成后我們便可在瀏覽器中看到一個(gè)完整的頁(yè)面了， 總結(jié)下其實(shí)就只有幾步：
其實(shí)簡(jiǎn)單來(lái)看這幾個(gè)過(guò)程并不是很復(fù)雜， 但是每個(gè)步驟都可以深挖出一大堆的知識(shí)， 比如DNS的優(yōu)化、頁(yè)面渲染的優(yōu)化、 HTTPS等等非常多的東西， 這里考慮到篇幅以及科普效果很多東西都一筆帶過(guò)了。
微信公眾號(hào)【程序員喬戈里】 作者喬戈里，斜杠青年，哈工大本碩985 碩士，百度Java 研發(fā)工程師，目前致力于分享求職必備學(xué)習(xí)經(jīng)驗(yàn)、求職心得和成長(zhǎng)感悟/技術(shù)文章。（關(guān)注公眾號(hào)送9000G 考研/python/C++/java/前端/小程序/微信公眾號(hào)/機(jī)器學(xué)習(xí)/人工智能資源）
輯導(dǎo)語(yǔ)：前段時(shí)間，有很多博主因?yàn)镮P屬地問(wèn)題“翻車”，而是否展示IP屬地也引發(fā)了廣大網(wǎng)友的討論。為什么各大平臺(tái)突然集體展示賬號(hào)IP屬地？這項(xiàng)功能有什么意義？本篇文章中，作者給出了答案，我們一起來(lái)看看吧。
最近，各大平臺(tái)網(wǎng)站陸續(xù)公開(kāi)了賬號(hào)IP屬地。對(duì)于這項(xiàng)新的政策，網(wǎng)上主流觀點(diǎn)都持支持態(tài)度。為什么突然間各大平臺(tái)網(wǎng)站很有默契的同時(shí)開(kāi)發(fā)且執(zhí)行了公開(kāi)賬號(hào)IP屬地這項(xiàng)功能，這對(duì)產(chǎn)品設(shè)計(jì)工作會(huì)有怎樣的影響，在這里一站式分享與你。
關(guān)于IP屬地展示，最早提出是為了網(wǎng)絡(luò)言論的實(shí)名化，即通過(guò)展示言論屬地IP來(lái)對(duì)不良網(wǎng)絡(luò)言論行為進(jìn)行威懾，達(dá)到清朗網(wǎng)絡(luò)環(huán)境的目的。
所以國(guó)家互聯(lián)網(wǎng)信息辦公室在2010年10月提出《互聯(lián)網(wǎng)用戶賬號(hào)名稱信息管理規(guī)定（征求意見(jiàn)稿）》，其中十二條明確規(guī)定：
“互聯(lián)網(wǎng)用戶賬號(hào)服務(wù)平臺(tái)應(yīng)當(dāng)以顯著方式，在互聯(lián)網(wǎng)用戶賬號(hào)信息頁(yè)面展示賬號(hào)IP地址屬地信息。境內(nèi)互聯(lián)網(wǎng)用戶賬號(hào)IP地址屬地信息需標(biāo)注到省（區(qū)、市），境外賬號(hào)IP地址屬地信息需標(biāo)注到國(guó)家（地區(qū)）。”
但這里需要注意，這是一個(gè)征求意見(jiàn)稿，所以并不是本次執(zhí)行的法規(guī)依據(jù)。
通俗地講就是問(wèn)問(wèn)大家意見(jiàn)，這樣規(guī)定行不行，如果覺(jué)得不行那再修改修改。
雖然不是執(zhí)行文件，但是也表達(dá)了國(guó)家對(duì)IP展示方案的意向。
而此次各大平臺(tái)突然開(kāi)發(fā)展示賬戶IP屬地的真正原因是今年4月中央網(wǎng)信辦開(kāi)展的“清朗·網(wǎng)絡(luò)暴力專項(xiàng)治理行動(dòng)”
總而言之，目前并未有強(qiáng)制的法規(guī)要求平臺(tái)系統(tǒng)對(duì)賬號(hào)做地域展示，目前的展示主要也是用于響應(yīng)國(guó)家關(guān)于網(wǎng)絡(luò)環(huán)境的相關(guān)號(hào)召，或者是一種試運(yùn)行狀態(tài)。
既然沒(méi)有要求，那知道這些對(duì)我們是否還有意義？
既然主流的內(nèi)容平臺(tái)都已經(jīng)上線此功能，那么在各種需求會(huì)議上和日常工作交流中就有可能會(huì)被不經(jīng)意地提及。
雖然不是復(fù)雜的需求，但也是需求，是需求就需要處理。
而全面了解此功能的背景與現(xiàn)狀是我們從容應(yīng)對(duì)需求的基礎(chǔ)，同時(shí)也能表現(xiàn)自己的產(chǎn)品全面性與專業(yè)性，因?yàn)楣δ苄。匀菀滓驍U(kuò)展的回答制造驚喜。
不知道大家是否有這樣的經(jīng)歷，在規(guī)劃產(chǎn)品或者項(xiàng)目的時(shí)候，難免會(huì)遇到一道填空題，一道關(guān)于風(fēng)險(xiǎn)的填空題。
填的太真實(shí)，影響項(xiàng)目立項(xiàng)或者推進(jìn)，填的太敷衍，容易被diss說(shuō)沒(méi)經(jīng)驗(yàn)；假如選擇抄取前輩的“答案”，又擔(dān)心前輩變成評(píng)審會(huì)的參與方。
而現(xiàn)在就有一個(gè)現(xiàn)成的答案，既能政治正確又沒(méi)啥成本。
說(shuō)到成本，我想為了各項(xiàng)合規(guī)而開(kāi)發(fā)的功能中，展示IP是相對(duì)成本小的一個(gè)功能，甚至大部分系統(tǒng)的會(huì)員數(shù)據(jù)里面本來(lái)就擁有IP數(shù)據(jù)，甚至還有定位數(shù)據(jù)，而且還不用改變業(yè)務(wù)流程。
小成本功能是能很好地增加產(chǎn)品的靈活性。
關(guān)于網(wǎng)絡(luò)環(huán)境治理，只會(huì)越來(lái)越規(guī)范。
關(guān)于IP屬地展示規(guī)定的試水，目前的主流觀點(diǎn)是持支持態(tài)度，所以大概率我們還是會(huì)迎來(lái)需要強(qiáng)制展示IP歸屬地的那一天，就像現(xiàn)在的域名備案一樣成為常態(tài)化硬性要求。
我整理了、知乎、貼吧、小紅書(shū)和快手的功能對(duì)比，總結(jié)下來(lái)主要是在三個(gè)位置做IP屬地的展示，分別是【作者主頁(yè)】、【文章頁(yè)】、【評(píng)論區(qū)】，詳細(xì)情況我已分別對(duì)上述各個(gè)平臺(tái)做了截圖介紹。
同樣是展示功能，各個(gè)平臺(tái)對(duì)于展示這件事的解釋有各自的理解：
IP屬地展示的數(shù)據(jù)源是來(lái)自于系統(tǒng)對(duì)用戶發(fā)生行為的時(shí)候獲取的IP地址數(shù)據(jù)進(jìn)行展示，所以主要分為兩種：
（1）博主IP
博主IP位置數(shù)據(jù)：根據(jù)賬號(hào)注冊(cè)時(shí)的IP屬地進(jìn)行存儲(chǔ)展示，即在博主注冊(cè)但未發(fā)表作品的狀態(tài)下展示對(duì)應(yīng)的IP位置，后期根據(jù)發(fā)布作品時(shí)的IP位置做對(duì)應(yīng)的統(tǒng)計(jì)得出博主IP位置。主要參考的邏輯是在設(shè)定的時(shí)間段內(nèi)作品發(fā)布時(shí)的IP統(tǒng)計(jì)和注冊(cè)IP屬地加權(quán)計(jì)算取值。
（2）作品和評(píng)論IP
用戶作品和評(píng)論的IP來(lái)源則是根據(jù)發(fā)布時(shí)的實(shí)際IP地址歸屬獲取并展示。
（1）博主IP
關(guān)于博主IP，目前看下來(lái)大家主要是以完成功能為主，但是值得參考的是快手的實(shí)踐。
快手將用戶自己設(shè)置的地址與IP地址結(jié)合，在主頁(yè)面是展示省份+城市。
但是這個(gè)數(shù)據(jù)其實(shí)是博主自己設(shè)置的數(shù)據(jù)，點(diǎn)擊進(jìn)去則會(huì)展示IP地址與博主自己設(shè)置的地址。
正常情況下用戶查看時(shí)兩個(gè)數(shù)據(jù)是對(duì)應(yīng)的，如果有不誠(chéng)實(shí)的情況，則也暴露的很明顯。而且其他的平臺(tái)主要還是在博主信息區(qū)對(duì)地址做展示。
（2）作品IP
目前看到的所有的作品詳情頁(yè)關(guān)于IP地址的展示都是不明顯的，但是這很合理，因?yàn)橛脩暨M(jìn)來(lái)看的是內(nèi)容又不是定位信息。
對(duì)于文章類的就兩個(gè)思路，一種是在文章頭部展示，另一種是在文章尾部做展示，基本做到頁(yè)面和諧即可。
（3）評(píng)論IP
關(guān)于評(píng)論IP屬地的展示，各個(gè)平臺(tái)的展示思路高度一致，在原來(lái)頁(yè)面展示評(píng)論時(shí)間的后面直接追加對(duì)應(yīng)的IP屬地，省力又和諧。
IP屬地的展示深度只能到省份級(jí)別，直轄市則展示城市名。
用戶解釋文案：
截止至我發(fā)文的時(shí)間，IP屬地展示功能了解即可，如果未來(lái)剛好遇到的真的要上這個(gè)功能，那希望也能為你提供一點(diǎn)點(diǎn)幫助。
參考資料：
1、中央網(wǎng)信辦：http://www.cac.gov.cn/2022-04/24/c_1652422681278782.html
2、國(guó)家互聯(lián)網(wǎng)信息辦公室官網(wǎng)：http://www.cac.gov.cn/2021-10/26/c_1636843202454310.html
本文由 @瑞見(jiàn)釘錘 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于CC0協(xié)議
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
