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

資訊專欄INFORMATION COLUMN

面試官：談?wù)勀銓?duì) CSS 盒模型的認(rèn)識(shí)?（你確定會(huì)？）

CocoaChina / 1630人閱讀

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

題目：談?wù)勀銓?duì) CSS 盒模型的認(rèn)識(shí)

涉及知識(shí)點(diǎn)(層層遞進(jìn)):

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

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

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

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

BFC(邊距重疊解決方案)

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

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


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

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

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

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

運(yùn)行效果：

上圖證明 100px 是對(duì)的。

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

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

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

來(lái)回答上面問(wèn)題：給父級(jí)加了 overflow:hidden,其實(shí)就是給父級(jí)元素創(chuàng)建一個(gè)BFC(塊級(jí)格式化上下文)，那什么是BFC，請(qǐng)看下一個(gè)話。

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

BFC 的基本概念

BFC 的原理

如何創(chuàng)建 BFC

BFC使用場(chǎng)景

BFC 的基本概念

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

BFC 的原理

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

BFC 的區(qū)域不會(huì)與浮動(dòng)元素的 float 重疊

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

計(jì)算 BFC 高度，浮動(dòng)元素也參與計(jì)算

如何創(chuàng)建 BFC

float 不為none的時(shí)候

position 不為 static 或者 relative 的時(shí)候

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

overflow 為auto, hidden 的時(shí)候

BFC使用場(chǎng)景
場(chǎng)景一
  


  

    
1

    
2

    
3

]

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

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

運(yùn)行效果如圖:

場(chǎng)景二

運(yùn)行效果：

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

運(yùn)行效果：

場(chǎng)景三（清除浮動(dòng)的原理）
  


  

    
我的浮動(dòng)的小智

運(yùn)行效果：

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

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

運(yùn)行效果：

以上就是 BFC的清除浮動(dòng)原理。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113459.html

相關(guān)文章

  • 面試官：談?wù)?/em>你對(duì) CSS 盒模型的認(rèn)識(shí)?（你確定會(huì)？）

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

    Channe 評(píng)論0 收藏0

  • 面試官：談?wù)?/em>你對(duì) CSS 盒模型的認(rèn)識(shí)?（你確定會(huì)？）

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

    mengera88 評(píng)論0 收藏0

  • 前端 CSS 面試大綱

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

    mating 評(píng)論0 收藏0

  • 前端面試寶典

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

    ChanceWong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<