文：https://blog.csdn.net/TriDiamond6/article/details/105222289

5. 圖片視差效果

這個(gè)超級(jí)炫酷的效果在官網(wǎng)中非常的受歡迎，這種效果可以給用戶帶來(lái)視覺(jué)沖擊，也給我們的網(wǎng)站帶來(lái)了活力。普通的網(wǎng)頁(yè)圖片會(huì)跟隨著網(wǎng)頁(yè)一起滑動(dòng)，但是視覺(jué)差效果圖就會(huì)固定在底部，只有圖片所在的窗口上的元素會(huì)移動(dòng)。

僅使用CSS

對(duì)你沒(méi)有看錯(cuò)，這個(gè)效果只需要用到CSS就能輕易的實(shí)現(xiàn)！我們只要使用一個(gè)CSS背景圖的屬性background-attachment: fixed，這個(gè)特性會(huì)把背景相對(duì)于視口固定。即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)。

實(shí)現(xiàn)理論：

一、在含有圖片的元素中加入background: url()和background-size: cover（第二個(gè)屬性適用于定義圖片為封面，可以讓圖片大小自動(dòng)適應(yīng)，在很大的屏幕也會(huì)顯示完整的圖片）

二、然后附加固定背景圖的屬性background-attachment: fixed

三、最后給這個(gè)元素加入一個(gè)高度height: 100%或者任意的高度height: 400px

就那么簡(jiǎn)單哦！不用懷疑，馬上上代碼，大家都可以自己去試試哦！

HTML

<div class="wrapper">
   <div class="parallax-img"></img>
   <p>這里填寫(xiě)一堆文字就可以了，盡量多一點(diǎn)哦</p>
</div>

CSS

.wrapper {  
  height: 100wh;
}
.parallax-img {  
  background-attachment: fixed;  
  background-position: center;  
  background-repeat: no-repeat;  
  background-size: cover;  
  height: 100%;  
  background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {  
  font-size: 20px;  
  padding: 1.5rem 3rem;  
  min-height: 1000px; 
  // 當(dāng)你的文字內(nèi)容不夠，也能撐出足夠的高度來(lái)看到效果，當(dāng)然如果你文字足夠多，就不需要了
}

知識(shí)總結(jié)

• background-attachment: fixed — 把背景相對(duì)于視口固定。即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)。
• background-size: cover — 可以讓圖片大小自動(dòng)適應(yīng)，在很大的屏幕也會(huì)顯示完整的圖片。

使用CSS + JavaScript

有些童鞋可能沒(méi)有被這個(gè)震撼到或者還是覺(jué)得不夠刺激。那我們?cè)賮?lái)一個(gè)高級(jí)例子，上面的例子在滑動(dòng)的時(shí)候圖片是固定死的。如果我們加上JavaScript的助力，我們可以讓窗口的圖片緩慢的跟隨這個(gè)頁(yè)面滑動(dòng)，使得效果更有動(dòng)力和更有沖擊感。

實(shí)現(xiàn)理論

首先講一下排版，因?yàn)槲覀冃枰谖覀兓瑒?dòng)頁(yè)面的時(shí)候使用JavaScript偏移圖片，所以我們需要給圖片一個(gè)CSS屬性讓我們可以讓圖片可以根據(jù)一個(gè)速度來(lái)往上或者往下移動(dòng)。這個(gè)例子里面我們讓所有圖片包裹在一個(gè)div里面，class名為block。這個(gè)div給予相對(duì)定位屬性position: relative，這個(gè)時(shí)候我們就可以在里面加入圖片，然后讓圖片絕對(duì)定位position: absolute在這個(gè)div盒子里面。

但是圖片是可能很大的，我們需要把圖片不超出我們定義個(gè)盒子，所以我們的div同時(shí)也給予了overflow: hidden和一個(gè)高度height: 100%。這樣圖片超出div盒子就會(huì)被隱藏。

布局代碼如下：

<div class="block">  
  <img    src="https://unsplash.it/1920/1920/?image=1005"    data-speed="-1"    class="img-parallax"  />  
    <h2>視差速度 -1</h2>
</div><div class="block">  
<img    src="https://unsplash.it/1920/1920/?image=1067"    data-speed="1"    class="img-parallax"  />  
  <h2>視差速度 1</h2>
</div>

html, body{  
  margin: 0;  
  padding: 0;  
  height: 100%;  
  width: 100%;  
  font-family: 'Amatic SC', cursive;
}
.block{  
  width: 100%;  
  height: 100%;  
  position: relative;  
  overflow: hidden;  
  font-size: 16px;
}
.block h2{  
  position: relative;  
  display: block;  
  text-align: center;  
  margin: 0;  
  top: 50%;  
  transform: translateY(-50%);  
  font-size: 10vw;  
  color: white;  
  font-weight: 400;
}
.img-parallax {  
  width: 100vmax;  
  z-index: -1;  
  position: absolute;  
  top: 0;  
  left: 50%;  
  transform: translate(-50%,0);  
  pointer-events: none
}

實(shí)現(xiàn)這個(gè)布局，在你滑動(dòng)的時(shí)候，圖片是不會(huì)移動(dòng)的。因?yàn)樽詈笠徊骄褪羌尤隞avaScript的輔助，讓圖片活起來(lái)。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">
  </script><script>
// 循環(huán)獲取每一個(gè)圖片元素
$(".img-parallax").each(function () {  
  var img=$(this);  
  var imgParent=$(this).parent();  
  function parallaxImg() {    
    var speed=img.data("speed"); /
    / 獲取每張圖片設(shè)置了的偏移速度    var imgY=imgParent.offset().top; // 獲取圖片盒子所在的Y位置    var winY=$(this).scrollTop(); // 獲取當(dāng)前滑動(dòng)到的位置    var winH=$(this).height(); // 獲取瀏覽器窗口高度    var parentH=imgParent.innerHeight(); // 獲取圖片盒子的內(nèi)高度    // 瀏覽器窗口底部的所在位置    var winBottom=winY + winH;     // 當(dāng)前圖片是否進(jìn)入瀏覽器窗口    if (winBottom > imgY && winY < imgY + parentH) {      // 運(yùn)算圖片需要開(kāi)始移動(dòng)的位置      var imgBottom=(winBottom - imgY) * speed;      // 運(yùn)算出圖片需要停止移動(dòng)的位置      var imgTop=winH + parentH;      // 獲取從開(kāi)始移動(dòng)到結(jié)束移動(dòng)的%（根據(jù)開(kāi)始與結(jié)束像素 + 移動(dòng)速度）      var imgPercent=(imgBottom / imgTop) * 100 + (50 - speed * 50);    }    img.css({      top: imgPercent + "%",      transform: "translate(-50%, -" + imgPercent + "%)",    });  }  $(document).on({    scroll: function () {      parallaxImg();    },    ready: function () {      parallaxImg();    },  });});</script>

知識(shí)總結(jié)

• position: relative — 相對(duì)定位。
• position: absolute — 絕對(duì)定位。
• overflow: hidden — 如果需要，內(nèi)容將被剪裁以適合填充框。不提供滾動(dòng)條。

6. 裁剪圖像的動(dòng)畫(huà)

在有CSS3之前裁剪圖片實(shí)現(xiàn)也是頗有難度的。現(xiàn)在我們有了兩個(gè)非常方便簡(jiǎn)單的CSS3屬性可以實(shí)現(xiàn)裁剪，那就是object-fit和object-position, 這兩個(gè)屬性可以讓我們改變圖片的大小，但是不影響圖片的長(zhǎng)寬比。

當(dāng)然我們可以使用圖片處理工具或者使用JavaScript等插件來(lái)實(shí)現(xiàn)圖片裁剪功能。但是因?yàn)橛辛薈SS3的屬性，我們不只可以裁剪，我們還可以用裁剪的屬性來(lái)做圖片的動(dòng)態(tài)效果。

為了讓我們的例子更加簡(jiǎn)單，我們這里使用了<input type="checkbox">復(fù)選框元素，這樣我們就可以使用:checked的偽類(lèi)來(lái)觸發(fā)啟動(dòng)效果。所以在例子里面我們完全不需要JavaScript的協(xié)助。

實(shí)現(xiàn)原理：

一、首先給予圖片一個(gè)寬高h(yuǎn)eight: 1080px，width: 1920px。

二、然后用CSS選擇器，鎖定當(dāng)input被選中后img標(biāo)簽的樣式變化。當(dāng)被選中時(shí)，給圖片設(shè)定一個(gè)新的寬高，這里我們給寬高各自500像素：width: 500px，height: 500px。

三、然后我們加上了過(guò)渡效果和時(shí)間讓圖片改變寬高時(shí)有動(dòng)畫(huà)過(guò)渡效果：transition: width 2s, height 4s;。

四、最后加上object-fit: cover和object-position: left-top這兩個(gè)屬性來(lái)保持圖片的寬高比例，這樣就大功告成了！

我們來(lái)看看完成的代碼：

勾選裁剪圖片 
  <input type="checkbox" />
    <br />
    <img  src="https://img-blog.csdnimg.cn/2020032122230564.png"  alt="Random"/>

input {  
  transform: scale(1.5); 
  /* 只是用來(lái)放大復(fù)選框大小 */  
  margin: 10px 5px;  
  color: #fff;
}
img {  
  width: 1920px;  
  height: 1080px;  
  transition: 0s;
}
/* css選擇器鎖定復(fù)選框被選中時(shí)的狀態(tài) */
input:checked + br + img {  
  width: 500px;  
  height: 500px;  
  object-fit: cover;  
  object-position: left-top;  
  transition: width 2s, 
  height 4s;
}

知識(shí)總結(jié)

object-fit — CSS 屬性指定可替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框。

object-position — 用來(lái)切換被替換元素的內(nèi)容對(duì)象在元素框內(nèi)的對(duì)齊方式。

transition — 過(guò)渡可以為一個(gè)元素在不同狀態(tài)之間切換的時(shí)候定義不同的過(guò)渡效果。

7. 混合模式（Blend）

如果有使用過(guò)Photoshop的同學(xué)對(duì)blend混合模式應(yīng)該是非常熟悉了，我們都知道混合模式是非常強(qiáng)大，也是p圖時(shí)非常常用的一個(gè)功能。但是你們有沒(méi)有想象過(guò)可以在瀏覽器的CSS中直接使用呢？對(duì)我們不需要設(shè)計(jì)師給我們做圖，我們前端也可以實(shí)現(xiàn)混合模式了。

在CSS中我們不只可以對(duì)background背景加入混合模式，我們可以對(duì)任何一個(gè)元素的自帶背景加入混合模式，讓你可以做出很多之前沒(méi)有想過(guò)的效果和排版。

往一個(gè)元素加入混合模式，我們只需要使用到一個(gè)CSS屬性mix-blend-mode即可。

簡(jiǎn)單實(shí)現(xiàn)原理：

首先我們只需要加一個(gè)h1標(biāo)題標(biāo)簽

<h1>混合模式：顏色減淡</h1>

然后我們給h1標(biāo)簽加入mix-blend-mode中的顏色減弱模式color-dodge，但是要注意的是我們需要給body和html加入背景顏色background: white，要不你會(huì)發(fā)現(xiàn)這個(gè)效果會(huì)無(wú)效。因?yàn)閔1我們沒(méi)有給顏色，會(huì)自動(dòng)往上級(jí)繼承，并且混合模式是針對(duì)背景顏色的過(guò)濾，所以body和html需要有背景顏色才行。

h1 {   
  mix-blend-mode: color-dodge;   
  font-family: yahei;   
  font-size: 5rem;   
  text-align: center;   
  margin: 0;    
  padding: 20vh 200px;   
  color: #D1956C; 
} 
html, body {   
  margin: 0;   
  background-color: white; 
} 
body {   
  background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);   
  background-repeat: no-repeat;   
  background-size: cover;   
  min-height: 100vh;   
  overflow: hidden; 
}

換換背景圖和h1標(biāo)簽的字體顏色就可以弄出各種不同的特效了。

知識(shí)總結(jié)

• mix-blend-mode — CSS 屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合。

8. 瀑布流布局

CSS Grid和Flexbox讓我們可以更簡(jiǎn)便，更容易和更快的實(shí)現(xiàn)各式各樣的響應(yīng)布局，并且讓我們快捷方便的在布局中實(shí)現(xiàn)橫向劇中和豎向劇中。但是回想一下以前是頗為困難的。

雖然這些新出的布局方式可以讓我們解決很多以前的布局難題，但是像瀑布流布局這種，就無(wú)法用它們簡(jiǎn)單來(lái)實(shí)現(xiàn)了。因?yàn)槠俨剂饕话銇?lái)說(shuō)都是寬度一致，但是高度是根據(jù)圖片自適應(yīng)的。并且圖片的位置也是根據(jù)在上方圖片的位置而定的。

其實(shí)最好實(shí)現(xiàn)瀑布流布局的辦法就是用CSS的列屬性套件，這套屬性大多數(shù)都是用于排版雜志中的文本列。但是用于布局瀑布流也是特別實(shí)用哦。因?yàn)橐郧靶枰獙?shí)現(xiàn)瀑布流，就必須有JavaScript的輔助來(lái)計(jì)算圖片高度然后決定每張圖片的定位和位置，所以現(xiàn)在有了列屬性就可以使用純CSS實(shí)現(xiàn)了。

實(shí)現(xiàn)原理：

實(shí)現(xiàn)這個(gè)布局，首選我們需要把所有的內(nèi)容先包裹在一個(gè)div元素里面，然后給這個(gè)元素column-width和column-gap屬性。

然后，為了防止任何元素被分割到兩個(gè)列之間，將column-break-inside: avoid添加到各個(gè)元素中。

神奇的效果就完美實(shí)現(xiàn)了，零JavaScript。

我們來(lái)看看代碼：

<div class="columns">  
  <figure>    
  	<img src="https://source.unsplash.com/random?city" alt="" />  
    </figure>  
	<figure>    
    <img src="https://source.unsplash.com/random?night" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?developer" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?building" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?water" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?coding" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?stars" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?forest" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?girls" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?working" alt="" />  
  </figure>
</div>

.columns {  
  column-width: 320px;  
  column-gap: 15px;  
  width: 90%;  
  max-width: 1100px;  
  margin: 50px auto;
}
.columns figure {  
  display: inline-block;  
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);  
  column-break-inside: avoid;  
  border-radius: 8px;
}
.columns figure img {  
  width: 100%;  
  height: auto;  
  margin-bottom: 15px;  
  border-radius: 8px;
}

知識(shí)總結(jié)

column-width — CSS屬性建議一個(gè)最佳列寬。列寬是在添加另一列之前列將成為最大寬度。

column-width — 該 CSS 屬性用來(lái)設(shè)置元素列之間的間隔 (gutter) 大小。

column-break-inside — 設(shè)置或檢索對(duì)象內(nèi)部是否斷。

總結(jié)

我希望這8個(gè)前端小技巧和特效對(duì)大家有幫助，或多或少有吸收一點(diǎn)新的前端知識(shí)。這篇文章提到的內(nèi)容，其實(shí)很多都是值得深挖和學(xué)習(xí)的。有一些例子我做的比較簡(jiǎn)單，但是其實(shí)是有無(wú)限的可能性。喜歡前端的童鞋們，讓我們繼續(xù)在前端領(lǐng)域中一起深挖，讓我們的熱愛(ài)無(wú)限的燃燒起來(lái)吧！

在最后我想給大家講一下我對(duì)前端的熱愛(ài)和態(tài)度。

回想前端這幾年，發(fā)展真的是突飛猛進(jìn)，從前端排版，HTML5+CSS3做H5頁(yè)面，到前端組件化，各種UI框架滿天飛。

一開(kāi)始我隨著熱潮用起了UI框架，起初覺(jué)得特別方便，來(lái)一個(gè)新的項(xiàng)目就直接上一個(gè)UI框架，研發(fā)速度也非常快。但是久而久之就覺(jué)得前端開(kāi)發(fā)變成了處理數(shù)據(jù)，對(duì)接接口，實(shí)現(xiàn)交互。

某天在閱覽國(guó)外的一些前端設(shè)計(jì)和框架的時(shí)候，我突然發(fā)現(xiàn)國(guó)內(nèi)多數(shù)的前端開(kāi)發(fā)者都不再怎么使用CSS3做出一些很好玩的布局和特效了。現(xiàn)在市面上的系統(tǒng)和頁(yè)面都是千篇一律，普遍都是用一些知名的UI框架搭建系統(tǒng)和APP，基本自己動(dòng)手去排版已經(jīng)少之又少。前端已不再是以前的前端，缺少了靈魂。

但是我們回想一下，我們剛剛開(kāi)始學(xué)習(xí)前端的時(shí)候，讓我們最有成就感，覺(jué)得前端特別有意思的那種感覺(jué)。就是那種讓我們覺(jué)得神乎奇跡，不可思議的布局，特效和交互。那種感覺(jué)自己成功實(shí)現(xiàn)了很優(yōu)美，很炫酷的頁(yè)面和特效的感覺(jué)，讓我們?cè)阶鲈絹?lái)勁，越做越是興奮。

但是在某些公司，研發(fā)部都是要求快速開(kāi)發(fā)，UI設(shè)計(jì)部門(mén)也是受到時(shí)間的控制和限制，所以逐步走進(jìn)了UI框架的限制之中。都是圍繞這一些UI框架來(lái)設(shè)計(jì)和開(kāi)發(fā)系統(tǒng)和應(yīng)用。

作為一名熱愛(ài)前端的開(kāi)發(fā)者，我還是堅(jiān)持在絕大多數(shù)的項(xiàng)目中，自己排版和實(shí)現(xiàn)頁(yè)面交互特效。然后使用UI框架作為輔助，主要是用來(lái)減輕一些小組件和常用組建的快速實(shí)現(xiàn)。（可以說(shuō)我是比較追求完美和外貌協(xié)會(huì)的程序員 ）

————————————————

版權(quán)聲明：本文為CSDN博主「三鉆」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/TriDiamond6/article/details/105222289

SS

盒子模型

1. 盒模型分為標(biāo)準(zhǔn)盒模型和怪異盒模型(IE模型)

2. box-sizing：content-box //標(biāo)準(zhǔn)盒模型

3. box-sizing：border-box //怪異盒模型

4. 標(biāo)準(zhǔn)盒模型：元素的寬度等于style里的width+margin+border+padding寬度

如下代碼，整個(gè)寬高還是120px

div{
 box-sizing: content-box;
 margin: 10px;
 width: 100px;
 height: 100px;
 padding: 10px;
}

5. 怪異盒模型：元素寬度等于style里的width寬度

如下代碼，整個(gè)寬高還是100px

div{
 box-sizing: border-box;
 margin: 10px;
 width: 100px;
 height: 100px;
 padding: 10px;
}

注意：如果你在設(shè)計(jì)頁(yè)面中，發(fā)現(xiàn)內(nèi)容區(qū)被撐爆了，那么就先檢查一下border-sizing是什么，最好在引用reset.css的時(shí)候，就對(duì)border-sizing進(jìn)行統(tǒng)一設(shè)置，方便管理

rem與em的區(qū)別

1. rem是根據(jù)根的font-size變化，而em是根據(jù)父級(jí)的font-size變化

2. rem：相對(duì)于根元素html的font-size，假如html為font-size：12px，那么，在其當(dāng)中的div設(shè)置為font-size：2rem,就是當(dāng)中的div為24px

3. em：相對(duì)于父元素計(jì)算，假如某個(gè)p元素為font-size:12px,在它內(nèi)部有個(gè)span標(biāo)簽，設(shè)置font-size：2em,那么，這時(shí)候的span字體大小為：12*2=3D24px

CSS常用選擇器

1. 通配符：*

2. ID選擇器：#ID

3. 類(lèi)選擇器：.class

4. 元素選擇器：p、a 等

5. 后代選擇器：p span、div a 等

6. 偽類(lèi)選擇器：a:hover 等

7. 屬性選擇器：input[type=3D”text”] 等

css選擇器權(quán)重

!important -> 行內(nèi)樣式 -> #id -> .class -> 元素和偽元素 -> * -> 繼承 -> 默認(rèn)

CSS新特性

1. transition：過(guò)渡

2. transform：旋轉(zhuǎn)、縮放、移動(dòng)或者傾斜

3. animation：動(dòng)畫(huà)

4. gradient：漸變

5. shadow：陰影

6. border-radius：圓角

絕對(duì)定位和相對(duì)定位的區(qū)別

1. position: absolute
絕對(duì)定位：是相對(duì)于元素最近的已定位的祖先元素

2. position: relative
相對(duì)定位：相對(duì)定位是相對(duì)于元素在文檔中的初始位置

水平垂直居中

1. Flex布局

1). display: flex //設(shè)置Flex模式

2). flex-direction: column //決定元素是橫排還是豎著排

3). flex-wrap: wrap //決定元素?fù)Q行格式

4). justify-content: space-between //同一排下對(duì)齊方式，空格如何隔開(kāi)各個(gè)元素

5). align-items: center //同一排下元素如何對(duì)齊

6). align-content: space-between //多行對(duì)齊方式

2. 水平居中

1). 行內(nèi)元素：display: inline-block;

2). 塊級(jí)元素：margin: 0 auto;

3). Flex: display: flex; justify-content: center

3. 垂直居中

1). 行高=3D 元素高：line-height: height

2). flex: display: flex; align-item: center

2.8. Less,Sass,Styus三者的區(qū)別

1. 變量

1). Sass聲明變量必須是『$』開(kāi)頭，后面緊跟變量名和變量值，而且變量名和變量值需要使用冒號(hào)：分隔開(kāi)。

2). Less 聲明變量用『@』開(kāi)頭，其余等同 Sass。

3). Stylus 中聲明變量沒(méi)有任何限定，結(jié)尾的分號(hào)可有可無(wú)，但變量名和變量值之間必須要有『等號(hào)』。

2. 作用域

1). Sass：三者最差，不存在全局變量的概念

2). Less：最近的一次更新的變量有效，并且會(huì)作用于全部的引用！

3). Stylus：Sass 的處理方式和 Stylus 相同，變量值輸出時(shí)根據(jù)之前最近的一次定義計(jì)算，每次引用最近的定義有效；

3. 嵌套

三種 css 預(yù)編譯器的「選擇器嵌套」在使用上來(lái)說(shuō)沒(méi)有任何區(qū)別，甚至連引用父級(jí)選擇器的標(biāo)記 & 也相同

4. 繼承

Sass和Stylus的繼承非常像，能把一個(gè)選擇器的所有樣式繼承到另一個(gè)選擇器上。使用『@extend』開(kāi)始，后面接被繼承的選擇器。Stylus 的繼承方式來(lái)自 Sass，兩者如出一轍。 Less 則又「獨(dú)樹(shù)一幟」地用偽類(lèi)來(lái)描述繼承關(guān)系；

5. 導(dǎo)入@Import

6. Sass 中只能在使用 url() 表達(dá)式引入時(shí)進(jìn)行變量插值

$device: mobile;
@import url(styles.#{$device}.css);

7. Less 中可以在字符串中進(jìn)行插值

@device: mobile;
@import "styles.@{device}.css";

8. Stylus 中在這里插值不管用，但是可以利用其字符串拼接的功能實(shí)現(xiàn)

device="mobile"
@import "styles." + device + ".css"

9. 總結(jié)

1). Sass和Less語(yǔ)法嚴(yán)謹(jǐn)、Stylus相對(duì)自由。因?yàn)長(zhǎng)ess長(zhǎng)得更像 css，所以它可能學(xué)習(xí)起來(lái)更容易。

2). Sass 和 Compass、Stylus 和 Nib 都是好基友。

3). Sass 和 Stylus 都具有類(lèi)語(yǔ)言的邏輯方式處理：條件、循環(huán)等，而 Less 需要通過(guò)When等關(guān)鍵詞模擬這些功能，這方面 Less 比不上 Sass 和 Stylus

4). Less 在豐富性以及特色上都不及 Sass 和 Stylus，若不是因?yàn)?Bootstrap 引入了 Less，可能它不會(huì)像現(xiàn)在這樣被廣泛應(yīng)用

link與@import區(qū)別與選擇

<style type="text/css">
 @import url(CSS文件路徑地址);
</style>
<link href="CSSurl路徑" rel="stylesheet" type="text/css" />

1). link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用于加載 css；

2). 當(dāng)解析到link時(shí)，頁(yè)面會(huì)同步加載所引的 css，而@import所引用的 css 會(huì)等到頁(yè)面加載完才被加載；

3). @import需要 IE5 以上才能使用；

4). link可以使用 js 動(dòng)態(tài)引入，@import不行

多行元素的文本省略號(hào)

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical

什么是BFC?

BFC全稱(chēng) Block Formatting Context 即塊級(jí)格式上下文，簡(jiǎn)單地說(shuō)，BFC是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，不受外界干擾或干擾外界

如何觸發(fā)BFC

1. float不為 none

2. overflow的值不為 visible

3. position 為 absolute 或 fixed

4. display的值為 inline-block 或 table-cell 或 table-caption 或 grid

BFC的渲染規(guī)則是什么

1. BFC是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，不受外界干擾或干擾外界

2. 計(jì)算BFC的高度時(shí)，浮動(dòng)子元素也參與計(jì)算（即內(nèi)部有浮動(dòng)元素時(shí)也不會(huì)發(fā)生高度塌陷）

3. BFC的區(qū)域不會(huì)與float的元素區(qū)域重疊

4. BFC內(nèi)部的元素會(huì)在垂直方向上放置

5. BFC內(nèi)部?jī)蓚€(gè)相鄰元素的margin會(huì)發(fā)生重疊

BFC的應(yīng)用場(chǎng)景

1. 清除浮動(dòng)：BFC內(nèi)部的浮動(dòng)元素會(huì)參與高度計(jì)算，因此可用于清除浮動(dòng)，防止高度塌陷

2. 避免某元素被浮動(dòng)元素覆蓋：BFC的區(qū)域不會(huì)與浮動(dòng)元素的區(qū)域重疊

3. 阻止外邊距重疊：屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生折疊，不同BFC不會(huì)發(fā)生折疊

2.15. CSS3有哪些新特性？

1. 圓角 （border-radius:8px）

2. 新增各種CSS選擇器、偽類(lèi) （經(jīng)常用到 :nth-child）

3. 文字渲染 （Text-decoration）

4. 轉(zhuǎn)化為簡(jiǎn)寫(xiě)屬性，可設(shè)置text-decoration-color, text-decoration-style, text-decoration-line三個(gè)屬性，默認(rèn)值為currentcolor solid none。

5. 透明色 & 透明度（opacity）

6. 旋轉(zhuǎn) （transform）

7. 旋轉(zhuǎn) rotate，縮放 scale，傾斜 skew，平移 translate

8. 動(dòng)畫(huà)(animation) & 過(guò)渡效果(transition)

9. 陰影（box-shadow, text-shadow）

10. 新的布局方式，如 多列布局 multi-columns 、 彈性布局 flexible box 與 網(wǎng)格布局 grid layouts

11. 線性漸變（gradient）

12. 多背景（background-image可以設(shè)置多個(gè)url或linear-gradient）

13. 媒體查詢(@media MDN) (可以看看這個(gè))

14. 邊框可以設(shè)置圖片（border-image）

說(shuō)一下CSS3的flex box（彈性盒布局模型）

1. 什么是flex box?

1). CSS3新增布局。

2). Flexbox可以把列表放在同一個(gè)方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。

3). 較為復(fù)雜的布局還可以通過(guò)嵌套一個(gè)伸縮容器（flex container）來(lái)實(shí)現(xiàn)。

4). 采用Flex布局的元素，稱(chēng)為Flex容器（flex container），簡(jiǎn)稱(chēng)”容器”。

5). 它的所有子元素自動(dòng)成為容器成員，稱(chēng)為Flex項(xiàng)目（flex item），簡(jiǎn)稱(chēng)”項(xiàng)目”。

6). 常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流可以很方便地用來(lái)做局中，能對(duì)不同屏幕大小自適應(yīng)。

7). 在布局上有了比以前更加靈活的空間。

2. 應(yīng)用場(chǎng)景?

1). 水平垂直居中

2). 一邊定寬，一邊自適應(yīng)

3). 多列等分布局

4). sticky footer

用純CSS創(chuàng)建一個(gè)三角形的原理是什么？