盒子计算模式，解决padding改变高度问题

楼主^#

更多发布于：2016-09-20 23:55

很多时候，给DIV设置了一个高度，但是，在设置与内容之间的距离即padding。出现了DIV高度增加，这时很多人直接就在原来的高度上减下设置的padding距离来解决这个问题。
   下面，一个来分析一下：
   div高度与宽度，一般被称为盒子的高度与宽度。
   通过，通过CSS样式来指定，但是大家是否知道，样式设置的宽高，指的是什么的宽高？
   内容？内容+内边距？内容+内边距+边框？内容+内边距+边框+外边距？？
   相信很多人对于它的认识都比较模糊
   下面，就来讨论下：
   其它，盒子的计算式分了两种：

   标准模式解析计算，也是默认模式

   盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin
   // 注：这里的内容宽度与高度，就是在CSS中指定的宽度与高度，所以如果设置了margin或padding总的尺寸会发现变化

   怪异模式解析计算

   即盒子总宽度/高度 = width/height + margin =内容区宽度 /高度+padding+border + margin
   // 注：这里的第一个等号后的width/height即指的就是CSS中设置的值。它就相当于内容宽高+padding+border
   (注：一般都是使用的标准模式，而如果DOCTYPE缺失则在ie6,7,8 下将触发怪异模式);

   以上，是浏览器默认会解析的情况。有时，在写页面中，我们想让它按照我们的想法来进行对应模式的计算。
   这里，就推荐大家使用box-sizing属性：

   box-sizing属性：
   当box-sizing:content-box : 将采用标准模式解析计算
   当box-sizing:border-box: 将采用怪异模式解析计算

   效果如下：

图片：box-size1.png

图片：box-size2.png

   没有设置box-sizing属性，即标准模式设置box-sizing:border-box
   .box{
   box-sizing:border-box; //没有添加时，按照标准模式计算，添加时按照怪异模式解析
   width:200px;
   height:200px;
   border:2px solid black;
   padding:50px;
   margin:50px;
   }

喜欢1

盒子计算模式，解决padding改变高度问题

最新喜欢：