CSS之盒子模型

日常保护好头发

已于 2022-08-07 18:00:11 修改

阅读量880

点赞数

分类专栏： CSS专项文章标签： css 前端 html

于 2022-08-07 17:57:53 首次发布

本文链接：https://blog.csdn.net/weixin_43912516/article/details/126214566

版权

CSS专项专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、盒模型的概念

所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。盒子模型的概念可以结合我们日常生活中的 “箱子” 来理解，日常生活中所见的“箱子”可以装一些物品，而我们这里说到的盒模型，同样也可以放一些内容。

2、盒模型的组成

盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）四个要素。

3、盒子模型的分类

CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型（也称怪异盒模型）
在这里插入图片描述

4、不同盒模型的区别

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

标准盒模型的width和height属性的范围只包含了content。
IE盒模型的width和height属性的范围包含了border、padding和content。

5、 box-sizing 属性

可以通过修改元素的box-sizing属性来改变元素的盒模型：

box-sizing: content-box表示标准盒模型（默认值）
box-sizing: border-box表示IE盒模型（怪异盒模型）

6、通过JS获取盒模型对应的宽和高

dom.style.width/height
//只能获取到内联样式的宽和高，而样式一般不会以内联方式写，所以这种方式不适用现在大多数的开发。

dom.currentStyle.width/height
//这种方式只适用于IE，所以直接不用。

window.getComputedStyle(dom).width/height
//getComputedStyle()是一个可以获取当前元素所有最终（划重点）使用的CSS属性值的方法；兼容性很好。

dom.getBoundingClientRect().width/height
//getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left,height,width,x,y共8个属性；兼容性很好。
　　rectObject = dom.getBoundingClientRect()
　　rectObject.top：元素上边到视窗上边的距离;
　　rectObject.right：元素右边到视窗左边的距离;
　　rectObject.bottom：元素下边到视窗上边的距离;
　　rectObject.left：元素左边到视窗左边的距离;
　　rectObject.width：元素宽度;
　　rectObject.height：元素高度;
　　rectObject.x：元素内容与视口的水平距离;
　　rectObject.y：元素内容与视口的垂直距离;

代码示例：

<style type="text/css">
    body{
        padding:0;
        margin:0;
    }
    #box{
        margin: 0px;
        font-size: 40px;
    }
</style>
<body>
    <div id="box" style="width: 300px">
        日常保护好头发
    </div>
</body>
<script>
    var box = document.getElementById("box");
    console.dir(box)
    console.log(`%c${window.getComputedStyle(box).width}`, "color: red")
    console.log(`%c${window.getComputedStyle(box).height}`, "color: red")
    console.dir(box.getBoundingClientRect())
</script>