css子元素父元素之 父元素未定义宽度。

css代码:

 
  1. /* CSS Document */  
  2. .a  
  3. {  
  4.     height:100px;  
  5.     background:#ff0;  
  6. }  
  7. .b  
  8. {  
  9.     background:#000;  
  10.     50px;  
  11.     height:50px;  
  12. }  

 html代码:

  1. <div class="a">  
  2. <div class="b">  
  3. </div>  
  4. </div>  
  5. </body>  

显示效果:

发现:会出现父元素的宽度占满屏幕。

css代码:

 
  1. /* CSS Document */  
  2. .a  
  3. {  
  4.     width:100px;  
  5.     background:#ff0;  
  6. }  
  7. .b  
  8. {  
  9.     background:#000;  
  10.     50px;  
  11.     height:50px;  
  12. }  

 html代码:

  1. <div class="a">  
  2. <div class="b">  
  3. </div>  
  4. </div>  
  5. </body>  

显示效果:

发现:父元素的高度却没有占满。


原因:div的是块状元素,所以宽度当然也会独占一行。


参考资料:http://www.zhihu.com/question/22974040

原文地址:https://www.cnblogs.com/imyp/p/4830422.html