CSS世界（一）流与元素

流

流者，动也，切来由 流水落花春去也,天上人间

CSS的流方向 默认从左至右 从上之下

<div class="father">
      <div class='son'>good</div>
</div>

.father {
     width: 200px;
     height:200px;
     background: red;
}

.son {
    margin-top: 50px;
    background: blue;
}


一个盒子包裹另一个盒子，当包裹盒子没有设置border和padding且div包裹盒子里没有内容，里边盒子的设置的上边距不会起作用。

元素

CSS元素分<内联级元素> 和 <块级元素>
<内联级元素> 常见有： span , label, a, img, em...
<块级元素> 常见有： div li p table...

但这是绝对的吗？
<p class="test">fdsfds</p>
<p class="test">fdsfds</p>

.test{
   display: inline;
}

display

浏览器默认设置将内置语义化的标签设置其display属性，使其成为对应的元素
display 常见属性值： inline， block，inline-block，table， none

  display: none； 与 visibility:hidden；的区别你是否了解?

属性值block

block 块级元素 ， “块级元素”对应的英文是 block-level element 主要用于html结构化布局
1. 一个水平流上只能单独显示一个元素，多个块级元素则换行显示
2. 可以设置宽高

属性值inline

inline 内联元素, “内联级元素”（inline-level elements） 主要用于内容展示
1. 默认无宽高，且无法设置宽高
2. 包裹性， 包裹+自适应  元素包裹内容，宽高根据内容自适应扩展
3. 行内元素，与其他行内元素可以水平排列

幽灵空白节点

span { 
     display: inline-block; 
} 
<div><span></span></div>

问题 以上代码div高度为多少，并解释为什么？