CSS 盒模型

wizChen 發(fā)布于2019-08-30 14:06 / 1562人閱讀

摘要：盒模型盒模型基本概念標(biāo)準(zhǔn)模型模型標(biāo)準(zhǔn)模型和模型的區(qū)別標(biāo)準(zhǔn)模型模型二者區(qū)別，前者的寬度是內(nèi)容寬度，后者的寬度是內(nèi)容內(nèi)邊距如何設(shè)置這兩種模型標(biāo)準(zhǔn)模型模型如何設(shè)置獲取盒模型對(duì)應(yīng)的寬和高僅兼容兼容性好用于獲得頁(yè)面中某個(gè)元素的左，

CSS 盒模型

CSS

CSS 盒模型

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

標(biāo)準(zhǔn)模型和IE模型的區(qū)別

標(biāo)準(zhǔn)模型

IE模型

二者區(qū)別，前者的寬度是內(nèi)容寬度，后者的寬度是內(nèi)容+內(nèi)邊距+border

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

- 標(biāo)準(zhǔn)模型:box-sizing: content-box;
- IE模型:box-sizing: border-box;

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

- dom.style.width/height
- dom.currentStyle.width/height 僅IE兼容
- window.getComputedStyle(dom).width/height 兼容性好
- dom.getBoundingClientRect().width/height 用于獲得頁(yè)面中某個(gè)元素的左，上，右和下分別相對(duì)瀏覽器視窗的位置。

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

 


    
    
    CSS 盒模型

BFC 「邊距重疊解決方案」

- BFC的基本概念
   - 塊級(jí)元素格式化上下文 
- BFC的原理
   - 在 BFC 這個(gè)垂直方向的邊距發(fā)生重疊
   - BFC 的區(qū)域不會(huì)與浮動(dòng)元素的box重疊
   - BFC 在頁(yè)面上是個(gè)獨(dú)立的容器
   - 計(jì)算 BFC 高度的時(shí)候，浮動(dòng)元素也會(huì)參與計(jì)算
- 如何創(chuàng)建 BFC
   - 只要設(shè)置了 float，就會(huì)創(chuàng)建
   - position 的值不是 static 或者 relative
   - display 屬性
   - overflow 相關(guān)





    
    
    CSS 盒模型
    
    



    
        
        
    

    
    
        
        1
        
        
            2
        
        3
    

    
    
        
        
        
    
    
    
    
        
        我是浮動(dòng)元素

License

可以拷貝、轉(zhuǎn)發(fā)，但是必須提供原作者信息，同時(shí)也不能將本項(xiàng)目用于商業(yè)用途。

GPU云服務(wù)器云服務(wù)器盒模型盒模型html嗎簡(jiǎn)述html盒模型盒遙控

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

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

相關(guān)文章

深入css布局 (1) — 盒模型 & 元素分類

摘要：深入布局盒模型元素分類在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。從元素的布局特性來(lái)分，主要可以分為三類元素塊級(jí)元素，行內(nèi)元素，行內(nèi)塊級(jí)元素。行內(nèi)級(jí)元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們...

ky0ncheng 2019-04-23 13:43 評(píng)論0 收藏0
深入css布局(1) — 盒模型 & 元素分類

摘要：深入布局盒模型元素分類在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。規(guī)定元素和屬性是包含元素的邊框內(nèi)邊距內(nèi)容的。后來(lái)微軟也慢慢轉(zhuǎn)向了的標(biāo)準(zhǔn)，在以后支持了標(biāo)準(zhǔn)盒模型。行內(nèi)級(jí)元素屬性取的元素。深入css布局（1）—— 盒模型 & 元素分類 ????在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重...

blankyao 2019-08-29 15:25 評(píng)論0 收藏0
【快速入門系列】CSS盒模型基礎(chǔ)

摘要：引言盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。一什么是盒模型我們首先來(lái)看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。引言 CSS盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將margin、border、padding、content等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。一、什么是...

Code4App 2019-08-29 15:20 評(píng)論0 收藏0
【快速入門系列】CSS盒模型基礎(chǔ)

摘要：引言盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。一什么是盒模型我們首先來(lái)看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。引言 CSS盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將margin、border、padding、content等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。一、什么是...

LinkedME2016 2019-08-02 10:22 評(píng)論0 收藏0
css1：盒模型

摘要：最近工作中有機(jī)會(huì)復(fù)習(xí)一下的基本知識(shí)，那么先從的盒模型開始吧，因?yàn)檫@是當(dāng)時(shí)進(jìn)現(xiàn)在這家公司筆試的第一題怎么把盒模型變成標(biāo)準(zhǔn)盒模型嗯，有辦法，就可以啦。具體參見鏈接描述常見的盒模型分兩類怪異盒模型和標(biāo)準(zhǔn)盒模型，兩種盒模型有著很大的不同。最近工作中有機(jī)會(huì)復(fù)習(xí)一下css的基本知識(shí)，那么先從css的盒模型開始吧，因?yàn)檫@是當(dāng)時(shí)進(jìn)現(xiàn)在這家公司筆試的第一題：怎么把IE盒模型變成標(biāo)準(zhǔn)盒模型？嗯，有辦法，...

TalkingData 2019-08-30 10:59 評(píng)論0 收藏0
十分鐘復(fù)習(xí)CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間閱讀10分鐘什么是盒模型每一個(gè)文檔中，每...

verano 2019-08-02 10:48 評(píng)論0 收藏0