[TOC]
### 1.1环境配置
装rubyinstaller-2.4.4-1-64ruanjian：
1.在cmd中：
ruby -v
gem install sass
sass -v 查看版本
2.在vccode装插件
easy sass
### 1.2父div下的子div排版问题（均分）
1.使用最后一个元素的magin-left：-1px；
2.使用伪元素给除最后一个元素div一个右边的竖线来分隔；
.left-border>div:not(:last-child)::after{
content:"";
display: block;
position:absolute;
width:1px;
height:100%;
/*background:#333;*/
border-right: 1px solid #333;
top:0;
right:0;
}
### 1.3内阴影实现方案：
1.在div盒子的里面建一个空元素(盒子后面有div的话要把a放在后面div的前面不然会影响后面div设置的hover效果)用来实现阴影向内的效果：<a href="javascript: ;"></a>
2.父元素设置相对定位（就是hover的盒子并且hover>a ！！！！）
3.然后给盒子相对定位 a元素相对定位当a的宽高百分百给他z-index：5；让他显示在盒子的上方：
.contet div{
position: relative;
}
.contet div:hover>a{
width:100%;
height:100%;
display: block;
position: absolute;
z-index: 5;
top:0;
cursor: pointer;
box-shadow: 0 0 20px 3px #e6e6e6 inset;
}
3.给盒子一个hover事件时这个元素实现阴影效果
box-shadow: 0 0 20px 3px #e6e6e6 inset;
水平阴影的位置。允许负值。|垂直阴影的位置。允许负值。|模糊距离。|阴影的尺寸。|阴影的颜色。|将外部阴影 (outset) 改为内部阴影
### 1.3部署网站（域名解析到服务器）
https://www.netlify.com/
免费入门
现在GitHub上创建库里面要有index.html文件
创建一个新站点（完成三步）
网站设置（左上角左边的）
向您的网站添加自定义域（自己买的域名） 校验
域名管理
检查DNS配置（第二个）
104.198.14.52
在阿里云解析域名 记录类型A 主机：www
配置子网站可以自定义域名 相当于配置了一个服务器(可以使用cname解析 也可以使用dns解析 在阿里云输入对应的)
右上角最右边的
点击add custom domain
自己定义网站的域名 就是将自己的域名商的www换成自己的名字
绿色的子域名记录值 (黑色的四五个dns)
在阿里云解析域名 记录类型cname 主机记录：自己自定义的域名
记录值是netlify上绿色的字
### 轮播
<div id="carousel-id" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-id" data-slide-to="0" class=""></li>
<li data-target="#carousel-id" data-slide-to="1" class=""></li>
<li data-target="#carousel-id" data-slide-to="2" class=""></li>
<li data-target="#carousel-id" data-slide-to="3" class=""></li>
<li data-target="#carousel-id" data-slide-to="4" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" src="images/banner5.png">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="images/banner4.png">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="images/banner3.png">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="images/banner2.png">
</div>
<div class="item active">
<img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide" src="images/banner1.png">
</div>
</div>
<a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
### 文本溢出影藏
语法：
text-overflow：clip | ellipsis
默认值：clip
适用于：所有元素
clip： 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。
ellipsis： 当对象内文本溢出时显示省略标记（...）。
在使用的时候，有时候发现不会出现省略标记效果，经过测试发现，使用ellipsis的时候，必须配合overflow:hidden; white-space:nowrap; width:50%;这三个样式共同使用才会有效果，示例代码：
<style type="text/css">
.test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}
</style>
<div class="test">关于**产品的推广关于**产品的推广关于**产品的推广</div>
上面的width属性根据实际需要填写，其它样式是固定的。
box-sizing: content-box|border-box|inherit;
### 慕课网：学习资料
### 字体压缩：
先安装node-v8.11.2-x86.msi
然后再cmd node -v
然后输入npm config set registry https://registry.npm.taobao.org
输入:npm install font-spider -g
font-spider --version
在vccode命令行
font-spider --version（不是内部命令 关掉重开）
font-spider *.html
使用命令行进行压缩：（不再vccode中在cmd中也行）
先进入盘符（E:）
cd （粘贴字体样式所在的盘符）回车
font-spider *.html
### 使用方法
将字体文件夹放入vccode中
<style>
.custom-font{
font-family: "IF";
font-size: 40px;
}
/* 自定义字体 */
@font-face{
font-family: "IF";
src: url("caoshu.ttf")
}
</style>
</head>
<body>
<p class="custom-font">小米</p>
</body>
vertical-align: middle; 垂直对齐：中间；
### float问题
~~~
使用float时 是盒子浮动的就给他的父元素给一个类名row
如果是盒子里面的内容浮动时 就直接给盒子一个清除浮动
~~~
### 背景固定
~~~
background-attachment:fixed/scroll
attachment :附着
fixed:固定 (如：网页滑动的时候背景图片不会一起动) scroll :滚动（网页滑动的时候背景图片会一起动）
~~~
### 背景定位
~~~
background-postion:X,Y
X:left,center right(注意之间为空格)
Y:top,center bottom(底部)
X,Y也可以设置左边距和右边距（就是说可以是 如：50px；之类的）
~~~
### 小三角阴影：
.sz i{
z-index: 100;
content: "";
border: 7px solid transparent;
border-bottom-color:#fff;
position: absolute;
right:48px;
top:-14px;
}
.sz em{
content: "";
border: 7px solid transparent;
border-bottom-color: #d8d8d8;;
position: absolute;
right:48px;
top:-15px;
}
### 过渡
transition: all 2s; transition：过渡
transform: translateY(-100%); transform ：转型 translateY：平移
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
值 rotate(30deg) 把元素顺时针旋转 30 度。
### 雪碧图
小米登陆界面的雪碧图：a标签里面套i标签，a装背景颜色，i放图片然后使用background-position调整
background-position：x%，y%；
原理：雪碧图的中心点移动外层div的宽高的百分比
background-position：10px 20px;
原理：以左上角为原点然后移动到（10,20）点
调整字体高度用line-height:
border-box 不会改变元素大小
@keyframes 规则
使一个div元素逐渐移动200像素：
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
### visibility 和 display的区别：
visibility 属性规定元素是否可见。
提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
Emmet的HTML语法（敲代码的快捷方式）
https://blog.csdn.net/fghsfeyhdf/article/details/78069259
### 解决图片下间隙
~~~
.img img{
width: 150px;
height: 150px;
vertical-align: bottom;
}
// 解决div里放img时底部有边框
// .img{
// font-size: 0;
// 第二种解决方案
// }
~~~
