CSS盒子模型

JS盒子模型

提供一些属性和方法用来描述当前盒子的样式的

clientWidth / clientHeight

当前盒子可视区域的宽度和高度
可视区域：内容宽高+padding
clientWidth = width + padding(Left/Right)
clientHeight = height + padding(Top/Bottom)

和内容是否溢出以及我们是否设置了 overflow:hidden; 没有关系

//=>获取当前页面一屏幕的宽度（加或者是为了兼容所有的浏览器）
document.documentElement.clientWidth || document.body.clientWidth
 
//=>获取当前页面一屏幕的高度
document.documentElement.clientHeight || document.body.clientHeight

面试题：让一个盒子在整个页面水平和垂直都居中的位置? 如果不知道盒子的宽度和高度如何处理?

css

//=>使用定位：需要知道盒子的具体宽高
.box {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -100px;
width: 200px;
height: 100px;
background: red;
}
 
//=>使用定位：不需要知道盒子的具体宽高(不兼容IE低版本浏览器)
.box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 200px;
height: 100px;
background: red;
}
 
//=>使用CSS3的flex伸缩盒模型（不兼容）
html {
height: 100%;
}
 
body {
display: flex;
height: 100%;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
 
.box {
width: 200px;
height: 100px;
background: red;
}

JS

//=>JS中只要获取到当前盒子具体的LEFT/TOP值即可
//=>一屏幕的宽高-盒子的宽高，最后除以2，获取的值就是它应该具备的LEFT/TOP（这个值可以让他处于页面中间）
var winW = document.documentElement.clientWidth || document.body.clientWidth;
var winH = document.documentElement.clientHeight || document.body.clientHeight;
var boxW = box.clientWidth;
var boxH = box.clientHeight;
box.style.left = (winW - boxW) / 2 + 'px';
box.style.top = (winH - boxH) / 2 + 'px';

clientTop 和 clientLeft

只有top和left，没有right和bottom这两个属性
clientTop：盒子上边框的高度
clientLeft：左边框的宽度
获取的结果其实就是border-width值

通过JS盒子模型属性获取的结果是不带单位的，而且只能是整数（它会自动四舍五入）

.box{
border:10.8px silid red;
}
 
box.clientLeft =>11

offsetWidth 和 offsetHeight

在clientWidth和clientHeight的基础上加上盒子的边框即可

和内容是否溢出没关系

真实项目中如果想获取一个盒子的宽度和高度，我们一般用offsetWidth（而不是clientWidth），border也算是当前盒子的一部分

scrollWidth 和 scrollHeight

[ 没有内容溢出 ]
获取的结果和clientWidth/clientHeight是一样的

[ 有内容溢出 ]
真实内容的宽度或者高度(包含溢出的内容)，在加上左padding或者上padding的值

有内容溢出的情况下，我们通过scrollWidth或者scrollHeight获取的结果是一个约等于的值
1) 有内容溢出，每个浏览器由于对行高或者文字的渲染不一样，回去的结果也是不一样的
2) 是否设置 overflow:hidden 对最后获取的结果也有影响

//=>获取当前页面真实高度（包含溢出内容）
document.documentElement.scrollHeight||document.body.scrollHeight

在JS中获取元素具体的样式值

通过JS盒子模型属性获取的结果都是盒子的组合样式值，不能直接获取某一个具体样式值，例如：我就想获取左padding…

curEle.style.xxx

获取当前元素所有写在行内样式上的样式值

特殊：只有把样式写在行内样式上，才可以通过这种办法获取到（写在其它地方的样式是获取不到的）

这种办法在真实项目中使用的特别少：因为我们不可能把所有元素的样式都写在行内上（这样要内嵌和外联式就没用了）

window.getComputedStyle / currentStyle

只要当前元素在页面中显示出来了，我们就可以获取其样式值（不管写在行内还是样式表中）；也就是获取所有经过浏览器计算过的样式（当前元素只要能在页面中展示，那么它的所有样式都是经过浏览器计算的，包含一些你没有设置，浏览器按照默认样式渲染的样式）

window.getComputedStyle：适用于标准浏览器，但是在IE6~8中就不兼容了，IE6~8下我们使用 curEle.currentStyle来获取需要的样式值

//=>通过getComputedStyle获取的结果是一个对象，对象中包含了所有被浏览器计算过的样式属性及属性值
// window.getComputedStyle([当前需要操作的元素],[当前元素的伪类,一般写null])
// window.getComputedStyle(box,null)['paddingLeft'] 这种方式可以在获取的对象中找到某一个具体样式属性的值（通过.paddingLeft也可以）
 
//=>在IE6~8浏览器的window全局对象中，没有提供getComputedStyle这个属性方法，我们只能使用currentStyle属性获取元素的样式
// [当前元素].currentStyle  获取的结果也是一个包含当前元素所有的样式属性和值的对象
// box.currentStyle.paddingLeft

以后再想获取元素的样式，我们需要写两套，这样的话，我们可以把获取样式的操作封装成为一个公共的方法：getCss

/* 
* getCss：获取当前元数某一个样式属性值
* @parameter
*    curEle：当前需要操作的元素
*    attr：当前需要获取的样式属性名
* @return
*    获取的样式属性值
*/
function getCss(curEle,attr){
var value=null;
if('getComputedStyle' in window){
value = window.getComputedStyle(curEle,null)[attr];
}else{
value = curEle.currentStyle[attr];
}
return value;
}

对getCss进行优化
1、去除获取值的单位
2、获取透明度的兼容

function getCss(curEle, attr) {
var value = null;
if ('getComputedStyle' in window) {
value = window.getComputedStyle(curEle, null)[attr];
} else {
if (attr === 'opacity') {
value = curEle.currentStyle['filter'];
var reg = /^alpha\(opacity=(.+)\)$/;
reg.test(value) ? value = reg.exec(value)[1] / 100 : value = 1;
} else {
value = curEle.currentStyle[attr];
}
}
var temp = parseFloat(value);
!isNaN(temp) ? value = temp : null;
return value;
}