CSS
1、overflow属性
问题：定义一个元素，并在元素内添加文本内容，当文本内容过多时，可能显示会超出当前元素的区域。这种现象叫做内容溢出。
解决内容溢出的思路就是：文本内容不要超过指定的区域。
overflow属性：用于设置当前元素内容溢出后的情况。
属性：
·visible：默认，内容不会修剪，内容会呈现在元素之外。表示不处理。
·hidden：内容会被修剪，但浏览器不会显示查看内容的滚动条。
·scroll：内容会被修剪，浏览器会显示滚动条，以便查看其余内容。
·auto：如果内容会被修剪，浏览器会显示滚动条，以便查看其余内容
2、文档流
概念：将窗体自上而下分成一行一行，并在每行中按从左至右的顺序依次排列元素，称为文档流。
文档流是HTML页面的底层结构，HTML页面创建的元素都默认在文档流中。
块级元素：
·在文档流中自上而下排列（垂直方向）。
·在文档流中默认的宽度是父元素的100%。
·在文档流中默认的高度是被所有子元素的高度总和。
内联元素：
·在文档流中自左向右水平排列（水平方向）。
·内联元素的宽度和高度都由内容确定。
·注意：如果在一行中不能容纳所有的元素，则会换到下一行，继续自左向右排列。
3、浮动
在CSS中，我们通过float来设置元素浮动。
浮动会使元素脱离文档流，向左或向右移动，其他元素的位置会被重新排列。
可选值：left，向左浮动。
right，向右浮动。
4、高度塌陷
问题描述：定义父级和子级元素，父级没有设置高度，子级设置了高度，并且浮动，结果就会导致父级的显示高度为0。这个现象就叫做高度塌陷。
解决高度塌陷的方式：
1、为父元素设置高度。（因为高度需要计算，所以一般不推荐使用）
2、将父级元素和子级元素同时设置浮动。父元素没有设置高度和宽度。
结果父级的宽度和高度，是所有子元素的高度和宽度的总和。
3、开启BFC（块级格式化环境Block Formatting context）,BFC是元素的隐含属性，一般情况下是关闭的，当元素开启BFC时，会具有以下几个特点：
·文档流中的元素不会被设置浮动的元素所遮盖。
·子元素垂直方向的外边距不会传递给父元素。
·元素可以包含浮动的子元素。
BFC不能直接打开，需要一些间接的方式才能打开：
·设置元素浮动。
·设置元素的display为inline-block。
·设置元素为绝对定位。（后面的内容）。
·将元素的overflow设置为一个非visible的值（一般为hidden）。
·在所有子元素的最后新增一个子元素，并设置clear属性为both。
5、定位
position属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
可选值： static--默认值，表示静态定位（没有开启定位）。
relative--表示相对定位。
absolute--表示绝对定位。
fixed--表示固定定位。
绝对定位absolute：
参照物：最近的已定位（fixed / relative / absolute）祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于<html> 或 <body>.
脱离DOM流，不占据空间
常用作动画结构。
绝对定位将元素相对于具有非静态位置值的最近父元素定位。
如果没有这样的元素，则元素相对于主体元素定位。
绝对定位的元素从正常文档流中移除。
绝对定位的元素可以与其他元素重叠。
相对定位：
相对定位元素相对于其正常位置定位。
相对值应用顶部，底部，左侧和右侧属性来定位元素相对于默认布局下的位置。。
相对定位的元素通常用作绝对定位的元素的容器块。
固定定位：
当使用固定值时，元素将相对于浏览器窗口放置。
元素占据相同的位置，即使内容的其余部分向上或向下滚动。
注意：仅当指定了！DOCTYPE 时，IE7和IE8才支持固定值。
固定元素从正常流中移除。固定定位的元素可以与其他元素重叠。
position：
1.static定位：
html元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top bottom left right 影响。
2.fixed定位：（固定定位）
2.1 参照物：浏览器窗口
2.2 脱离DOM流，不占据空间。
2.3 常用作漂浮广告，返回顶部。
3.relative定位：（相对定位）
3.1 参照物：自身。
3.2 存在DOM流中，占据原先的空间.
3.3 常被用来作为绝对定位元素的容器块。
4.absolute定位：（绝对定位）
4.1 参照物：最近的已定位（fixed / relative / absolute）祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于<html> 或 <body>.
4.2 脱离DOM流，不占据空间
4.3 常用作动画结构。
页面中使用定位(position)的理解
position：static | relative | absolute | fixed | center | page | sticky
默认值：static，center、page、sticky是CSS3中新增加的值。
(1)、static
可以认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。
(2)、relative
相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
(3)、absolute
a、绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
b、元素定位参考的是离自身最近的定位祖先元素，要满足两个条件，第一个是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位，通俗说就是position的属性值为非static都行。
(4)、fixed
固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
vertical-align属性：
