css奇怪现象(有例子)

k1999hj 发布于 2015/09/26 19:46
阅读 160
收藏 0
PHP
之前发了一个问题,因为没有例子,网友根本不知道我在说什么。现在我为大家带来了我的证据。


不知道大家看到这里的灵异情况没有。首先我在这里私自定义一个词语——实际高度。
而这个实际高度就是等于,调试情况下鼠标移动到的div显示的高度(这里是62px).
正常来说实际高度应该是=height(这里是62px)+上下内填充(这里padding:20px 8%;就是说上下内填充各20px),也就是说实际高度应该是62+20+20=102px,但这里却是62px,大家在看看,熟悉chrome调试的应该知道,选中的div绿色部分是内填充,蓝色部分是height对应的高度,大家看看这里padding很正常,但是蓝色就只有那么一点点,而似乎这里的蓝色和绿色加起来就是62px,刚好等于height,而蓝色部分就等于height-两个20px;这是怎么回事。
还有,l2外面有一个padding:15px 0;的div;就是大家看到的l2两边的空白地方,但是我已经把widht弄成100%;还加了一个左右8%的内填充,l2应该会撑到外面去的,为什么这里得到
width:84%;padding:20px 8%;的结果呢?
加载中
1
zabcd117
zabcd117
看一下盒子模型的原理吧,width就是自己的宽度,不包括padding。css3里面有一个属性box-sizing,可以解决你的疑问。但是,一般不这么用。虽然这个标准盒模型确实有点奇怪。
k
k1999hj
我现在的问题就是,我没有设置box-sizing:border-box;盒子都出现了这种效果。
0
游走的鱼
 不懂你在说什么啊
返回顶部
顶部