一、文档流
（一）知识准备
- 最新的HTML5已经不把元素一棒子打死的分为行内元素和块级元素了。因为任何元素都可以修改变成行内元素或者块级元素。当display：inline时，为行内元素；当display：block时，为块级元素。当display：inline-block时，为inline-block元素
- 把纯文本文字当成一个行内元素
- 别在inline元素中加block元素，不然你会晕倒。
- 新手写css代码一定给每个元素先加上border！
（二）流动方向
- inline元素从左到右，到达最右边才会换行，可能把一个元素从中间断开。
- 如果存在横滚动条，inline元素只在在第一屏显示，拉动横滚动条会看见第一屏之外为空白
- block元素从上到下，每一个都另起一行。
- inline-block元素从左到右，但不会把一个元素从中间断开。
（三）宽度
- inline元素宽度为内部inline元素之和，不可用width指定。
- block元素默认自动计算宽度，注意不是100%，而是能有多宽有多宽。可以用width指定（比如在标签里加上属性
sytle="width: 100px;"）
- 注：只有极少数情况才可以吧width指定为100%，所以一般别乱用100%
- inline-block元素宽度为内部inline元素之和，可以用width指定。
（四）高度
- inline元素的（实际）高度由line-height（行高）间接确定，不能用height指定。
- 用了间接是因为有时候改变了字体会把设置好的行高改变一点，具体参考文章。
- 如果给inline元素加上了内边距padding，改变的只是可视高度，不是这个inline元素的实际高度。
- 如图4
- block元素的高度由内部文档流元素决定，可以用height指定.如图5
- inline-block元素的高度由内部文档流元素决定，可以用height指定
（五）overflow溢出
1.定义
当内容的高度或宽度大于容器的高度或宽度，内容就会溢出。如图6
2.用overflow来设置是否显示滚动条
（1） auto：灵活设置，超过才有滚动条
（2） scroll：一直显示滚动条
（3）hidden：直接隐藏溢出部分
（4）overflow：直接显示溢出部分
（六）脱离文档流
1.概念
有些元素可以不在文档流中，这时block元素高度就不会把这些元素计入其中。
2. 脱离文档流的方法
- 方法一：
position: absolute - 方法二：
float:left or right or both
二、盒模型
（一）定义
1.元素
- margin：外边距
- border：边框
- padding：内边距
- content：内容
- width：宽度
2.盒模型共分两种
（1）content-box（内容盒）
- 内容就是盒子的边界
- content-box width=内容宽度
（2）border-box (边框盒)
- 边框才是盒子的边界
- border-box width=内容宽度+padding+border
- border-box更好用
3.可从开发者工具中看到盒模型的尺寸
打开开发者工具→点击左上角的指针→点击要查看的盒模型→在Style中即可看见
（二）margin合并
注：1. 只有上下合并
- float元素不会出现margin合并现象
1.兄弟margin合并
（1）举例
将第一个子div的下外边距设为30像素，第二个子div的上外边距设为30像素，而最终两个子div之间只有30px的外边距，如下图，这种情况就为兄弟合并。这是个好现象！
（2）消除兄弟合并现象
在兄弟元素中添加以下代码
width: 100%; #可有可不有，不有时需要多写几个兄弟
display: inline-block； #把兄弟元素设为inline-block元素
2.父子margin合并
（1）举例
第一个子元素和最后一个子元素的margin会和父元素的margin合并
（2）消除父子合并的方法
在父级元素中加上
- 方法一：
border: 2px solid blue; - 方法二：
padding-top: 1px; - 方法三：
overflow: hidden;
三、基本单位
1.长度单位
（1）px：像素
（2）em：相对于自身font-size的倍数
（3）百分数
（4）整数
（5）rem
（6）vw和vh
- 具体哪个元素可以使用哪些长度单位，需要使用MDN搜索
2.颜色
（1）十六进制：#FF6600或者#F60
（2）RGBA颜色
- rgb(0,0,0):括号中的三个数值分别表示（红，绿，蓝），均取值为0-225。
- rgba(0,0,0,0):括号中的前三个数值同上，最后一个数值表示透明度，取值为0-1。
（3）hlsa颜色
- hls(0,0,0):括号中的三个数值分别表示（色相，饱和度，亮度）,分别取值为0-360，百分数，百分数。
- hlsa(0,0,0,0):括号中的前三个数值同上，最后一个数值表示透明度，取值为0-1。
