成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

扯一下似乎被遺忘的盒模型

Barry_Ng / 1092人閱讀

摘要:不過想想,現(xiàn)在都讓微軟給退下了,還有多少呢。接著就是要提到的一點,盒模型的計算方式,標準方式和模式是不同的,不知道又想知道的同學請問谷哥或者度娘吧,記得幾年前我那本破書上也又提到,還做了一些測試。扯遠了,盒模型大概的情況就是這樣。

前段時間為了組里在擴充人員,在面試的過程中有過幾次扯到“盒模型”這個東西。對于“盒模型”以前是經(jīng)常提到,現(xiàn)在被CSS3的風頭給蓋下去了,已經(jīng)沒多少人去講“盒模型”,也導致了很多了現(xiàn)在根本不知道什么是盒模型。

本來呢,我想從頭跟大家一起溫習一下盒模型,結(jié)果自己做了一些demo以及翻閱總結(jié)了一些資料之后,放棄了這個想法。從最簡單的方面來說,盒模型就是下面這個圖的東西,大家在瀏覽器的開發(fā)者工具中都可以見到。

那我還說什么呢,好像真沒什么說的,在w3c網(wǎng)站上也有介紹,上面這張圖就是從w3c上拿的,地址是 http://www.w3.org/TR/CSS2/box.html。

在IE瀏覽器中,尤其是IE6,如果一個不小心你就有可能會觸發(fā)一個叫quirks模式,導致盒子計算不對,然后又不能margin:0 auto;居中。怎么觸發(fā)這個quirks模式呢,主要就是doctype文檔聲明不是在第一行(前面有其他字符),那就觸發(fā)了。不過想想,現(xiàn)在XP都讓微軟給退下了,IE6還有多少呢。

接著就是要提到的一點,盒模型的計算方式,標準方式和quirks模式是不同的,不知道又想知道的同學請問谷哥或者度娘吧,記得幾年前我那本破書上也又提到,還做了一些測試。

扯遠了,盒模型大概的情況就是這樣。然后現(xiàn)在CSS3的到來,引入了一個box-sizing,這個屬性又三個屬性值content-boxpadding-box、border-box,對于這三個屬性值,F(xiàn)F都是支持的,表現(xiàn)效果也稍有不同,大家可以看后面我給出的demo效果,也可以自己寫代碼測試,這里我只是提一下而已。

最后要提的是,微軟真的很厲害,現(xiàn)在大家用的box-sizing: border-box;其實就是IE的quirks模式啊~

幾個demo地址:

http://www.linxz.de/demo/box%20model/box%20model.html

http://www.linxz.de/demo/box%20model/box%20model%20[padding100].html

http://www.linxz.de/demo/box%20model/box%20model%20[quirks].html

http://www.linxz.de/demo/box%20model/box%20model%20[quirks][padding100].html

http://www.linxz.de/demo/box%20model/box-sizing%20[border-box].html

http://www.linxz.de/demo/box%20model/box-sizing%20[content-box].html

http://www.linxz.de/demo/box%20model/box-sizing%20[padding-box].html

demo就這幾個,具體的效果就不一一羅列,IE呢如果支持box-sizing的話效果應(yīng)該是有的,如果不支持那就肯定無視了,采用標準模式,因為代碼第一行是采用標準的doctype聲明。

需要說明的是,box-sizing: padding-box;在PC端FF里測試過是OK的,其他效果又興趣的同學請自測。

網(wǎng)絡(luò)上一點點的參考資料

這些資料在谷哥上搜索box model會出來很多,我就隨便取了排在前面的幾個,又興趣的可以看看,看不懂的請找度娘來協(xié)助翻譯。

http://www.w3.org/TR/CSS2/box.html

https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

http://css-tricks.com/the-css-box-model/

http://css-tricks.com/box-sizing/

http://quirksmode.org/css/user-interface/boxsizing.html

最后

盒模型雖然現(xiàn)在很少遇到quirks模式,不過在IE10之類瀏覽器中還是可以選擇相對應(yīng)的文檔模式的,稍微了解一下也總是可以的。就算不去了解這個,那就知道一下box-sizing這個也可以。

很不負責的廢話完畢,發(fā)覺現(xiàn)在真的沒有以前那股沖勁了,看著博客上好久沒更新跟技術(shù)有關(guān)的東西,又怕對不起這個易聯(lián)主機和linxz.de域名,就稍微折騰一點吧。

五花肉妹子說,這個博客要更新啊,所以我就把前幾天的東西搬到這里來了,不知道會不會被人噴~!好怕~!

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/110831.html

相關(guān)文章

  • 深度解析LSTM神經(jīng)網(wǎng)絡(luò)的設(shè)計原理

    摘要:而從數(shù)學上看的話,更是短時記憶了,因為梯度流經(jīng)的時候,經(jīng)歷的是的連環(huán)相乘的路徑在輸入輸出門關(guān)閉前,顯然如前邊的數(shù)學證明中所述,這樣會發(fā)生梯度爆炸和 引人入勝的開篇:想要搞清楚LSTM中的每個公式的每個細節(jié)為什么是這樣子設(shè)計嗎?想知道simple RNN是如何一步步的走向了LSTM嗎?覺得LSTM的工作機制看不透?恭喜你打開了正確的文章!?前方核彈級高能預(yù)警!本文信息量非常大,文章長且思維連貫...

    jay_tian 評論0 收藏0
  • 如果你還沒搞懂LSTM 網(wǎng)絡(luò),那本文絕對值得一看

    摘要:有能力對元胞狀態(tài)添加或者刪除信息,這種能力通過一種叫門的結(jié)構(gòu)來控制。一個有個這種門,來保護和控制元胞狀態(tài)。輸出將會基于目前的元胞狀態(tài),并且會加入一些過濾。同時也將元胞狀態(tài)和隱狀態(tài)合并,同時引入其他的一些變化。 循環(huán)神經(jīng)網(wǎng)絡(luò)(RNN)人們的每次思考并不都是從零開始的。比如說你在閱讀這篇文章時,你基于對前面的文字的理解來理解你目前閱讀到的文字,而不是每讀到一個文字時,都拋棄掉前面的思考,從頭開始...

    shadowbook 評論0 收藏0
  • 神奇!只有遺忘門的LSTM性能優(yōu)于標準LSTM

    摘要:本論文研究只有遺忘門的話會怎樣,并提出了,實驗表明該模型的性能優(yōu)于標準。這里我們發(fā)現(xiàn),一個只有遺忘門且?guī)в衅庙椀陌姹静粌H能節(jié)省計算成本,而且在多個基準數(shù)據(jù)集上的性能優(yōu)于標準,能與一些當下較好的模型競爭。 本論文研究 LSTM 只有遺忘門的話會怎樣,并提出了 JANET,實驗表明該模型的性能優(yōu)于標準 LSTM。1.介紹優(yōu)秀的工程師確保其設(shè)計是實用的。目前我們已經(jīng)知道解決序列分析問題較好的方式...

    Arno 評論0 收藏0
  • CSS中盒模型的理解

    摘要:如圖為了方便大家理解和嘗試,我寫了一個小放上來方便大家嘗試顯示盒模型盒模型計算規(guī)則元素框的總寬度元素的的左邊距和右邊距的值的左邊距和右邊距的值的左右寬度元素框的總高度元素的的上下邊距的值的上下邊距的值的上下寬度。今天突然看到一篇關(guān)于CSS中盒模型的文章,忽然覺得自己竟然遺忘了很多小的地方,所以寫一篇文章來記憶一下 (摘抄于千與千尋寫的CSS盒子模型理解,并在自己基礎(chǔ)上添加了一些東西,希望更完...

    shmily 評論0 收藏0
  • SegmentFault 社區(qū)訪談 | Linxz:只會寫 CSS 不會寫 JS 的“偽”前端

    摘要:所以,現(xiàn)在的我是一個只會不會寫的偽前端。技術(shù)升華環(huán)節(jié)如何理解你的微博簡介一個只會寫不會寫的偽前端工程師你覺得和學習起來各有什么難點呢微博我好久沒去碰了,其實現(xiàn)在應(yīng)該是寫一個連都不會寫,更不會寫的偽前端工程師。 showImg(https://segmentfault.com/img/bVT0Y4?w=900&h=385); 上周沒和大家見面,是去邀請大佬來訪談了(///▽///)社區(qū)訪...

    libxd 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<