码迷,mamicode.com
首页 > 其他好文 > 详细

盒子模型

时间:2019-12-21 20:59:28      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:fse   滚动条   20px   class   order   style   高度   pad   lock   

盒子模型

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

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

  • 在css3 中 型添加了盒子模型属性 (box-sizing)
  • box-sizing : content-box ; // 传统的盒子模型 (默认)
  • box-sizing : border-box ; // 新盒子模型
  • 设置border-box 后: with 和 height 变成了 盒子的宽高 设置padding\border 不会影响盒子的大小

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 : 为可以读写的属性 , 其他的属性只能读

盒子模型

标签:fse   滚动条   20px   class   order   style   高度   pad   lock   

原文地址:https://www.cnblogs.com/zoukun/p/12077863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!