Posted by & filed under Uncategorized.

About wangcui

wangcui wangcui has written 13 post in this blog.


一、内容盒模型

1、无内边距无滚动条

 

如上图,鼠标指向的蓝色区域的宽度是100px,是如何计算的呢?

  1. contentWidth(内容宽度)= cssWidthcss宽度) scrollBarWidth(垂直滚动条的宽度)
  2. =1000
  3. =100
  4. clientWidth(可视宽度)= cssWidthcss宽度) + paddingLeft(左内边距)+ paddingRight(右内边距) scrollBarWidth(垂直滚动条的宽度)
  5. =100+0+00
  6. =100
  7. styleWidth(样式计算后宽度)= cssWidthcss宽度)- scrollBarWidth(垂直滚动条的宽度)
  8. =1000
  9. =100

demo1:http://demo.qianduanblog.com/2944/1.html

2、无内边距有滚动条

 

如上图,鼠标指向的蓝色区域的宽度是88px,是如何计算的呢?

  1. contentWidth(内容宽度)= cssWidthcss宽度) scrollBarWidth(垂直滚动条的宽度)
  2. =10012
  3. =88
  4. clientWidth(可视宽度)= cssWidthcss宽度)+ paddingLeft(左内边距)+ paddingRight(右内边距) scrollBarWidth(垂直滚动条的宽度)
  5. =100+0+012
  6. =88
  7. styleWidth(样式计算后宽度)= cssWidthcss宽度) scrollBarWidth(垂直滚动条的宽度)
  8. =10012
  9. =88

demo2:http://demo.qianduanblog.com/2944/2.html

3、有内边距无滚动条

 

如上图,鼠标指向的蓝色区的宽度是100px,是如何计算的呢?

  1. contentWidth(内容宽度)= cssWidthcss宽度) scrollBarWidth(垂直滚动条的宽度)
  2. =1000
  3. =100
  4. clientWidth(可视宽度)= cssWidthcss宽度)+ paddingLeft(左内边距)+ paddingRight(右内边距)- scrollBarWidth(垂直滚动条的宽度)
  5. =100+30+300
  6. =160
  7. styleWidth(样式计算后宽度)= cssWidthcss宽度) scrollBarWidth(垂直滚动条的宽度)
  8. =1000
  9. =100

demo3:http://demo.qianduanblog.com/2944/3.html

4、有内边距有滚动条

 

如上图,鼠标指向的蓝色区的宽度是88px,是如何计算的呢?

  1. contentWidth(内容宽度)= cssWidthcss宽度) scrollBarWidth(垂直滚动条的宽度)
  2. =10012
  3. =88
  4. clientWidth(可视区域)= cssWidthcss宽度)+ paddingLeft(左内边距)+ paddingRight(右内边距)- scrollBarWidth(垂直滚动条的宽度)
  5. =100+30+3012
  6. =148
  7. styleWidth(样式计算后宽度)= cssWidthcss宽度) scrollBarWidth(垂直滚动条的宽度)
  8. =10012
  9. =88

demo4:http://demo.qianduanblog.com/2944/4.html

A、注意以上的第2和第4个例子,有内边距和无内边距的时候,无论有无滚动条,其盒模型的蓝色区域宽度始终都是88,可见盒模型的蓝色区域与是否有内边距无关,即蓝色区域指的是contentWidth。

B、注意第2和第4个例子,滚动条是贴边出现的,即滚动条是包含在border以内的,并且占用了padding,如果padding(内边距)不够填充,则会占用content区域,如下:

5、内边距宽度小于滚动条宽度

 

如上图,鼠标指向的蓝色区的宽度是88px,是如何计算的呢?

  1. contentWidth(内容宽度)= cssWidthcss宽度) scrollBarWidth(垂直滚动条的宽度)
  2. =10012
  3. =88
  4. clientWidth(可视宽度)= cssWidthcss宽度)+ paddingLeft(左内边距)+ paddingRight(右内边距)- scrollBarWidth(垂直滚动条的宽度)
  5. =100+2+212
  6. =92
  7. styleWidth(样式计算后宽度)= cssWidthcss宽度) scrollBarWidth(垂直滚动条的宽度)
  8. =10012
  9. =88

demo5:http://demo.qianduanblog.com/2944/5.html

6、内容超过父级宽度

 

如上图,

  1. contentWidth(内容宽度)= cssWidthcss宽度) scrollBarWidth(垂直滚动条的宽度)
  2. =10012
  3. =88
  4. clientWidth(可视宽度)= cssWidthcss宽度)+ paddingLeft(左内边距)+ paddingRight(右内边距)- scrollBarWidth(垂直滚动条的宽度)
  5. =100+2+212
  6. =92
  7. styleWidth(样式计算后宽度)= cssWidthcss宽度) scrollBarWidth(垂直滚动条的宽度)
  8. =10012
  9. =88

demo6:http://demo.qianduanblog.com/2944/6.html

如上图,可视区域的宽度与计算相符,但styleWidth与计算的不等,可能在浏览器中,为了便于计算直接简单粗暴的用cssWidth-scrollBarWidth来计算了。

7、jquery是如何计算这些宽度的

  • width:Get the current computed width for the first element in the set of matched elements.
  • innerWidth:Get the current computed width for the first element in the set of matched elements, including padding but not border.
  • outerWidth:Get the current computed width for the first element in the set of matched elements, including padding and border.

上面3条解释均来源于jquery官网。

上面3条解释均没有提到滚动条的宽度,在以上6个demo中,可以看出jquery的计算方法如下:

  1. // 在盒模型中
  2. jquery element outerWidth = element.offsetWidth
  3. jquery element innerWidth = element.offsetWidth border
  4. jquery element width = element.offsetWidth border padding

因为滚动条是寄生在padding和content里的,所以获取到的innerWidth是包括滚动条的,计算的width也可能包括滚动条(当滚动条的宽度大于内边距的时候)。

8、小结1

为了更好的计算宽度,在子项目宽度超过父项目的时候,强烈建议不设置父项目的内边距。

Leave a Reply

  • (will not be published)