css盒模型

cod7ce 發(fā)布于2019-08-30 15:55 / 3197人閱讀

摘要：一什么是盒模型說(shuō)到盒模型大家肯定都能想到但是盒模型分為兩種標(biāo)準(zhǔn)盒模型模型，他們最主要的區(qū)別在于寬高的計(jì)算。

一：什么是盒模型

說(shuō)到盒模型大家肯定都能想到content,padding,border,margin
但是盒模型分為兩種：標(biāo)準(zhǔn)盒模型 IE模型，他們最主要的區(qū)別在于寬高的計(jì)算。
1.標(biāo)準(zhǔn)盒模型的寬高不包含padding和border
2.IE模型的寬高是padding和border的總和

設(shè)置這兩種模式的方式也很簡(jiǎn)單

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

二：js獲取盒模型的寬高

1.dom.style.width/height 此方法只適用于內(nèi)聯(lián)元素
2.dom.currentStyle.width/height此方法解決了1的問(wèn)題，但是只適用于IE
3.window.getComputedStyle(dom).width/height兼容性好，適用于大多數(shù)瀏覽器
4.dom.getBoundingClientRect().widht/height

要注意的是：dom.getBoundingClientRect()返回TextRectangle對(duì)象,這個(gè)對(duì)象包含元素相對(duì)于視窗的位置集合(left,right,top,bottom)

三：BFC的原理及如何創(chuàng)建BFC

BFC全稱：Block Formatting Context (塊級(jí)格式化上下文)
原理：同一個(gè)bfc下外邊距重疊，bfc外面的元素不會(huì)影響里面的元素，bfc計(jì)算高度時(shí)也包含浮動(dòng)元素，bfc可以防止浮動(dòng)元素被覆蓋

如圖所示，1的下邊距和2的上邊距重合

創(chuàng)建bfc的方法

1.float不為none
2.overflow不為visiable
3.position不為static和relative
4.display是inline-block,table-cell,table-caption

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117223.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í)，那么先從的盒模型開(kāi)始吧，因?yàn)檫@是當(dāng)時(shí)進(jìn)現(xiàn)在這家公司筆試的第一題怎么把盒模型變成標(biāo)準(zhǔn)盒模型嗯，有辦法，就可以啦。具體參見(jiàn)鏈接描述常見(jiàn)的盒模型分兩類怪異盒模型和標(biāo)準(zhǔn)盒模型，兩種盒模型有著很大的不同。最近工作中有機(jī)會(huì)復(fù)習(xí)一下css的基本知識(shí)，那么先從css的盒模型開(kāi)始吧，因?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