国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

面試官：談?wù)勀銓?CSS 盒模型的認識?（你確定會？）

Channe / 3148人閱讀

摘要：從上圖可以看到盒子模型的范圍也包括，和標(biāo)準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學(xué)習(xí)者

題目：談?wù)勀銓?CSS 盒模型的認識

涉及知識點(層層遞進):

基本概念：標(biāo)準模型+ IE模型(區(qū)別)

CSS如何設(shè)置這兩種模型

JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高

實例題(根據(jù)盒模型解釋邊距重疊)

BFC(邊距重疊解決方案)

CSS盒模型 1. 基本概念：標(biāo)準模型+ IE模型

從上圖可以看到標(biāo)準 W3C 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。


從上圖可以看到 IE 盒子模型的范圍也包括 margin、border、padding、content，和標(biāo)準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

2. CSS如何設(shè)置這兩種模型 
box-sizing:conent-box;
box-sizing:border-box;
3.JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高 
dom.style.width/height
dom.currentStyle.width/height  (ie支持)
window.getComputedStyle(dom).width/height;
dom.getBoundingClientRect().width/height;
4. 實例題(根據(jù)盒模型解釋邊距重疊)

如上圖:有兩個元素其中子元素高度為100px,子元素與父元素的上邊距為 10px,求父元素的實際高度？

答案:說100px 對，說110 也對，為什么捏？這個要看父元素的盒模型要怎么設(shè)置的，上代碼演示咯，注意看噢：

運行效果：

上圖證明 100px 是對的。

接著我們給元素加個 overflow:hidden,然后在看效果：

你會發(fā)現(xiàn)這時高度為 110px, 這時大家可能會疑問,為什么給父級元素設(shè)置一個 overflow:hidden以后，它的高度就成 110 呢，這塊的基本原理是啥呢，咋就這樣呢？說這個之前，先引用一個知識點：

上面代碼是父子元素邊距重疊，那么還有兩種情況邊距重疊就是，一種是兄弟元素，就是兩個 div 挨著，每個都上邊距或者下邊距，那么重疊的原則就是取最大值。

來回答上面問題：給父級加了 overflow:hidden,其實就是給父級元素創(chuàng)建一個BFC(塊級格式化上下文)，那什么是BFC，請看下一個話。

5. BFC(邊距重疊解決方案)

BFC 的基本概念

BFC 的原理

如何創(chuàng)建 BFC

BFC使用場景

BFC 的基本概念

Block Formatting Context, 塊級格式化上下文，一個獨立的塊級渲染區(qū)域，該區(qū)域擁有一套渲染規(guī)格來約束塊級盒子的布局，且與區(qū)域外部無關(guān)。

BFC 的原理

BFC 這個元素的垂直的邊距會發(fā)生重疊

BFC 的區(qū)域不會與浮動元素的 float 重疊

獨立的容器，內(nèi)外元素互不影響

計算 BFC 高度，浮動元素也參與計算

如何創(chuàng)建 BFC

float 不為none的時候

position 不為 static 或者 relative 的時候

display 與 table 相關(guān)的時候

overflow 為auto, hidden 的時候

BFC使用場景
場景一
  


  

    
1

    
2

    
3

]

如上圖，我們給每個p 設(shè)置上邊距5， 下25 結(jié)果從第二個起來它的上邊距，下邊距都是25 而不是 30，這個就是邊距重疊問題，那如何消除這個問題呢？

解:就是給子元素加個一個父級元素，讓你能元素創(chuàng)建一個 BFC，如下：

運行效果如圖:

場景二

運行效果：

從運行效果可以發(fā)現(xiàn)，當(dāng)右側(cè)增高的時候會侵入左側(cè)的占位，這個是float的特性，顯示這個不符合我們左右布局的目的，那怎么辦呢？其實很簡單，就是給右側(cè)的元素創(chuàng)建一個 BFC,如下：

運行效果：

場景三（清除浮動的原理）
  


  

    
我的浮動的小智

運行效果：

可以看出父級元素的高度為0，這是為什么呀？

這是因為 float 導(dǎo)致了元素的坍塌，所以父級元素的高度為0，這時我們給父級元素創(chuàng)建一個 BFC，就能解決問題。

運行效果：

以上就是 BFC的清除浮動原理。

愿你成為終身學(xué)習(xí)者

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108071.html

相關(guān)文章

  • 面試官：談?wù)?/em>你對 CSS 盒模型的認識?（你確定會？）

    摘要：從上圖可以看到盒子模型的范圍也包括，和標(biāo)準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學(xué)習(xí)者 題目：談?wù)勀銓?CSS 盒模型的認識 涉及知識點(層層遞進): 基本概念：標(biāo)準模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高 實例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

    CocoaChina 評論0 收藏0

  • 面試官：談?wù)?/em>你對 CSS 盒模型的認識?（你確定會？）

    摘要：從上圖可以看到盒子模型的范圍也包括，和標(biāo)準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學(xué)習(xí)者 題目：談?wù)勀銓?CSS 盒模型的認識 涉及知識點(層層遞進): 基本概念：標(biāo)準模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高 實例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

    mengera88 評論0 收藏0

  • 前端 CSS 面試大綱

    摘要：比如說預(yù)處理器，組件化，工程化，兼容性處理等方面，這些主要是基于自己的開發(fā)經(jīng)驗業(yè)界流行技術(shù)方案進行準備。但是在開始談面試前我想先提出一個概念學(xué)霸面試模型學(xué)校的學(xué)習(xí)和公司的工作有很多相似的地方。所以對于面試，請參考上學(xué)那會兒你們班學(xué)霸的姿勢。 背景 參加完 廈門第四屆CSS Conf 后，讓我對 CSS 產(chǎn)生了新的思考。CSS 是前端必須熟練掌握并保持持續(xù)關(guān)注的技術(shù)，但是我又不想在 CS...

    mating 評論0 收藏0

  • 前端面試寶典

    摘要：優(yōu)雅降級觀點優(yōu)雅降級觀點認為應(yīng)該針對那些最高級最完善的瀏覽器來設(shè)計網(wǎng)站。面試官希望聽到是。在前端構(gòu)建中應(yīng)該考慮微格式嗎微格式是一種讓機器可讀的語義化詞匯的集合，是結(jié)構(gòu)化數(shù)據(jù)的開放標(biāo)準。 一、HTML和CSS 你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么?IE: trident內(nèi)核Firefox：gecko內(nèi)核Safari:webkit內(nèi)核Opera:以前是presto內(nèi)核...

    ChanceWong 評論0 收藏0

發(fā)表評論

0條評論

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