首页 > 其他 > 详细

盒子模型

时间:2019-09-15 22:49:38      阅读:104      评论:0      收藏:0      [点我收藏+]

1、标准盒子模型(W3C)

  我们设置的盒子的width与height就是内容区所占的宽度与高度,而padding与margin是另外计算的

  所以,盒子的总高度=margin+border+padding+height

2、怪异盒子模型(IE)

  width=content+padding+border,就是说我们设置的width、height包括内容区与内边距、边框

3、CSS3中的box-size属性指定盒子模型的种类

  *content-box:在宽度和高度之外绘制元素的内边距和边框

  *border-box:为元素设置任何的内边距和边框都将在已经设置好的高度和宽度内绘制,在已经设定好的宽度和高度中减去需要设置的padding和border

  *inherit:从父元素中继承box-size的属性值

4、怪异盒子模型应用的小技巧

    技术分享图片

 

 可以通过设置父元素的box-size从而使其增加内边距而不变形

盒子模型

原文:https://www.cnblogs.com/qqinhappyhappy/p/11524366.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!