目录
1.固定定位
当元素的position属性设置fixed时，则开启了元素的固定定位
（1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；
（2）以浏览器为参照物，和父元素没有任何关系；
（3）固定定位不占有原来的位置，即脱离标准流 ，更改元素的性质
(4)应用场景
- 固定导航
- 固定侧边栏
- 广告
2.粘滞定位
粘滞定位 （一般用于页面导航的吸顶效果)
-当元素的position属性设置为sticky时，则开启了元素的粘滞定位
（1）以浏览器为参照物（体现固定定位特点）；
（2）占有原来位置（体现相对定位特点）,不会脱离文档流，元素性质也不会发生变化；
（3）粘滞定位可以在元素到达某个位置时，将其固定
(4)配合top值设置，没有达到top值之前正常显示，随着滚动条滚动而滚动，
达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动
3.绝对定位元素布局
水平方向9个值相加必须要等于父元素的内容的宽高，否则浏览器就会自动调整，这个过程
还是叫过渡约束
left+margin-left+border-left+padding-left+width+
padding-right
-当开启决定定位后，水平方向的布局等式就会加上left，right两个值
此时规则和之前一样，只是多添加了两个值
-当发生过度约束时
1:如果9个值中没有auto，则自动调整right值以使等式满足
2:如果有auto，则自动调整auto的值以使等式满足
-可设置auto的值
margin width left rightmargin width left right
四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,
若width left right top bottm都为固定值，
margin会均分四个方向值，让元素水平垂直居中 ***
—两个auto的情况
margin 和width为auto， 调整width
margin 和left，right其中一个值为auto，调整left或right
width 和left，right其中一个值，调整left或right
left，right都为auto 调整right
—三个auto的情况
margin width left ===> 调整left
margin width right ===> 调整right
width left right ===> 调整right
—四个值auto的情况
width，right，left，调整right
垂直布局
等式也必须满足
top+margin-top+····+botoom
水平方向总结
只要right为auto，那就调整right
right>left>width>margin
+border-right+margin-right+right
4。层级
z-index 设置元素的层级
后面跟正整数，数值越大，层级越高
注意：
1、 z-index属性必须要开启定位的前提下使用
2、设置z-index，父元素的层级再高也不会高于子元素
5.第一种轮播图
一般分为两类
一、自己手写（配合js,目前的话，大家掌握原理和样式）
1、用float为主
建一个对外的窗口，让图片整个横向排列，通过调整整个图片的水平方向，
来显示对应的图片
2、用定位为主
让图片叠在一起，通过改变图片的层级，来决定显示哪张图片
二、用各种插件、或者框架（别人写的，你来用）
6.第二种轮播图
7.图标字体
图标字体（iconfont）
大多情况下，我们的图标字体，是有专门图标库，或者从框架里找
-在网页中经常需要使用一些图标，可以通过图片来引入图标
但图片本身比较大，也不灵活
-所以使用图标时，我们还可以将图标直接设置为字体，
然后通过font-face的形式来对字体进行引入
-这样我们就可以通过使用字体的形式来使用图标