关于display样式、overflow样式、文档流、浮动、定位
一、显示与隐藏
1 通过display样式 - none隐藏
语法 - display:none;
特点 - 隐藏以后，元素原有的位置会被占用，
2 通过visibility - hidden隐藏
- visible显示（默认值）
语法 - visibility:hidden;
特点 - 隐藏以后，元素原有的位置还会保留。
二、display样式
1 none 设置隐藏
2 block 将元素变为块元素的显示效果。与HTML元素本身并无联系。
3 inline 将元素变为内联元素的显示效果。与HTML元素本身并无联系。
4 inline-block 将元素变为行内块元素的效果显示。
* 行内块元素:
- 元素本身以块元素的效果显示（宽和高设置有效）
- 元素之间以行内元素的排列方式显示（水平排列，不会独占一行）
* 补充：行内元素有一个特点，在编写HTML代码时，如果元素之间有空格（包括换行符），
如： <span>你好</span> <span>你好</span> <span>你好</span>
或： <span>你好</span>
<span>你好</span>
<span>你好</span>
这样写，在浏览器页面中显示时，元素之间也会出现一个“间隙”。
若： <span>你好</span><span>你好</span><span>你好</span>
这样写，就可以消除间隙，但是代码的可读性不好。
三、overflow样式（设置子元素溢出时父元素如何处理）
1 visible 默认值，内容可能会溢出。
* 内容溢出定义：
当定义一个元素，并且在此元素定义文本内容，当文本内容过多时，可能显示会超出当前元素的区域。
但是在IE6中父元素会被撑开，不会溢出。
2 hidden 溢出的内容会被修剪，并且修剪掉的内容是不可见的
3 scroll 浏览器会显示竖直、水平滚动条来显示内容
4 auto 有两种可能的效果
- 当内容溢出时，会自动添加竖直滚动条（相当于scroll）
- 当内容不会溢出时，不会添加滚动条。（相当于默认样式）
四、文档流
1 定义 - 垂直方向从上到下的顺序排列，水平方向从左到右的顺序排列
2 注意 - 默认情况下，排列的顺序是不能改变的.
3 脱离文档流的三种方式： 浮动、绝对定位、固定定位
五、浮动
1 特点 - 当前元素脱离文档流，并且在页面中不再占有位置。
注意 - 元素设置浮动以后，元素将会最大程度漂浮到元素的最上边，直到遇到父元素的边框或其他的浮动元素。
- 如果父元素的宽度不足以装下所有的浮动子元素，子元素将会换行。
- 块元素 本来不设置浮动时，会占父元素的100%，设置浮动以后宽度不再占父元素的100%，而是被子元素撑开。
- 内联元素 设置浮动以后会变成块元素。
2 可选值
- left
- right
3 浮动应用的特殊场景
- 对于父子元素，当设置子元素浮动时，不会超出父元素的范围。
- 对于相邻兄弟元素，存在两种情况
- 如果两个元素都设置了浮动，两个元素将变为水平排列。
- 如果前一个元素不设置浮动，后一个元素设置了浮动，
那么后一个元素不会超出（最多是齐着）或覆盖前一个元素。
- 文本内容不会被浮动的元素覆盖，会环绕在浮动元素的周围。
应用：文字环绕图像效果。
六、高度塌陷问题
原因：文档流中，默认情况下，没有设置宽度和高度时，
默认的宽度是父元素的整个宽度。
默认的高度是0或者子元素的高度的总和。
特点：对于父子元素，如果父元素没有设置高度，子元素设置了高度，并且浮动。
现象：父元素的高度显示为0. —— 高度塌陷问题
七、高度塌陷解决方案：
* BFC块级格式化环境
- BFC是元素的隐含属性。默认情况下，BFC是关闭的
- 如何开启BFC
* 将当前元素设置为浮动
* 将当前元素的 overflow 设置为 非visible 的值(一般为hidden)
* 在所有子元素的最后，新增一个子元素，并且设置子元素的 clear 属性值为 both
* 高度塌陷解决方案
1 为父级元素设置高度height为所有子元素的高度之和。
存在问题：需要根据子元素高度人为计算父级元素的height值。
2 为父级元素和子级元素同时设置浮动，父级元素没有设置宽度和高度。可以使父元素包裹子元素。
结果显示：父级的宽度和高度分别是子元素的宽度和高度之和。
3 将当前元素的 overflow 设置为 非visible 的值(一般为hidden)
4 在所有子元素的最后，新增一个子元素，并且设置 clear 属性值为 both
注意：清除浮动可以清除其他元素对本元素的影响。
问题：新增的元素会造成代码冗余。
5 设置父元素的 :after伪类display为inline-block，然后清除浮动。
问题：IE6、7不支持 :after伪类。
* 总结 最好的方式是 - overflow:hidden
- 在IE6中不能开启BFC，但是他有另外一个隐藏属性：
- 开启方式（副作用比较小的）： zoom: 1; (只兼容IE6)
八、定位
* 元素开启定位以后，如果不设置偏移量，元素不会发生任何变化。
* 元素开启定位以后，可以通过z-index来设置元素的层级。
将z-index设为整数值，值越大，层级越高。
1 static - 默认值，表示元素不开启定位
2 relative - 相对定位
3 absolute - 绝对定位
4 fixed - 固定定位
九、绝对定位 absolute
1 当父级元素没有设置定位，子级元素设置了定位时，子级元素会根据页面进行偏移。
2 当父级元素和子级元素都设置了定位时，子级元素会相对于父级元素设置定位。
3 行内标签开启绝对定位以后，会变成块级元素（高和宽有效），同时也会脱离文档流。
4 开启绝对定位以后，元素会提升一个层级。
5 当元素设置绝对定位时，宽度和高度默认由内容决定。
偏移量的设置：
left和top - 设置距离左边和上边的值。
righthe bottom - 设置距离右边和下边的值。
十、固定定位
1 特点：当元素开启固定定位以后，会脱离文档流。
固定定位是绝对定位的一种特殊形式，始终依据浏览器窗口来定义自己的显示位置。
2 效果：不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示
在浏览器窗口的固定位置。
3 当行内元素开启固定定位以后，也会改变元素的性质，即变成块元素，同时脱离文档流。
十一、相对定位
1 特点：开启以后元素相对于元素自身原来的位置发生偏移。
元素不会脱离文档流，并且元素会提升一个层级（覆盖没定位的元素）。
元素开启相对定位以后，不会改变元素的性质。
也就是说块元素设置相对定位还是块元素，内联元素设置相对定位以后还是内联元素。
1 通过display样式 - none隐藏
语法 - display:none;
特点 - 隐藏以后，元素原有的位置会被占用，
2 通过visibility - hidden隐藏
- visible显示（默认值）
语法 - visibility:hidden;
特点 - 隐藏以后，元素原有的位置还会保留。
二、display样式
1 none 设置隐藏
2 block 将元素变为块元素的显示效果。与HTML元素本身并无联系。
3 inline 将元素变为内联元素的显示效果。与HTML元素本身并无联系。
4 inline-block 将元素变为行内块元素的效果显示。
* 行内块元素:
- 元素本身以块元素的效果显示（宽和高设置有效）
- 元素之间以行内元素的排列方式显示（水平排列，不会独占一行）
* 补充：行内元素有一个特点，在编写HTML代码时，如果元素之间有空格（包括换行符），
如： <span>你好</span> <span>你好</span> <span>你好</span>
或： <span>你好</span>
<span>你好</span>
<span>你好</span>
这样写，在浏览器页面中显示时，元素之间也会出现一个“间隙”。
若： <span>你好</span><span>你好</span><span>你好</span>
这样写，就可以消除间隙，但是代码的可读性不好。
三、overflow样式（设置子元素溢出时父元素如何处理）
1 visible 默认值，内容可能会溢出。
* 内容溢出定义：
当定义一个元素，并且在此元素定义文本内容，当文本内容过多时，可能显示会超出当前元素的区域。
但是在IE6中父元素会被撑开，不会溢出。
2 hidden 溢出的内容会被修剪，并且修剪掉的内容是不可见的
3 scroll 浏览器会显示竖直、水平滚动条来显示内容
4 auto 有两种可能的效果
- 当内容溢出时，会自动添加竖直滚动条（相当于scroll）
- 当内容不会溢出时，不会添加滚动条。（相当于默认样式）
四、文档流
1 定义 - 垂直方向从上到下的顺序排列，水平方向从左到右的顺序排列
2 注意 - 默认情况下，排列的顺序是不能改变的.
3 脱离文档流的三种方式： 浮动、绝对定位、固定定位
五、浮动
1 特点 - 当前元素脱离文档流，并且在页面中不再占有位置。
注意 - 元素设置浮动以后，元素将会最大程度漂浮到元素的最上边，直到遇到父元素的边框或其他的浮动元素。
- 如果父元素的宽度不足以装下所有的浮动子元素，子元素将会换行。
- 块元素 本来不设置浮动时，会占父元素的100%，设置浮动以后宽度不再占父元素的100%，而是被子元素撑开。
- 内联元素 设置浮动以后会变成块元素。
2 可选值
- left
- right
3 浮动应用的特殊场景
- 对于父子元素，当设置子元素浮动时，不会超出父元素的范围。
- 对于相邻兄弟元素，存在两种情况
- 如果两个元素都设置了浮动，两个元素将变为水平排列。
- 如果前一个元素不设置浮动，后一个元素设置了浮动，
那么后一个元素不会超出（最多是齐着）或覆盖前一个元素。
- 文本内容不会被浮动的元素覆盖，会环绕在浮动元素的周围。
应用：文字环绕图像效果。
六、高度塌陷问题
原因：文档流中，默认情况下，没有设置宽度和高度时，
默认的宽度是父元素的整个宽度。
默认的高度是0或者子元素的高度的总和。
特点：对于父子元素，如果父元素没有设置高度，子元素设置了高度，并且浮动。
现象：父元素的高度显示为0. —— 高度塌陷问题
七、高度塌陷解决方案：
* BFC块级格式化环境
- BFC是元素的隐含属性。默认情况下，BFC是关闭的
- 如何开启BFC
* 将当前元素设置为浮动
* 将当前元素的 overflow 设置为 非visible 的值(一般为hidden)
* 在所有子元素的最后，新增一个子元素，并且设置子元素的 clear 属性值为 both
* 高度塌陷解决方案
1 为父级元素设置高度height为所有子元素的高度之和。
存在问题：需要根据子元素高度人为计算父级元素的height值。
2 为父级元素和子级元素同时设置浮动，父级元素没有设置宽度和高度。可以使父元素包裹子元素。
结果显示：父级的宽度和高度分别是子元素的宽度和高度之和。
3 将当前元素的 overflow 设置为 非visible 的值(一般为hidden)
4 在所有子元素的最后，新增一个子元素，并且设置 clear 属性值为 both
注意：清除浮动可以清除其他元素对本元素的影响。
问题：新增的元素会造成代码冗余。
5 设置父元素的 :after伪类display为inline-block，然后清除浮动。
问题：IE6、7不支持 :after伪类。
* 总结 最好的方式是 - overflow:hidden
- 在IE6中不能开启BFC，但是他有另外一个隐藏属性：
- 开启方式（副作用比较小的）： zoom: 1; (只兼容IE6)
八、定位
* 元素开启定位以后，如果不设置偏移量，元素不会发生任何变化。
* 元素开启定位以后，可以通过z-index来设置元素的层级。
将z-index设为整数值，值越大，层级越高。
1 static - 默认值，表示元素不开启定位
2 relative - 相对定位
3 absolute - 绝对定位
4 fixed - 固定定位
九、绝对定位 absolute
1 当父级元素没有设置定位，子级元素设置了定位时，子级元素会根据页面进行偏移。
2 当父级元素和子级元素都设置了定位时，子级元素会相对于父级元素设置定位。
3 行内标签开启绝对定位以后，会变成块级元素（高和宽有效），同时也会脱离文档流。
4 开启绝对定位以后，元素会提升一个层级。
5 当元素设置绝对定位时，宽度和高度默认由内容决定。
偏移量的设置：
left和top - 设置距离左边和上边的值。
righthe bottom - 设置距离右边和下边的值。
1 特点：当元素开启固定定位以后，会脱离文档流。
固定定位是绝对定位的一种特殊形式，始终依据浏览器窗口来定义自己的显示位置。
2 效果：不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示
在浏览器窗口的固定位置。
3 当行内元素开启固定定位以后，也会改变元素的性质，即变成块元素，同时脱离文档流。
十一、相对定位
1 特点：开启以后元素相对于元素自身原来的位置发生偏移。
元素不会脱离文档流，并且元素会提升一个层级（覆盖没定位的元素）。
元素开启相对定位以后，不会改变元素的性质。
也就是说块元素设置相对定位还是块元素，内联元素设置相对定位以后还是内联元素。