1.位置伪类选择器
2.了解什么是伪元素？
伪元素: 在不动结构代码的前提下,添加元素
content是必须的,哪怕是空也要写!!!!!!!
3.清除浮动的影响
3.1、浮动的影响是什么？
3,2、清除浮动影响的办法
1、高度法,直接给父元素设置高度
适合固定高度的盒子
不适合动态高度盒子
没有那么完美
2、给父元素加：overflow: hidden;
触发BFC机制,让盒子的内部布局不影响外部
你要懂,但是不建议使用
是因为人家的本职工作不是为了清除浮动影响
3、额外标签法
在子元素的最后,添加一个额外标签,并且给这个标签设置一个属性: clear:both;
4、单伪元素清除浮动的影响
给父元素添加类名clearfix
.clearfix::after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
5、双伪元素清除浮动的影响
给父元素添加类名clearfix
.clearfix::before,
.clearfix::after {
content: "";
display: block;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
4.定位属性学习
4.1、固定定位属性（position: fixed;）
定位 = 定位模式 + 边偏移
/* 固定定位 */
/* 1. 脱离标准流,不占据标准流的位置 */
/* 2. 实现模式转换,拥有行内块的特点 */
/* 3. 固定定位的元素会固定在页面的某个位置,不会随着内容滚动 */
/* 例如:固定的搜索框,导航栏,广告模块..... */
/* 定位的位移方式 */
/* margin-left: 200px; */
/* 定位元素依旧可以使用margin以及padding进行位移 */
/* 边偏移属性 */
/* top: 100px; */
/* 距离顶部100px */
/* left: 100px; */
/* 距离左边100px */
right: 0;
bottom: 0;
/* 固定定位的位移参照物是浏览器(body) */
4.2、绝对定位属性（position: absolute;）
/* 绝对定位 */
/* 1. 脱离标准流,不占据标准流的位置 */
/* 2. 实现模式转换,拥有行内块的特点 */
/* 绝对定位的位移 */
/* 1. 当所有的父元素没有定位(固定 绝对 相对),那么绝对定位子元素参照body */
/* 2. 如果父元素有定位(固定 绝对 相对),那么绝对定位子元素参照最近的定位父元素 */
/* 拓展: 绝对定位会单独出现吗? */
/* 绝对定位永远都需要父元素定位的配合 */
/* 子绝父固 */
/* 子绝父绝 */
/* 子绝父相------最常见的组合 */
4.3、相对定位属性（position: relative;）
/* 相对定位 */
/* 1. 相对定位不会改变显示模式 */
/* 2. 相对定位不会主动脱标 */
/* 相对定位,好像没有任何卵用....... */
/* 相对定位绝大多数都是配合绝对定位,子绝父相 */
5.定位元素居中方式
/* margin: 0 auto; */
/* 为什么margin: 0 auto没有效果----绝对定位元素实现了模式转换,行内块 */
/* 先走父元素的一半,再往回走自己的一半 */
/* margin-left: 50%;
margin-left: -250px; */
/* 层叠性错误 */
6.定位元素的层级
/* 定位盒子本身存在层叠关系,默认结构代码越往后,层级越高 */
/* 属性: z-index可以控制定位元素的层级,用数字赋值, 数字越大层级越高*/
6.1淘宝层级小案列
7.网页布局总结
一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
#### 1). 标准流 可以让盒子上下排列 或者 左右排列的
#### 2). 浮动可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
#### 3). 定位定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。
8.版心布局
<!-- 版心布局: 将页面内容布局在浏览器的中心区域 -->
<!-- 1.固定宽度 -->
<!-- 2.水平居中 -->
9.元素显示隐藏
9.1、元素隐藏：visibility: hidden;
9.2、元素消失： display: none;
display:block;（显示）
