一开始我一直在想玩什么wrap要加上float:left，不加会怎么样？然后尝试着不加float:left，结果发现如果不加就不会出现居中效果，会跟一开始一样文字在最左边。
后来反复试验，终于有点理解为什么要加上float:left，不过我自己不太能表达出来，简单来说，我个人理解就是：
如果不加float:left，因为div class="wrap"是块状元素，所以是独占一行的，文字后面延伸到浏览器最右侧，导致这个div class="wrap"里面的元素（指div class="wrap-center"）也是延伸到浏览器最右侧的，假设div class="wrap"的宽度是100，那么div class="wrap-center"的宽度也是100，所以前面所说的，在wrap里面用left:50%往右移动50%，然后又在wrap-center里面用left:-50%，因为wrap和wrap-center宽度是相等的，导致它们抵消了，所以最后不会出现任何居中效果。
然而，如果在wrap里面加了float:left，意思就是左浮动，根据前面第12章里面所说的浮动模型的特征，wrap是不能独占一行的，wrap如果加了左浮动，然后里面又嵌套有其他元素的话(这里指wrap-center)，第一个重点来了：wrap将会在“我们来学习一下这种方法。”这句话之后把wrap-center放进去，也就是说“我们来学习一下这种方法。”这句话后面不会出现可以一直延伸到浏览器最右侧的空白，而是出现了wrap-center。而且第二个重点也来了：就是wrap-center的宽度会跟wrap的宽度保持一致(当然这里是指wrap-center里面没有指定width而是保持默认的情况下)。
此时，假设“我们来学习一下这种方法。”这段话的长度为10，那么wrap-center的长度就是10，此时再在wrap-center里面用left:-50%，就是往左移动-50%，大家脑补一下，这个时候就实现了把这段文字居中的效果。到现在我们可以看到，之前是根据wrap的长度100移动了50%，后来是根据wrap-center，其实就是“我们来学习一下这种方法。”这段文字的长度移动了-50%。这就是原理。
不知道大家看懂没，我是尽力了。。。
添加回答
举报
0/150
提交
取消