CSS-盒模型知识整理与理解:
CSS盒模型知识整理与理解 --- 盒模型的基本概念
本文涉及知识:
- 盒模型的概念
- 标准模型和IE盒模型的区别
- JS获取盒模型宽高的方法
- 盒模型的边距重叠问题
- BFC的理解(概念、原理、如何创建、使用场景)
CSS盒模型的概念
CSS盒模型(box model),它是包含了内容(content)、内边距(padding)、边框(border)、外边距(margin)属性的一个盒子模型。
而盒模型又分为两类标准:标准盒子模型和IE盒子模型(怪异盒子模型)
标准盒模型
CSS3中加入了新的属性box-sizing,可以通过设置box-sizing属性来改变盒模型标准
在浏览器默认的盒模型是content-box
box-sizing: content-box(默认);
IE盒模型
IE盒子模型,也称为怪异盒子模型
可以通过box-sizing来设置此标准
box-sizing: border-box;
标准盒子模型和IE盒子模型的区别
从上面的盒子模型的图片展示,可以清晰的看到
在标准盒子模型中,盒子的width是指content的宽高,
而IE盒子模型中就比较怪异了,它包含了content、border和padding的距离。
即它们的主要区别在于width和height的计算方式的不同。
标准盒子模型:盒子的总宽度 = margin+border+padding+width
width = content的宽度
IE 盒子模型 : 盒子的总宽度 = margin+width
width = content的宽度+border边框宽度(左右)+padding内边距(左右)
高度计算同理
区别例子展示
我们设置了两个盒子,设置了它们的width、height都为200px
<style>
html *{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
border: 10px solid #000;
padding: 10px;
}
#ie-box{
box-sizing: border-box;
}
</style>
<div id="w3c-box">
content
</div>
<div id="ie-box">
content
</div>
标准盒子模型:打开控制台,可以看见标准盒模型的width为content内容的宽度200px(高度同理)
IE盒子模型:打开控制台,可以看到我们设置了width是200px,此处设置的已经不再是content内容区了,
而设置的width = content的宽度+ padding左右宽度+border左右宽度
JS获取宽高的方法
方法1:dom.style.width/height
此方法只可以取到行内样式,而取不到内部样式表或者外部样式表设置的width
例如一下例子,可以取到w3cbox设置的width
<div id="w3c-box" style="width:300px"> content </div> <script> var w3c = document.getElementById('w3c-box'); var ie = document.getElementById('ie-box'); // 方法1: dom.style.width/height console.log(w3c.style.width); </script>
而如果我们用内部样式表或者外部样式表
<style> #w3c-box{ width: 300px }; </style> <div id="w3c-box"> content </div> <script> var w3c = document.getElementById('w3c-box'); var ie = document.getElementById('ie-box'); // 方法1: dom.style.width/height console.log('width:'+ w3c.style.width); </script>
我们无法获取到width的值。
那么我们有什么办法可以获取到样式表中的width和height呢?
方法2: dom.currentStyle.width/height
但是此方法仅仅兼容IE,其他浏览器都不可以使用该属性,微软旗下的Microsoft Edge浏览器同样不兼容
例子展示
<style> #w3c-box{ width:300px; } <style> <div id="w3c-box"> content </div> <script> var w3c = document.getElementById('w3c-box'); var ie = document.getElementById('ie-box'); // 方法2: dom.currentStyle['width/height'] console.log(w3c.currentStyle['width']); </script>
在IE浏览器中
而在其他浏览器,currentStyle这个对象为undefined
方法3:window.getComputedStyle(dom).width/height
getComputedStyle()用于获取CSS计算后的属性值
获取
console.log('w3c_width='+window.getComindoputedStyle(w3c).width);
此方法兼容IE9+以及其他浏览器,拥有者良好的及兼容性,普遍通用的方法。
方法4:dom.getBoundingClientRect().width/height
getBoundingClientRect()
获取元素相对于视窗的位置的集合
返回值有 top、left、width、height
兼容性更好,可以兼容IE5、firefox2以上的浏览器
但是在获取标准盒模型的宽高的时候会加上border和padding的宽度,例如怪异盒模型
CSS-盒模型知识整理与理解
本文涉及知识:
- 盒模型的概念
- 标准模型和IE盒模型的区别
- JS获取盒模型宽高的方法
- 盒模型的边距重叠问题
- BFC的理解(概念、原理、如何创建、使用场景)
CSS盒模型的概念
CSS盒模型(box model),它是包含了内容(content)、内边距(padding)、边框(border)、外边距(margin)属性的一个盒子模型。
而盒模型又分为两类标准:标准盒子模型和IE盒子模型(怪异盒子模型)
标准盒模型
CSS3中加入了新的属性box-sizing,可以通过设置box-sizing属性来改变盒模型标准
在浏览器默认的盒模型是content-box
box-sizing: content-box(默认);
IE盒模型
IE盒子模型,也称为怪异盒子模型
可以通过box-sizing来设置此标准
box-sizing: border-box;
标准盒子模型和IE盒子模型的区别
从上面的盒子模型的图片展示,可以清晰的看到
在标准盒子模型中,盒子的width是指content的宽高,
而IE盒子模型中就比较怪异了,它包含了content、border和padding的距离。
即它们的主要区别在于width和height的计算方式的不同。
标准盒子模型:盒子的总宽度 = margin+border+padding+width
width = content的宽度
IE 盒子模型 : 盒子的总宽度 = margin+width
width = content的宽度+border边框宽度(左右)+padding内边距(左右)
高度计算同理
区别例子展示
我们设置了两个盒子,设置了它们的width、height都为200px
<style>
html *{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
border: 10px solid #000;
padding: 10px;
}
#ie-box{
box-sizing: border-box;
}
</style>
<div id="w3c-box">
content
</div>
<div id="ie-box">
content
</div>
标准盒子模型:打开控制台,可以看见标准盒模型的width为content内容的宽度200px(高度同理)
IE盒子模型:打开控制台,可以看到我们设置了width是200px,此处设置的已经不再是content内容区了,
而设置的width = content的宽度+ padding左右宽度+border左右宽度
JS获取宽高的方法
方法1:dom.style.width/height
此方法只可以取到行内样式,而取不到内部样式表或者外部样式表设置的width
例如一下例子,可以取到w3cbox设置的width
<div id="w3c-box" style="width:300px"> content </div> <script> var w3c = document.getElementById('w3c-box'); var ie = document.getElementById('ie-box'); // 方法1: dom.style.width/height console.log(w3c.style.width); </script>
而如果我们用内部样式表或者外部样式表
<style> #w3c-box{ width: 300px }; </style> <div id="w3c-box"> content </div> <script> var w3c = document.getElementById('w3c-box'); var ie = document.getElementById('ie-box'); // 方法1: dom.style.width/height console.log('width:'+ w3c.style.width); </script>
我们无法获取到width的值。
那么我们有什么办法可以获取到样式表中的width和height呢?
方法2: dom.currentStyle.width/height
但是此方法仅仅兼容IE,其他浏览器都不可以使用该属性,微软旗下的Microsoft Edge浏览器同样不兼容
例子展示
<style> #w3c-box{ width:300px; } <style> <div id="w3c-box"> content </div> <script> var w3c = document.getElementById('w3c-box'); var ie = document.getElementById('ie-box'); // 方法2: dom.currentStyle['width/height'] console.log(w3c.currentStyle['width']); </script>
在IE浏览器中
而在其他浏览器,currentStyle这个对象为undefined
方法3:window.getComputedStyle(dom).width/height
getComputedStyle()用于获取CSS计算后的属性值
获取
console.log('w3c_width='+window.getComindoputedStyle(w3c).width);
此方法兼容IE9+以及其他浏览器,拥有者良好的及兼容性,普遍通用的方法。
方法4:dom.getBoundingClientRect().width/height
getBoundingClientRect()
获取元素相对于视窗的位置的集合
返回值有 top、left、right、bottom、width、height
兼容性好,可以兼容IE5+、firefox2以上的浏览器
注意:此处获取的width类似于怪异盒子会包括border和padding的距离。
但是在获取标准盒模型的宽高的时候会加上border和padding的宽度,例如怪异盒模型
获取到了340px
而设置了IE的标准和模型则正确得获取了width
边界重叠详细解析:CSS盒模型知识整理与理解(2)--- 边距重叠问题详解
BFC详细解析:CSS-盒模型知识整理与理解(3)--- BFC详解
本文为个人学习笔记,如有错误欢迎留言指正,谢谢!