盒模型

**下面本文章将会从以下几个方面谈谈盒模型。

基本概念：标准模型和IE模型
CSS如何设置这两种模型
JS如何设置获取盒模型对应的宽和高
实例题（根据盒模型解释边距重叠）
BFC（边距重叠解决方案）

盒模型的组成由里向外content,padding,border,margin.
盒模型是有两种标准的，一个是标准模型，一个是IE模型。

css如何设置两种模型
这里用到了CSS3 的属性 box-sizing
/* 标准模型 */
box-sizing:content-box;
/IE模型/
box-sizing:border-box;

标准盒子模型：
在这里插入图片描述
IE盒子模型：

JS获取宽高

通过JS获取盒模型对应的宽和高，有以下几种方法：

为了方便书写，以下用dom来表示获取的HTML的节点。

dom.style.width/height (支持读写)

这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

dom.currentStyle.width/height （仅支持读）

这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。

但这种方式只有IE浏览器支持。

window.getComputedStyle(dom).width/height（仅支持读）

这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。

dom.getBoundingClientRect().width/height
　　这种方式是根据元素在视窗中的绝对位置来获取宽高的
　　width=content宽高+padding+border:
　　getBoundingClientRect()的width和height都是以页面实际渲染的尺寸进行计算的，缩小渲染的尺寸相应也会缩小（近似等于100px，居然有误差！！），不管CSS的width或height属性是什么，
dom.offsetWidth/offsetHeight
width=content宽高+padding+border:
但offsetWidth和offsetHeight却是始终以CSS属性返回元素的尺寸（都是200px），不管缩不缩放（真是冥顽不化.jpg）。
在有滚动条的情况下clientWidth和clientHeight不包含滚动条，换句话说就是在有滚动条的情况下只包含滚动条内部的可视部分

scroll 和 client 和 offset
client
clientWidth：获取网页可视区域的宽度(两种用法) (width+padding)
clientHeight：获取网页可视区域的高度(两种用法)
clientX：鼠标距离可视区域左侧的距离(event调用)
clientY：鼠标距离可视区域上侧的距离(event调用)
clientTop：盒子的上border (对于body元素则为0)
clientLeft：盒子的左border (对于body元素则为0)

offset
offsetWidth：元素自身的宽度(含border) (width+padding+border)
offsetHeight：元素自身的高度(含border)
offsetLeft：距离父盒子中带有定位的左侧距离（不包括边框）
offsetTop：距离父盒子中带有定位的顶部距离
offsetParent：当前元素的父级参照物

scroll
scrollWidth：内容没有溢出：元素自身的宽度 (width+padding)
内容溢出： autoWidth + padding-left
scrollHeight：内容没有溢出：元素自身的高度
内容溢出： autoHeight + padding-top
scrolltLeft：被卷去的左侧的宽度
scrollTop：被卷曲的顶部的宽度

screen
window.screenTop/screenLeft (窗口相当于屏幕的X和Y坐标)
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width

在这里插入图片描述

获取元素
通过ID名字获取元素 document.getElementById(“box”);
通过ClassName获取元素 document.getElementsByClassName(“ClassName”)
通过 Name 获取元素 document.getElementsByName(“Name”) 一般用于表单元素
通过标签名字获取元素 document.getElementsByTagName(“TagName”)
document.querySelector() 选择一个
document.querySelectorAll() 选择多个
相关理解代码：

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>比较</title>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
}
body{
    margin: 0;
    padding: 0;
    width: 1500px;
    height:2000px;
    border: 4px solid;
    padding: 20px;
}
div{
    border: 1px solid;
    left: 50px;
    position: relative;
    padding: 10px;
    top: 50px;
    width: 100px;
    height: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
    var div1 = document.getElementById("div1");

    // console.log(div1.clientWidth);
    // console.log(div1.clientHeight);
    div1.onclick=function(ev){
    var oEvent=ev||event;
    alert(oEvent.clientX+","+oEvent.clientY);
    }
    // console.log(div1.clientTop);
    // console.log(div1.clientLeft);
    // console.log(document.body.clientTop);
    // console.log(document.body.clientLeft);
    // console.log(document.body.clientWidth);
    // console.log(document.body.clientHeight);

    // console.log(div1.offsetWidth);     
    // console.log(div1.offsetHeight);
    // console.log(div1.offsetTop);
    // console.log(div1.offsetLeft);
    // console.log(document.body.offsetWidth);
    // console.log(document.body.offsetHeight);
    // console.log(document.body.offsetTop);
    // console.log(document.body.offsetLeft);

    console.log(document.body.scrollWidth);
    console.log(document.body.scrollHeight);
    // console.log(document.body.scrollTop);
    // console.log(document.body.scrollLeft);

    console.log(window.screenTop);
    console.log(window.screenLeft);
    console.log(window.screen.height);
    console.log(window.screen.width);
    console.log(div1.getBoundingClientRect().width);
</script>
</html>

注意：

dom.style.width/height (支持读写)只能取到dom元素内联样式所设置的宽高
dom.currentStyle.width/height （仅支持读）在页面渲染完成后,只有IE浏览器支持
window.getComputedStyle(dom).width/height（仅支持读）可以兼容更多的浏览器
dom.getBoundingClientRect().width/height 根据元素在视窗中的绝对位置来获取宽高　width=content宽高+padding+border: 缩小渲染的尺寸相应也会缩小
dom.offsetWidth/offsetHeight
width=content宽高+padding+border:却是始终以CSS属性返回元素的尺寸（都是200px）
6.clientWidth 在有滚动条的情况下clientWidth和clientHeight不包含滚动条，换句话说就是在有滚动条的情况下只包含滚动条内部的可视部分

总结：
1.标准/IE盒模型以及设置
2.js获取元素
3.js设置以及获取盒模型对应的宽高
4.scroll 和 client 和 offset三大家族
5.screen

posted @ 2019-03-14 16:44 princeness 阅读(135) 评论(0) 编辑收藏举报

刷新页面返回顶部

princeness

盒模型

盒模型

公告