CSS样式学习笔记之浮动 定位 布局
浮动的简介
在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
元素浮动后的特点
1. 脱离文档流。
2. 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
3. 不会独占一行，可以与其他元素共用一行。
4. 不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
5. 不会像行内块一样被当做文本处理（没有行内块的空白问题）。
浮动后的影响
对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的后面；对前面的兄弟无影响。
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
解决浮动产生的影响
解决方案：
1. 方案一： 给父元素指定高度。
2. 方案二： 给父元素也设置浮动，带来其他影响。
3. 方案三：给父元素设置 overflow: hidden
4. 方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear: both。
5. 方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===>推荐使用
.parent::after {
content: '';
display: block;
clear: both;
}布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。
相对定位
▍如何设置相对定位?
○ 给元素设置 position：relative 即可实现相对定位。
○ 可以使用 left、right、top、 bottom 四个属性调整位置。
▍相对定位的参考点在哪里?
○ 相对自己原来的位置
▍相对定位的特点：
1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
▍默认规则是：
○ 定位的元素会盖在普通元素之上。
○ 都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
4. 相对定位的元素，也能继续浮动，但不推荐这样做。
5. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。
▍注意：绝大多数情况下，相对定位，会与绝对定位配合使用。
绝对定位
▍如何设置绝对定位?
○ 给元素设置 position：absolute 即可实现绝对定位。
○ 可以使用 left、right、top、 bottom 四个属性调整位置。
▍绝对定位的参考点在哪里?
○ 参考它的包含块。
什么是包含块?
1. 对于没有脱离文档流的元素：包含块就是父元素：
2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包
含块就是整个页面）。
▍绝对定位元素的特点：
1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4. 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5. 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。
▍何为定位元素? -- 默认宽、高都被内容所撑开，且能自由设置宽高。
固定定位
▍如何设置为固定定位?
○ 给元素设置 position:fixed 即可实现固定定位。
○ 可以使用 left、right、top、bottom 四个属性调整位置,。
▍固定定位的参考点在哪里?
○ 参考它的视口
什么是视口? -- 对于 PC 浏览器来说，视口就是我们看网页的那扇“窗户”
▍固定定位元素的特点
1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
4. 固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5. 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。
粘性定位
▍如何设置为粘性定位?
○ 给元素设置 position: sticky 即可实现粘性定位。
○ 可以使用 left、right、 top、 bottom 四个属性调整位置，不过最常用的是 top 值。
▍粘性定位的参考点在哪里?
○ 离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
▍粘性定位元素的特点
○ 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
○ 最常用的值是 top 值。
○ 粘性定位和浮动可以同时设置，但不推荐这样做。
○ 粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。
▍粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。
定位的层级
1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2. 如果位置发生重叠，默认情况是:后面的元素，会显示在前面元素之上。
3. 可以通过 css 属性 z-index 调整元素的显示层级。
4. z-index 的属性值是数字，没有单位，值越大显示层级越高。
5. 只有定位的元素设置 z-index 才有效。
6. 如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级
定位的特殊应用
▍注意：
1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
2. 发生相对定位后，元素依然是之前的显示模式。
3. 以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。
▍让定位元素的宽充满包含块
1. 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。
2. 高度想与包含块一致，top 和 bottom 设置为 0。
▍让定位元素在包含块中居中
○ 方案一：
left: 0: right: 0: top: 0; bottom: 0; margin: auto;
○ 方案二：
left: 50%; top: 50%: margin-left: 负的宽度一半： margin-top: 负的高度一半:
▍注意：该定位的元素必须设置宽高!!!
布局-版心
在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般是 968~1288 像素之间。
版心可以是一个，也可以是多个。
布局-常用类名
| 位置 | |
| 顶部导航条 | topbar |
| 页头 | header、page-header |
| 导航 | nav、navigator、navbar |
| 搜索框 | search、search-box |
| 横幅、广告、宣传图 | banner |
| 主要内容 | content、main |
| 侧边栏 | aside 、sidebar |
| 页脚 | footer、page-footer |
布局-重置默认样式
很多元素都有默认样式，比如：
1. p元素有默认的上下 margin 。
2. h1~h6 标题也有上下 margin ，且字体加粗。
3. body 元素有默认的 8px 外边距。
4. 超链接有默认的文字颜色和下划线。
5. u1 元素有默认的左 pading 。
6. ......
在早期，元素默认样式，能够让我们快速的绘制网页，但如今网页的设计越来越复杂，内容越来越多，而且很精细，这些默认样式会给我们绘制页面带来麻烦;而且这些默认样式，在不同的浏览器上呈现出来的效果也不一样，所以我们需要重置这些默认样式。
方案一：使用全局选择器
* {
margin: 0;
padding: 0;
}此种方法，在简单案例中可以用一下，但实际开发中不会使用，因为 * 选择的是所有元素，而并不是所有的元素都有默认样式；而且我们重置时，有时候是需要做特定处理的，比如：想让a元素的文字是灰色，其他元素文字是蓝色。
方案二：reset.css
选择到具有默认样式的元素，清空其默认的样式。
经过 reset 后的网页，好似“一张白纸”，开发人员可根据设计稿，精细的去添加具体的样式。
方案三：Normalize.css
Normalize.css 是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式。
官网地址：http://necolas.github.io/normalize.css/
相对于reset.css，Normalize.css 有如下优点：
1. 保护了有价值的默认样式，而不是完全去掉它们。
2. 为大部分HTML元素提供一般化的样式。
3. 新增对 HTML5 元素的设置。
4. 对并集选择器的使用比较谨慎，有效避免调试工具杂乱。
备注：Normalize.css 的重置，和reset.css 相比，更加的温和，开发时可根据实际情况进行选择。
