一。css盒模型分为标准模型和IE模型
1.标准模型:浏览器默认模型,即box-sizing:content-box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒模型</title>
<style media="screen">
*{
padding: 0;
margin: 0;
}
.content {
width: 300px;
height: 400px;
border: 5px solid #242424;
padding: 20px;
background-color: #898989;
}
</style>
</head>
<body>
<p>css盒模型分为标准模型和IE模型</p>
<p>1.标准模型:浏览器默认模型,即box-sizing:content-box</p>
<div class="content">
</div>
</body>
</html>
通过浏览器可以看到:
原因就是:
350(width)
= 300(content)
+ 20(padding)
* 2 + 5(border)
* 2
450(height)
= 400 (content)
+ 20(padding)
* 2 + 5(border)
* 2
2.IE模型:即box-sizing:border-box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒模型</title>
<style media="screen">
*{
padding: 0;
margin: 0;
}
.content {
width: 300px;
height: 400px;
border: 5px solid #242424;
padding: 20px;
background-color: #898989;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content">
</div>
</body>
</html>
通过浏览器可以看到:
二.。CSS盒模型与style.width,offsetWidth,clientWidth的关系?
1.首先:style.width是获取dom元素的css样式的style,没有设置css样式,则返回runtimeStyle,而当有设置css width的时候,返回值与盒模型无关。
样式表有三种方式:
内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。 (也称作“内联样式”)
内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。
外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。
runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!
currentStyle 指 style 和 runtimeStyle 的结合! 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了
所以,如果dom元素没有设置内嵌样式,通过dom.style.width获取不到值。
而dom.currentStyle(IE浏览器支持)或者window.getComputedStyle(非IE浏览器支持)获取的是runtimeStyle
具体代码如下:
let dom = document.getElementById('content');
if(dom.currentStyle) {
var width = dom.currentStyle['width'];
alert('ie:' + width);
} else if(window.getComputedStyle) {
var width = window.getComputedStyle(dom , null)['width'];
alert('firefox:' + width);
}
2.offsetWidth
返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)
显然,offsetWidth和dom元素设置的css盒模型是有关系的。比如上述例子中,box-sizing:centent-box的时候,offsetWtidh是350;而box-sizing:border-box的时候,offsetWidth是300;
3.clientWidth
返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)
总结:如果要获取dom元素在浏览器的实际占用文档的宽度,就用offsetWidth,不管什么盒模型。