CSS-额外知识补充-元素定位边框的形状 border主要是用来给盒子，添加边框的，但是在开发中我们可以利用边框的特性，

边框的形状

border主要是用来给盒子，添加边框的，但是在开发中我们可以利用边框的特性，来实现一些形状：

Web字体

www.fonts.net.cn/fonts-zh-1.…

下载后是一个ttf文件，然后将下载后的文件放在对应的文件夹中，然后对应的css文件想要引入字体时，通过@font-face来引入，并且设置格式，然后最终使用字体；

@font-face用于加载一个自定义的字体；

//将字体引入网页中

@font-face{
    font-family:"自定义名"
    src:url("文件所在位置");
}

.box{
    font-family:"我刚刚定义的名字"
}

<div class="box">
</box>

字体兼容问题

有些浏览器可能不认识这些字体文件扩展名，为了能够让浏览器适配这些字体，会提供多个字体；

font.qqe2.com/

将文件拖入该网站，然后点击zip，解压后生成文件：

刀枪不入的格式在icon.css中：

但是建议再加上2句话：

@font-face {
    font-family: "自己取名字";
    src: url("fonteditor.eot"); /* IE9 */
    src: url("fonteditor.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonteditor.woff") format("woff"), /* chrome、firefox */
    url("fonteditor.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url("fonteditor.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
    
    //再添加2句话
    font-style:normal;
    font-weight:normal;
}

字体图标

www.iconfont.cn/

选择喜欢的图标后，点击购物车，就可以在购物车中找到图标，点击下载代码；

只将.ttf文件拖入文件夹，然后打开demo_index.html，将对应的编码拷贝，就是文本

字体图标本质也是一个特殊的字体：

@font-face{
    font-family:"自己取名字iconfont";
    src:url("路径.ttf");
}
.iconfont{
    font-family:"使用iconfont";
    //清除自身倾斜效果
    font-style:normal;
}
//自行设置时，最好定义为一个类
.icon{
    display:inline-block;
    height:;
    weight:;
    font-size:也可以自己设置大小px；
}

<i class="iconfont">&#xe622;</i>

开发中使用字体图标

直接将iconfont.css和iconfont.ttf拖入文件夹中，直接用阿里配好的；

<link rel="" href="对应的.css文件">

//直接添加iconfont类和具体图标的类，可以在购物车中查看对应的类名
<i class="iconfont icon-music"></i>

如果觉得字体太小也可以自己设置：

.icon-music{
    font-size:30px;
    color:red;
}

精灵图CSS Sprite

将若干个小图标，合成到一个图片上，然后通过背景定位来显示对于的图片；

一张图只需要请求一次，可以减少http请求次数，加快响应速度，减轻服务器压力；

生成精灵图的网站：

www.toptal.com/developers/…

获取精灵图位置： www.spritecow.com/

根据这个网站，然后将精灵图导入进去，然后点击精灵图中的小图，这个时候该网站就会生成出他的background-position和宽高；

i.hot-icon{
    background-iamge:url(../images/...);
    background-repeat:no-repeat;
    display:inline-block;
    
    background-position:-192px 0;
    height:26px;
    width:13px;
}

<i class="hot-icon"></i>

因为会存在多个精灵图，所以我们会将i标签设置2个类，其中1个类是精灵图的公共类，还有一个则是该精灵图类

topbar{
    background-image:url('');
    background-repeat:no-repeat;
    display:inline-block;
}

i.hot-icon{
    background-position:;
    width:;
    height;
}

i.logo-icon{
    background-position:;
    width:;
    height;
}

<i class="topbar hot-icon"></i>
<i class="topbar logo-icon"></i>

cusor

常用的是：pointer，也就是鼠标挪动到链接上的小手。

.box{
    cusor:pointer
}

元素定位

元素定位允许我们：从【正常的文档流布局中取出元素】，并使它们具有不同的行为：

例如放在另一个元素的上面；
或者始终保持在浏览器视窗内的同一位置；

认识position属性

position的常用5个值：可以让元素变成【定位元素】

static：默认值，静态定位
- 元素按照normal flow布局，left、right、top、bottom没有任何作用；
relative：相对定位
absolute：绝对定位
fixed：固定定位
sticky：粘性定位

relative相对定位（重要）

元素依然按照normal flow布局，就是不会脱离出去，还是原来的位置，依然占据空间；
可以通过left、right、top、bottom进行定位（脱标，不会把旁边的元素顶走，而是重叠）；
- 定位参照对象是元素自己原来的位置

.text{
    position:relative;
    
    left:30px;
    top:50px;
}

<strong class="text">我是strong元素</strong>

left、top是相对于【自身原来位置】，进行偏离；

相对定位的应用场景：不影响其他元素位置的前提下，对当前元素的位置进行微调；另一个应用就是绝对定位；

fixed固定定位

元素脱离normal flow(脱离标准流、脱标)；
可以通过left、right、top、bottom进行定位；
定位参照对象是视口（viewport）
当画布滚动时，固定不动

.text{
    position:fixed;
    
    //左上角
    left:0;
    top:0;
    
    //右下角
    right:30px;
    bottom:30px;
}

<span>我是span元素</span>
<strong class="text">我是strong元素</strong>
<img src="...">
<div>我是div元素</div>

这个strong标签会脱标，不再占据位置；

fixed是：相对于浏览器可视范围

画布（当前页面）>=视口（当前可见范围）

absolute绝对定位

元素脱离normal flow(脱离标准流、脱标)
可以通过left、right、top、bottom进行定位；
- 定位的参照对象是：【最近的定位祖先元素】；
- 如果找不到这样的祖先元素，那么参照对象就是视口；
定位元素：就是position值不为static的元素，也就是position值为relative、absolute、fixed的元素；

strong{
    position:absolute;
    
    //这里没有祖先定位元素，所以就会找视口
    left:20px;
    top:20px;
}

<span>我是span</span>
<strong>我是strong</strong>
<img>
<div>我是div</div>

绑定父元素定位：【前提必须是父元素并且还要有定位】；

.box{
    position:relative
}
strong{
    //此时就会相对于box来进行定位；
    position:absolute;
    right:0;
    top:0;
}

<div class="box">
    <span>我是span</span>
    <strong>我是strong</strong>
    <img>
    <div>我是div</div>
</div>

子绝父相

在绝大多数情况下，子元素的【绝对定位】都是相对于父元素进行定位的；

如果【希望子元素相对于父元素定位，又不希望父元素脱标】，常用的解决方案是：

父元素设置position：relative（让父元素称为定位元素，而且父元素不脱离标准流）
子元素设置position：absolute
简称：“子绝父相”

绝对定位元素的特点（一）

什么是绝对定位元素？

将position设置为：absolute/fixed元素，这是一个广义的范围（参照对象是视口），不是说只有absolute才是绝对定位元素；
绝对定位元素可以随意的设置宽高（忽略块级、行内级元素）
如果没有设置宽高，宽高默认由内容决定
不再接受标准流的约束
- 不再严格按照从上到下、从左到右的排布规范了
- 不再严格区分块级（block）、行内级（inline）、行内级快（inline-block）的很多特性都会消失
不再给父元素汇报宽高数据（如果设置绝对定位并且被一个没有设置宽高的盒子包裹，那么这个大盒子就会消失，因为子元素脱标了，不再由子元素撑起）
脱标元素内部默认还是按照标准流布局的（如果我是一个脱标元素，但是里面还有子元素被我包裹，这些子元素仍然是标准流布局）；

绝对定位元素的特点（二）

对于绝对定位元素（absolute、fixed）来说：

定位参照对象的宽度 = left+right+margin-left+margin-right+绝对定位元素的实际占用宽度;
定为参照对象的高度 = top+bottom+margin-top+margin-bottom+绝对定位元素的实际占用高度；

如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位设置以下属性：

    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:0;

如果希望绝对定位元素在定位参照对象中【居中显示】，可以给绝对定位元素设置以下属性：

    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;

另外还需要设置具体的宽高值（宽高要小于定位参照对象的宽高）

粘性定位sticky

position:sticky：比其他定位新一些，可以看做是【相对定位】+【绝对定位（fixed）】的结合体；

他允许被定位的元素表现得像【相对定位一样】，直到他滚动到某个阈值点；
当他到达这个阈值点的时候，就会变成【固定（绝对）定位】；
sticky是相对于最近的滚动祖先包含滚动视口的；

CSS-额外知识补充-元素定位