CSS 盒模型

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

摘要：盒模型盒模型基本概念標(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è)置獲取盒模型對應(yīng)的寬和高僅兼容兼容性好用于獲得頁面中某個元素的左，

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è)置獲取盒模型對應(yīng)的寬和高

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

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

 


    
    
    CSS 盒模型

BFC 「邊距重疊解決方案」

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

License

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115771.html

相關(guān)文章

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

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

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

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

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

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

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

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

LinkedME2016 2019-08-02 10:22 評論0 收藏0
css1：盒模型

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

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

摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內(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í)時間閱讀10分鐘什么是盒模型每一個文檔中，每...

verano 2019-08-02 10:48 評論0 收藏0