css盒模型相關知識一

2022-07-18 03:12:09 字數 1817 閱讀 5235

1:css盒模型分類

標準盒模型，ie盒模型

2：標準盒模型與ie盒模型的區別

3：css如何設定這兩種模型

css通過box-sizing來設定盒模型

box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。

content-box，width的值就是content的值

padding-box，padding計算入width內  width=content + padding

border-box，border和padding計算入width之內，其實就是怪異模式了

4:js如何獲取盒模型對應的寬和高

1)dom.style.width/height

html**

1


<


p id


='p' 


style


='width:100px;'


>js獲取元素的寬高


p>
js執行**

1


var p=document.getelementbyid('p').style.width;


2 console.log(p); //


200px
但是這種方式只能取到內嵌的寬和高，對於通過style寫的或者外部鏈結進來的就無法取到值

css**

1


#p
html**

1


<


p id


='p'


>js獲取元素的寬高


p>
js執行**

1 console.log(document.getelementbyid('p').style.width); //無法取到值
ps：雖然這種方式取不到寬度值。但卻可以設定元素的寬度值。比如：設定p元素寬度為200px:

1 document.getelementbyid("p1").style.width ="200px";
接上面乙個例子取不到值就可以通過

1


var p=document.getelementbyid('p');


2var width=window.getcomputedstyle(p).width;


3 console.log(width); //


200px
3)dom.getboundingclientrect().width/height

1


var p=document.getelementbyid('p');


2var width=p.getboundingclientrect().width;


3 console.log(width); //


2004


//注意這個方法一般是絕對定位中獲取left,top,right,bottom的值

CSS盒模型相關問題

css盒模型相關問題 1.基本概念 標準模型 ie模型 2.標準模型和ie模型的區別 3.css如何設定這兩種模型 4.js如何設定獲取盒模型對應的寬和高 5.例項題 根據盒模型解釋邊距重疊 6.bfc 邊距重疊解決方案 具體說明 1.標準模型和ie模型 本質上是乙個盒子，封裝周圍的html元素，它...

前端知識整理 CSS盒模型

我們先來說說 什麼是css的盒模型呢？想象乙個盒子，它有 外邊距 margin 邊框 border 內邊距 padding 內容 content 四個屬性 行 但是我們還有兩個小概念 乙個是標準模型 content box 和ie模型 border box 這兩個有什麼區別呢？就是乙個塊的寬高 標準...

css之旅（一）css盒模型

本文講解css中w3標準盒模型和ie標準盒模型的區別。所有的html元素都可以看做是乙個盒子，它包括邊距margin，邊框border，填充padding，內容content幾部分組成。css中的盒模型分為兩種，分別為w3標準盒模型和ie盒模型，它們的區別在於大小不同。w3標準盒模型的width，h...