文档流学习笔记

1. 什么是文档流

定义：文档的流动方向。英文名为normal flow。三种：

• inline元素(内联元素)从左到右
• block元素(块级元素)从上到下
• inline-block元素，也是从左到右

但在新的HTML5标准中不再分内联元素与块级元素，直接用CSS指定。示例代码如下：

/*内联元素*/
div{
    display: inline;
}

/*块级元素*/
div{
    display: block;
}

/*  inline-block */
div{
    display: inline-block;
}

1.1 inline

• inline元素不接受指定宽度和高度
• 其宽度与高度由内部元素总和间接决定

1.2 block

• block宽度默认为auto，高度由内部文档流元素决定
• 一般不要写width : 100%

1.3 inline-block

• inline-block的默认宽度及高度和span一样
• 但是可以用width与height指定

2. overflow

中文名为溢出，用于当内容大于容器时，可设置是否显示滚动条。

• auto：灵活设置
• scroll：永远需要，一般不用。
• hidden：隐藏溢出
• visible：直接显示

3. 脱离文档流

• 方法1：position: absolute;或position: fixed;
• 方法2：float: left;