盒子模型

Posted 2021-03-21 zoukun

盒子模型

CSS传统的盒子模型 (content + padding + border)

• 盒子的Width : content_width + 左右padding + 左右border

• 在css3 中 型添加了盒子模型属性 （box-sizing）
• box-sizing : content-box ; // 传统的盒子模型 （默认）
• box-sizing : border-box ; // 新盒子模型

• 设置border-box 后： with 和 height 变成了 盒子的宽高 设置paddingorder 不会影响盒子的大小

JS盒子模型

1. clientHeight , clientWidth , clientLeft （左边框--border ） , clientTop（上边框）
   

• 获取可视化区域的相关属性，内容溢出无影响（滚动区域）
• 获取的结果无单位（其他的JS盒子模型属性也没有）
• 获取的结果是整数（会四舍五入） （其他的JS盒子模型属性也是这样）

<style>
    .ele{
        box-sizing:border-box;
        margin:20px auto;
        padding :10px
        width:300px;
        height:300px;
        border:10px solid red;
    }
</style>

var height = document.documentElement.clientHeight || document.body.clientHeight     
    // 获取网页一平幕的高度

1. offsetWidth , offsetHeight(盒子的高度：client + border) ,

2. scrollHeight ， scrollWidth , scrollTop ,

• 在内容没有溢出的情况下与client一样 ，
• 内容溢出后， 获取的值约为 溢出的 加上 client （真实的内容宽高 + padding）
• 不同的浏览器获取的scrollH/W 不同

var height = document.documentElement.scrollHeight || document.body.scrollHeight 
//获取网页的真实高度

• scrollTop : 竖向滚动条卷曲的高度（ 0 ~~ scrollHeight - clientHieght）

• scrllLeft : 纵向滚动条卷曲的宽度 （0 ——scrollWidth - clientWidth）

  scrollTop , scrollLeft : 为可以读写的属性 ， 其他的属性只能读