什么是盒模型

什么是盒模型

在HTML页面中，每个元素可以单独的看成一个盒子，这个盒子由内容区(content)、填充区(padding)、边框(border)、外边界(margin)四部分组成

• 有几种盒子模型？？

  • 有两种盒子模型:IE盒子模型(border-box)、W3C标准盒模型(content-box)

  • IE盒子模型：设定的宽度就已经包含了padding跟border，他的总宽度是 widht+margin组成。

   <style>
      * {
          margin: 0;
          padding: 0;
      }
      #box{
          width:100px;
          height: 100px;
          margin-left: 10px;
          margin-right: 10px;
          padding-left: 10px;
          box-sizing:border-box;
          background:pink;
      }
  </style>
  <div id="box"></div>
  
  //最终页面会呈现出 一个盒模型的宽度在页面占用的是120px
  

• 标准盒子模型：标准盒模型的宽度是：widht+padding(左右)，maring(左右)形成的！

   <style>
      * {
          margin: 0;
          padding: 0;
      }
      #box{
          width:100px;
          height: 100px;
          margin-left: 10px;
          margin-right: 10px;
          padding-left: 10px;
          padding-right:10px;
          background:pink;
      }
  </style>
  <div id="box"></div>
  
  //最终页面会呈现出 一个盒模型的宽度在页面占用的是140px
  

  

  • 盒模型转换：
    1. box-sizing:content-box; 将采用标准模式的盒子模型标准
    2. box-sizing:border-box; 将采用怪异模式的盒子模型标准
    3. box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

js盒模型：通过js中的属性和方法获取元素的属性信息！

client系列/offset系列/scrollWidth/scrollHeight都是“只读”属性

只能通过属性获取值，不能通过属性修改元素的样式

scrollTop/scrollLeft：滚动条卷曲的高度/宽度(这两个属性是唯一“可读写”属性

    let box = document.getElementById("box");
    //conlog.dir(box);
    

1. clientWidth : width +左右padding;

2. clientHeight : height + 上下 padding;

3. clientLeft： 左边框

4. clientTop ：上边框

5. offsetWidth：width + 左右padding + 左右border

6. offsetHeight： width + 上下padding + 上下border

7. offsetParent 当前元素的父级参照物，在同一个平面中，最外层的元素是里面所有元素的父级参照物，一般来说一个页面中所有元素的父级参照物都是body(可以通过position定位来改变)

8. offsetLeft：距离父元素左偏移距离

9. offsetTop: 距离其父元素内边框上的偏移距离。

10. scroll :

    1. 容器中内容没有溢出的情况下：和我们的clientWidth/clientHeight一模一样。
    2. 如果容器中内容有溢出，获取的结果如下规则

    3. scrollWidth：真实内容的宽度 加上左padding

    4. scrollHeight: 真实的内容高度 加上 上padding

    5. 获取到的结果都是“约等于”的值，因为：
       1. 同一个浏览器，我们是否设置overflow=“hidden”，对于最终的结果是有影响的（滚动条也占据宽度会影响）;
       2. 在不同的浏览器中我们获取到的结果也是不相同的

11. scrollTop/scrollLeft：滚动条卷曲的高度/宽度(这两个属性是唯一“可读写”属性)。

参考：
盒模型与BFC
js盒子模型常用属性