P7-定位-相对定位-绝对定位-固定定位-粘滞定位-层级和透明效果-字体-font-face-font-awesome-轮播图

时间
xxx

定位

相对定位

概述
通过定位可以将元素摆放到页面中的任意位置。
使用position属性来设置元素的定位。
position属性

属性	说明
static	默认值，未开启定位
relative	开启相对定位
absolute	开启绝对定位
fixed	开启固定定位

元素开启相对定位之后的特点 position：relative；

• 开启相对定位，元素不会发生任何变化（性质和位置）
• 开启相对定位后，元素不会脱离文档流
• 开启相对定位的元素，是相对于其在文档流中的位置进行定位的
• 开启相对定位，会使元素提升一个层级
• 开启相对定位，不会改变元素的性质，块还是块，行内还是行内

当元素开启定位以后，可以通过四个方向的偏移量来控制元素的位置

参数	说明
top	元素与其定位位置的顶部距离
bottom	元素与其定位位置的底部
left	元素与其定位位置的左侧距离
right	元素与其定位位置的右侧距离

案例：

<style>
	.xxx{
		position:relative;
		top:
		bottom:
		left:
		right:
		}
</style>

一般只需要使用两个值即可确定一个元素的位置

绝对定位

概念
将position设置absolute则开启元素的绝对定位。

绝对定位特点

• 绝对定位，会使元素完全脱离文档流
• 绝对定位，会改变元素的性质，行内元素变块元素，块宽高被内容撑开
• 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
• 绝对定位会相对于离它最近的开启了定位的祖先元素进行定位
  如果所有的祖先元素都没有开启定位，则相对于HTML标签（窗口）进行定位
  所以一般情况，我们为一个元素开启了绝对定位，会同时为他的父元素开启相对定位
• 绝对定位会使元素提升一个层级
• 绝对定位，元素会相对于它的包含块进行定位

包含块

对于绝对定位元素来说，包含块就是离它最近的开启了定位的块元素。
如果没有开启定位的祖先元素，则其包含块是网页中的初始包含块（html）就是初始包含块。

绝对定位元素的水平方向的等式

left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块宽度
注意：

• margin-left、margin-right、width、left、right 可以设置为auto
• 关于绝对定位元素的居中情况，使用margin：0 auto不管用了。
  分析：
  • margin：0 auto，设置margin-top/margin-bottom = 0 margin-left/margin-right = auto，默认情况下 left和right都是auto
  • 假设设置元素的width=200px，父元素的width=500px，那么水平方向的等式是：auto + auto + 0 + 0 + 200 + 0 + 0 + auto + auto = 500px，这是margin-left和margin-right都会变成0，为了满足等式会调整right。
• 如果绝对定位情况下，元素在其包含块水平居中，则令left和right都为0即可。

<style>
	.xxx{
		position:absolute;
		margin:0 auto;
		left:0;
		right:0;
		}
</style>

• 如果绝对定位情况下，元素在包含块中垂直居中，将top、bottom=0。然后设置margin-top、margin-bottom为auto。

<style>
	.xxx{
		position:absolute;
		margin:auto 0;
		top:0;
		bottom:0;
		}
</style>

• 将left、right、top、bottom=0，意思是将其内容充满它整个包含块。

相对定位、绝对定位、固定定位的区别

区别项	相对定位	绝对定位	固定定位
是否脱离文档流	否	是	是
是否改变元素性质	否	是 行内变块，块宽高被内容撑开	是 行内变块，块宽高被内容撑开
不设置偏移量，元素位置是否发生变化	否	否	否
定位方式	相对于其在文档流中的位置进行定位	相对于包含块定位（离它最近且开了相对定位的元素定位）	相对于视口进行定位
是否提升元素层级	是	是	是

固定定位

将元素的position:fixed，则开启了元素的固定定位，固定定位的特点大部分都和绝对定位一样。
不同的是固定定位总是相对于浏览器的窗口（视口viewport：就是比html还要外一层的部分）进行定位。
当某个元素被设定为固定定位时，则滚动网页设置固定定位的元素不会发生变化。

特点

• 固定定位会使元素脱离文档流
• 固定定位改变元素的性质，行内变块，块宽高被内容撑开
• 开启固定定位后如果不设置偏移量，元素的位置不会发生变化
• 固定定位是相对于视口进行定位的
• 固定定位会使元素提升一个层级

粘滞定位

关于粘滞定位必须有滚动条才可以实现定位
但是粘滞定位很多浏览器都不兼容

层级和透明效果

显示器中的坐标是左上角是原点，x轴是向右的（正）、y轴是向下的（正）。

层级

• 开启定位元素都会提升一个层级，定位元素层级可以同z-index来设置。
• z-index需要一个整数作为参数，值越大层级越高（即距离我们越近）。
• 如果z-index的值相同，则后边的元素会盖住前边的元素。（前后指的是结构上的）
• 父元素的层级再高也不能盖住子元素。

透明效果

实现方式	rgba	opacity
概念	通过对元素背景颜色的rgba中的a属性进行设置可以实现，a的数值是0-1，0表示完全透明，1表示不透明	opacity用来设置元素的不透明度，需要一个0-1之间的值 0表示完全透明，1表示不透明
区别	是一个透明的颜色	让元素整个透明

字体

font-face

• 有些字体只有本设计的网站有但是别人没有，可通过font-face得到。
• 使用@font-face引入字体，font-family（新设置字体的名字）、src（新字体在网站中的位置）。

<style>
	@font-face{
/*            指定字体的名字*/
            font-family:'test';
/*            本地字体的路径，用户下载的时候要去哪里，要求字体必须是本地的字体 */
            src:url('./font/ZCOOLKuaiLe-Regular.ttf');
        }
</style>

• 且font-face必须是style的子元素，也就是说font-face必须在style标签中
• 如果用户没有设置的字体，则自动从服务器中下载字体。

font-family

• 用来指定字体的家族，可以指定一个字体的分类，也可以指定一个具体的分类。
• 可以同时指定多个字体，多个字体之间使用逗号分开，最后一般都是serif和sans-serif兜底。（按照顺序写是有优先级的，先看第一个是否有，没有则用第二个）（出现加引号的字体是因为有些字体中间有特殊字体比如空格什么的。）
• 有衬线字体serif、无衬线字体sans-serif、等宽字体monospace（一般用于写代码）

字体是有版权的，如果通过@font-face引入一个没有版权的字体，则就会涉及到侵权的问题；
如果是通过font-family写入的多个字体，则随便用，不会涉及到侵权的问题。

图标字体 font-awesome

font-awesome是那些图标字体的库。
使用font-awesome的图标文件的步骤

• 将css和font文件夹放到项目的目录
• 引入css文件

<link rel="stylesheet" href=".css/font-awesome.min.css">

注意

• 图标都放到css文件夹中，采用的文件来自网站图标下载网站
• 引入写min和不写min的都可以，写min是经过压缩的。

案例

案例1：轮播图

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
/*        上述两个是清除默认样式*/
/*        设置轮播图的容器*/
        .outer {
            width: 830px;
            height: 482px;
            background-color: #bfa;
            /*设置上下margin为50px*/
            margin: 50px auto;
/*           开启div的定位，以使li相对于div来进行定位 */
            position: relative;
        }
/*        设置li的位置*/
        .img-list li{
            position: absolute;
        /*    使得元素脱离文档流，li根据开了定位的最近的祖先元素定位*/
        }
/*        图片显示的是最后一张，因为层级一样的话，显示的是书写最后一个的图片*/
/*
        .img-list li:nth-child(1){
            z-index: 1;
        }
*/
        .printer{
            /*距离它最近的父元素outer进行定位*/
            position: absolute;
            top: 380px;
            /*设置存放小圆点的容器的宽度*/
            width: 208px;
            left: 0;
            right: 0;    
            margin: auto;
        /*    设置left/right=0 表示水平居中，margin设置外边距全是自动*/
        }
         /* 使用display后样式有缝隙（因为每两个a之间有空格），但是使用float中间没有缝隙。
        */
        .printer a{
            /*设置导航栏的小圆点，如果不设置浮动类型，则会竖排，设置left则会向左浮动*/
            float: left;
            /*设置小圆点的大小*/
            width: 15px;
            height: 15px;
            /*设置小圆点之间的间距通过margin设置*/
            margin: 0 5px;
            background-color: rgba(255,255,255,.5);
            /*把正方形15px，变成圆形*/
            border-radius: 50%;
        }
        .printer a:hover{
            /*给小圆点设置hover属性，颜色改变*/
            background-color: rgba(0, 228, 143, 0.52)
        }
    </style>

图示：