[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;
// 第二種解決方案
// }
~~~
