<!-- test1: 关于行盒和行块盒的空白折叠问题 --> <!-- 行块盒右边的空白折叠为一个 (操作:切换span2的display为inline ,往右书写ggg1的位置)--> <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'> <span class="span1" style="display:block;font-size:32px;background-color:rgb(252, 240, 171);">ggg1 </span> <span class="span2" style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg1 </span> ggg1 </div> <!-- 行盒的右边空白忽略 --> <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'> <span class="span1" style="display:block;font-size:32px;background-color:rgb(252, 240, 171);">ggg1 </span> <span class="span2" style="font-size:32px;background-color:rgb(252, 183, 171);">ggg1 </span> ggg1 </div> <!-- test2:行块盒与行块盒 --> <!-- 行块盒右边的空白折叠为一个,由父元素的font-size控制大小 --> <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'> <span class="span1" style="display:inline-block;font-size:32px;background-color:rgb(252, 240, 171);">ggg2 </span><span class="span2" style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg2 </span> <span class="span3" style="display:inline-block;font-size:32px;background-color:rgb(247, 87, 161);">ggg2 </span> </div> <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'> <span class="span1" style="display:inline-block;font-size:32px;background-color:rgb(252, 240, 171);">ggg2 </span><span class="span2" style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg2 </span> <span class="span3" style="display:inline-block;font-size:32px;background-color:rgb(247, 87, 161);">ggg2 </span>ggg2 ggg2 </div> <!--test3: 行盒与行盒 (特别) --> <!-- 行盒子后面摆放"行盒"(有文本就有),前一个行盒子出现右拉伸 --> <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'> <span class="span1" style="font-size:32px;background-color:rgb(252, 240, 171);">ggg3 </span> <span class="span2" style="font-size:64px;background-color:rgb(252, 183, 171);">ggg3 </span> ggg3 ggg3 </div> <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'> <span class="span1" style="font-size:32px;background-color:rgb(252, 215, 8);">ggg3 </span> <span class="span2" style="font-size:0px;background-color:rgb(255, 1, 1);">ggg3 </span> </div> <!-- test4: 行盒子后面摆放"行块盒",前一个行盒子出现右拉伸 --> <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'> <span class="span1" style="font-size:32px;background-color:rgb(194, 252, 171);">ggg4 </span> <span class="span2" style="display:inline-block;font-size:64px;background-color:rgb(52, 247, 3);"> </span> </div> <!-- test5: span2后面无行盒子或者行块盒子,无右拉伸 --> <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'> <span class="span1" style="font-size:32px;background-color:rgb(194, 252, 171);">ggg5 </span> <span class="span2" style="font-size:64px;background-color:rgb(252, 203, 171);">ggg5 </span> </div> <!-- test6: 行盒左右两边一个行块盒 --> <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'> <span class="span2" style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252, 171, 171);"> </span><span class="span1" style="font-size:32px;background-color:rgb(194, 252, 171);">ggg6 </span> <span class="span2" style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252, 203, 171);"> </span> </div> <!-- test7: 去掉ggg77效果一样,说明父元素有参考线 --> <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'> <span class="span2" style="display:inline-block;height:40px;width:100px;font-size:64px;background-color:rgb(252, 171, 171);"> </span> <span class="span2" style="display:inline-block;height:60px;width:120px;background-color:rgb(197, 83, 7);"> </span> ggg77 </div>
一个元素内部有行盒(或者行块盒),且font-size>0时,该元素会产生参考线
vertical-align 可以设置行盒或者行块盒
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论