CSS盒模型里面的几个宽度问题:offsetWidth,clientWidth,scrollWidth以及jquery的.width()函数

CSS盒模型是CSS定位的基础,搞清楚这几个属性之间的关系对CSS定位是非常重要的,自己学习后总结如下,欢迎大家一起讨论!

盒模型主要包括四个方面:

  • 盒模型里面的内容(content),也就是实实在在要展现的内容,比如P标签里面的文字
  • 盒模型的内边距(padding),是内容与边框内部之间的距离
  • 盒模型的边框(border),边框也可以设置宽度
  • 盒模型的外边距(margin),盒模型的边框外部与其他盒模型边框外部之间的距离

CSS的width和height属性设置的是内容区域(content)的宽高,不包括padding和border

那么这几个宽度分别指的是:
* offsetWidth:指的是盒模型的边框 + 内边距 + 内容的宽度
* clientWidth:指的是盒模型的内边距 + 内容的宽度
* scrollWidth:如果内容超出边框,需要有滚动条,那么scrollWidth获取的是整个文档的内容(而clientWidth获取的只是可见部分的宽度)

对于jquery的width()函数,获取的是内容的宽度

如果在CSS属性里面给盒模型定宽,那么定的其实就是offsetWidth,所有的边框和padding都在此宽度之内进行,注意此时jquery的width()函数获取的仍然是内容的宽度!

你可能感兴趣的:(css)