css实现div的高度填满剩余空间_css深入浅出

文档流：文档内元素的流动方向

• 内联元素从左往右
• 块级元素从上往下
• block，inline，inline-block 元素的区别：
• block 元素独占一行，宽度占满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素，比较特别的是 <p> 只能包含 inline 元素。
  inline 元素不换行，宽度由其内容决定。设置 width, height 无效。如 span em strong 等。 设置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效， 垂直方向的 padding(padding-top, padding-bottom)，margin(margin-top, margin-bottom) 无效。
  inline-block 元素不换行，设置 width, height, padding, margin 属性有效。 由于 inline-block 元素会产生新的 BFC，因此可以包含浮动。
  div高度

div高度由其内部文档流的高度总和决定

仅一行 内联元素

设置字体高度为20px，使用默认字体时，div高度为28.67

设置font-family:Arial；div高度为24.67

设置line-height:20px；font-size:60px;div高度为22

当仅一行时，div高度由行高确定，与字体大小无关(不同字体行高不同，字体建议行高由设计师确定)

2.多行

使用默认字体：

设置font-family:Arial;