注意事项

1. 必须用中文符号，不然浏览器会警告
2. 区分大小写

文档流（normal flow）

1. 中文翻译不准确，即元素的正常流动方向
2. 内联元素（inline）如<span> 从左到右分布，到最右边自动换行（一个元素可能分成两块分布在上下两行）
3. 块级元素（block）如<div> 从上到下分布，每一个块级元素占一行（无论如何都占一行）
4. 可通过display属性来修改一个元素的类型（是块级或者内联或者inline-block）
5. inline-block元素虽然是从左到右分布，但是每一个元素会永远保持完整，即不会分成两块分布在上下两行

宽度

1. 内联元素的宽度由其内部的内联元素的总和宽度决定，不能用样式设置宽度！
2. 块级元素的默认宽度是auto, 不是100%，可用width设置
3. 尽量不写宽度100%
4. inline-block元素宽度跟<span>一样，但是可以设置width

高度

1. <span>的高度由line-height决定，<span>的可视高度和实际高度是不一样的！无法设置高度
2. <div>的高度是由其内部正常流动元素（文档流元素）决定，即会把其内部所有的文档流元素都包住，可以设置高度

overflow（不适用于内联元素）

当容器内部文档流元素的高度大于容器的高度，就会溢出
overflow为hidden 则隐藏溢出的元素
overflow为scroll 永久显示滚动条
overflow为auto 自动选择合适的时机显示滚动条
overflow为visible 默认情况直接显示溢出的状态

盒模型

1. 一个盒子通常可分为外边距（margin），border，内边距（padding），以及内容content
2. width只表示content的宽度，为content-box
3. width表示border和content的总宽度，则为border-box
4. 高度同理！

margin重叠

1. 子元素与子元素的上下边距会重叠，而不会叠加
2. 父元素与首尾元素的上下边距会重叠，而不会叠加
3. 左右边距不会重叠