Posted by & filed under Uncategorized.

About wangcui

wangcui wangcui has written 13 post in this blog.

http://qianduanblog.com/post/css-learning-20-padding-scrollbar-content-client-relationship.html

二、边框盒模型

在css3中,推出的边框盒模型与css2中的内容盒模型,更加增加了计算各种宽度的难度。在css2中,css中的width指定的是content内容区域的宽度,然后是内边距和边框;而在css3中为了适应更多的实际需求,边框盒模型的width指定的是border+padding+content的宽度。诚然,除了内容盒模型、边框盒模型,还有内边距盒模型,目前只有火狐支持,该模型实际使用频率不高,可能会被未来放弃。

可以使用box-sizing来指定盒模型:

  1. /*边框盒模型*/
  2. webkitboxsizing: borderbox;
  3. mozboxsizing: borderbox;
  4. msboxsizing: borderbox;
  5. boxsizing: borderbox;
  6. /*内容盒模型*/
  7. webkitboxsizing: contentbox;
  8. mozboxsizing: contentbox;
  9. msboxsizing: contentbox;
  10. boxsizing: contentbox;

1、无边距无滚动条

 

demo7:http://demo.qianduanblog.com/2944/7.html

2、无边距有滚动条

 

demo8:http://demo.qianduanblog.com/2944/8.html

3、有边距无滚动条

 

demo9:http://demo.qianduanblog.com/2944/9.html

4、有边距有滚动条

 

demo10:http://demo.qianduanblog.com/2944/10.html

5、小结2

jquery的width、innerWidth、outerWidth,以及clientWidth、contentWidth均与盒模型无关,而计算后的宽度(getComputedStyle)与盒模型有关。

Leave a Reply

  • (will not be published)