整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
年快樂(lè)，開(kāi)工大吉。今天帶大家了解一個(gè)實(shí)用的CSS新特性：@scope規(guī)則。在Sass或Less這類CSS預(yù)編譯工具中嵌套語(yǔ)法較為常見(jiàn)，就像這樣，可以一定程度上簡(jiǎn)化CSS代碼的書(shū)寫(xiě)，讓層次結(jié)構(gòu)更清晰。
@scope規(guī)則的作用與之類似，例如將剛才的Sass嵌套改為@scope規(guī)則書(shū)寫(xiě)，就會(huì)是這樣，可以看到樣式按照正確的預(yù)期渲染了，這里的背景色成功渲染了。
@scope規(guī)則不會(huì)改變CSS選擇器的優(yōu)先級(jí)，例如這里的@scope(nav)的優(yōu)先級(jí)等同于nav，右邊的案例可以證明這一點(diǎn)。如果@scope(nav)不參與優(yōu)先級(jí)計(jì)算，遵循后來(lái)居上的原則，上面這個(gè)鏈接的背景色應(yīng)該是淺粉色，但事實(shí)沒(méi)有，說(shuō)明@scope(nav)參與了優(yōu)先級(jí)計(jì)算。
any-link是偽類選擇器，優(yōu)先級(jí)大于任意的標(biāo)簽選擇器，因此下面的鏈接的背景色是淺粉色。規(guī)范還提供了名為：scope的偽類，可以選擇規(guī)則自身的匹配，例如這里可以設(shè)置nav元素自身紅色邊框。
@scope規(guī)則還提供了排除語(yǔ)法，例如此例，通過(guò)to語(yǔ)法的設(shè)置讓p元素的子元素不參與nav匹配，因此p元素下的a元素就沒(méi)有背景色設(shè)置。
最后@scope規(guī)則還支持復(fù)雜選擇器，就像這樣的語(yǔ)法也是合法的。
以上就是本次分享的全部?jī)?nèi)容，如果你有任何疑問(wèn)可以通過(guò)評(píng)論的方式進(jìn)行反饋，我會(huì)一一解答，我們下個(gè)視頻再見(jiàn)。
1.CSS選擇器的優(yōu)先級(jí)
選擇器 | 格式 | 權(quán)重 |
!important | 覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式 | |
內(nèi)聯(lián)樣式 | style="color:red;" | 1000 |
id選擇器 | #id | 0100 |
類選擇器 | .className | 0010 |
屬性選擇器 | a[ref=“url”] | 0010 |
偽類選擇器 | p:last-child | 0010 |
偽元素選擇器 | p:after | 0001 |
標(biāo)簽選擇器 | div | 0001 |
相鄰兄弟選擇器 | h1+p | 0 |
子選擇器 | ul > li | 0 |
后代選擇器 | li a | 0 |
通配符選擇器 | * | 0 |
標(biāo)簽選擇器、偽元素選擇器：1
類選擇器、偽類選擇器、屬性選擇器：10
id 選擇器：100
內(nèi)聯(lián)樣式：1000
!important聲明的樣式的優(yōu)先級(jí)最高；
注意事項(xiàng)：
如果優(yōu)先級(jí)相同，則最后出現(xiàn)的樣式生效；
繼承得到的樣式的優(yōu)先級(jí)最低；
通用選擇器（*）、子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個(gè)等級(jí)中，所以它們的權(quán)值都為 0
樣式表的來(lái)源不同時(shí)，優(yōu)先級(jí)順序?yàn)椋簝?nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認(rèn)樣式。
一般來(lái)說(shuō)選擇器越具體，優(yōu)先級(jí)越高
2.display的屬性值及其作用
屬性值 | 作用 |
none | 元素不顯示，并且會(huì)從文檔流中移除 |
block | 塊類型，默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示 |
inline | 行內(nèi)元素類型，默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示 |
inline-block | 默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示 |
list-item | 像塊類型元素一樣顯示，并添加樣式列表標(biāo)記 |
table | 此元素會(huì)作為塊級(jí)表格來(lái)顯示 |
inherit | 規(guī)定應(yīng)該從父元素繼承display屬性的值 |
3.display的block、inline和inline-block的區(qū)別
（1）block： 會(huì)獨(dú)占一行，多個(gè)元素會(huì)另起一行，可以設(shè)置width、height、margin和padding屬性；
（2）inline： 元素不會(huì)獨(dú)占一行，設(shè)置width、height屬性無(wú)效。但可以設(shè)置水平方向的margin和padding屬性，不能設(shè)置垂直方向的padding和margin；
（3）inline-block： 將對(duì)象設(shè)置為inline對(duì)象，但對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)，之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。
對(duì)于行內(nèi)元素和塊級(jí)元素，其特點(diǎn)如下：
（1）行內(nèi)元素
（2）塊級(jí)元素
4.隱藏元素的方法有哪些
display: none：渲染樹(shù)不會(huì)包含該渲染對(duì)象，因此該元素不會(huì)在頁(yè)面中占據(jù)位置，也不會(huì)響應(yīng)綁定的監(jiān)聽(tīng)事件。
visibility: hidden：元素在頁(yè)面中仍占據(jù)空間，但是不會(huì)響應(yīng)綁定的監(jiān)聽(tīng)事件。
opacity: 0：將元素的透明度設(shè)置為 0，以此來(lái)實(shí)現(xiàn)元素的隱藏。元素在頁(yè)面中仍然占據(jù)空間，并且能夠響應(yīng)元素綁定的監(jiān)聽(tīng)事件。
z-index: 負(fù)值：來(lái)使其他元素遮蓋住該元素，以此來(lái)實(shí)現(xiàn)隱藏。
clip/clip-path ：使用元素裁剪的方法來(lái)實(shí)現(xiàn)元素的隱藏，這種方法下，元素仍在頁(yè)面中占據(jù)位置，但是不會(huì)響應(yīng)綁定的監(jiān)聽(tīng)事件。
transform: scale(0,0)：將元素縮放為 0，來(lái)實(shí)現(xiàn)元素的隱藏。這種方法下，元素仍在頁(yè)面中占據(jù)位置，但是不會(huì)響應(yīng)綁定的監(jiān)聽(tīng)事件
5.transition和animation的區(qū)別
transition是過(guò)度屬性，強(qiáng)調(diào)過(guò)度，它的實(shí)現(xiàn)需要觸發(fā)一個(gè)事件（比如鼠標(biāo)移動(dòng)上去，焦點(diǎn)，點(diǎn)擊等）才執(zhí)行動(dòng)畫(huà)。它類似于flash的補(bǔ)間動(dòng)畫(huà)，設(shè)置一個(gè)開(kāi)始關(guān)鍵幀，一個(gè)結(jié)束關(guān)鍵幀。
animation是動(dòng)畫(huà)屬性，它的實(shí)現(xiàn)不需要觸發(fā)事件，設(shè)定好時(shí)間之后可以自己執(zhí)行，且可以循環(huán)一個(gè)動(dòng)畫(huà)。它也類似于flash的補(bǔ)間動(dòng)畫(huà)，但是它可以設(shè)置多個(gè)關(guān)鍵幀（用@keyframe定義）完成動(dòng)畫(huà)
6.偽元素和偽類的區(qū)別和作用
偽元素：在內(nèi)容元素的前后插入額外的元素或樣式，但是這些元素實(shí)際上并不在文檔中生成。它們只在外部顯示可見(jiàn)，但不會(huì)在文檔的源代碼中找到它們，因此，稱為“偽”元素
div:before {content:"第一章：";}
div:after {content:"Hot!";}偽類：將特殊的效果添加到特定選擇器上,它是已有元素上添加類別的，不會(huì)產(chǎn)生新的元素
a:hover {color: #FF00FF}
p:first-child {color: red}偽類是通過(guò)在元素選擇器上加?偽類改變?cè)貭顟B(tài)，?偽元素通過(guò)對(duì)元素的操作進(jìn)?對(duì)元素的改變。
7.CSS3中有哪些常用新特性
新增各種CSS選擇器 （: not(.a)：所有 class 不是“a”的節(jié)點(diǎn)）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影 （Shadow）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉(zhuǎn) （transform）
8.對(duì)line-height 的理解及其賦值方式
概念：
line-height 指一行文本的高度，包含了字間距，實(shí)際上是下一行基線到上一行基線距離；
如果一個(gè)標(biāo)簽沒(méi)有定義 height 屬性，那么其最終表現(xiàn)的高度由 line-height 決定；
一個(gè)容器沒(méi)有設(shè)置高度，那么撐開(kāi)容器高度的是 line-height，而不是容器內(nèi)的文本內(nèi)容；把 line-height 值設(shè)置為 height 一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中；
line-height 和 height 都能撐開(kāi)一個(gè)高度；
賦值方式：
帶單位：px 是固定值，而 em 會(huì)參考父元素 font-size 值計(jì)算自身的行高
純數(shù)字：此數(shù)字會(huì)與當(dāng)前的字體大小(font-size)相乘來(lái)設(shè)置行間,相當(dāng)于倍數(shù)
百分比：與元素自身的字體大小(font-size)有關(guān)，計(jì)算值是給定的百分比值乘以元素計(jì)算出的字體大小
注意：
body {
line-height: 200%;
font-size: 30px;
}
p {
font-size: 16px;
}這時(shí)候p標(biāo)簽的line-height為60px，因?yàn)閎ody的line-height=200% * 30px=60px。再p標(biāo)簽直接繼承body的line-height，而不是16*200%的32px
9.CSS 優(yōu)化和提高性能的方法有哪些
加載性能：
（1）css壓縮：將寫(xiě)好的css進(jìn)行打包壓縮，可以減小文件體積
（2）減少使用@import，建議使用link，因?yàn)楹笳咴陧?yè)面加載時(shí)一起加載，前者是等待頁(yè)面加載完成之后再進(jìn)行加載。
選擇器性能：
（1）關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來(lái)匹配目標(biāo)元素的部分）。CSS選擇符是從右到左進(jìn)行匹配的。當(dāng)使用后代選擇器的時(shí)候，瀏覽器會(huì)遍歷所有子元素來(lái)確定是否是指定的元素等等；
（2）如果規(guī)則擁有ID選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽。過(guò)濾掉無(wú)關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會(huì)浪費(fèi)時(shí)間去匹配它們了）。
（3）避免使用通配規(guī)則，如*{}計(jì)算次數(shù)驚人，只對(duì)需要用到的元素進(jìn)行選擇。
（4）盡量少的去對(duì)標(biāo)簽進(jìn)行選擇，用class作為選擇器。
（5）盡量少的去使用后代選擇器，降低選擇器的權(quán)重值。后代選擇器的開(kāi)銷是最高的，盡量將選擇器的深度降到最低，最高不要超過(guò)三層，更多的使用類來(lái)關(guān)聯(lián)每一個(gè)標(biāo)簽元素。
（6）了解哪些屬性是可以通過(guò)繼承而來(lái)的，然后避免對(duì)這些屬性重復(fù)指定規(guī)則。
渲染性能：
（1）慎重使用高性能屬性：浮動(dòng)、定位。
（2）盡量減少頁(yè)面重排、重繪。
（3）去除空規(guī)則：｛｝?？找?guī)則的產(chǎn)生原因一般來(lái)說(shuō)是為了預(yù)留樣式。去除這些空規(guī)則無(wú)疑能減少css文檔體積。
（4）屬性值為0時(shí)，不加單位。
（5）屬性值為浮動(dòng)小數(shù)0.**，可以省略小數(shù)點(diǎn)之前的0。
（6）標(biāo)準(zhǔn)化各種瀏覽器前綴：帶瀏覽器前綴的在前。標(biāo)準(zhǔn)屬性在后。
（7）不使用@import前綴，它會(huì)影響css的加載速度。
（8）選擇器優(yōu)化嵌套，盡量避免層級(jí)過(guò)深。
（9）css雪碧圖，同一頁(yè)面相近部分的小圖標(biāo)，方便使用，減少頁(yè)面的請(qǐng)求次數(shù)，但是同時(shí)圖片本身會(huì)變大，使用時(shí)，優(yōu)劣考慮清楚，再使用。
（10）正確使用display的屬性，由于display的作用，某些樣式組合會(huì)無(wú)效，徒增樣式體積的同時(shí)也影響解析性能。
（11）不濫用web字體。對(duì)于中文網(wǎng)站來(lái)說(shuō)WebFonts可能很陌生，國(guó)外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時(shí)會(huì)阻塞頁(yè)面渲染損傷性能。
可維護(hù)性、健壯性：
（1）將具有相同屬性的樣式抽離出來(lái)，整合并通過(guò)class在頁(yè)面中進(jìn)行使用，提高css的可維護(hù)性。
（2）樣式與內(nèi)容分離：將css代碼定義到外部css中。
10.CSS預(yù)處理器/后處理器是什么？為什么要使用它們
預(yù)處理器， 如：less，sass，用來(lái)預(yù)編譯sass或者less，增加了css代碼的復(fù)用性。層級(jí)，mixin， 變量，循環(huán)， 函數(shù)等對(duì)編寫(xiě)以及開(kāi)發(fā)UI組件都極為方便。
后處理器， 如： postCss，通常是在完成的樣式表中根據(jù)css規(guī)范處理css，讓其更加有效。目前最常做的是給css屬性添加瀏覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問(wèn)題。
css預(yù)處理器為css增加一些編程特性，無(wú)需考慮瀏覽器的兼容問(wèn)題，可以在CSS中使用變量，簡(jiǎn)單的邏輯程序，函數(shù)等在編程語(yǔ)言中的一些基本的性能，可以讓css更加的簡(jiǎn)潔，增加適應(yīng)性以及可讀性，可維護(hù)性等。
其它c(diǎn)ss預(yù)處理器語(yǔ)言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。
使用原因：
11.::before 和 :after 的雙冒號(hào)和單冒號(hào)有什么區(qū)別
冒號(hào)(:)用于CSS3偽類
雙冒號(hào)(::)用于CSS3偽元素。
::before就是以一個(gè)子元素的存在，定義在元素主體內(nèi)容之前的一個(gè)偽元素。并不存在于dom之中，只存在在頁(yè)面之中。
注意： :before 和 :after 這兩個(gè)偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號(hào)語(yǔ)法，但隨著Web的進(jìn)化，在CSS3的規(guī)范里，偽元素的語(yǔ)法被修改成使用雙冒號(hào)，成為::before、::after
12.單行、多行文本溢出隱藏
單行文本溢出
overflow: hidden; // 溢出隱藏
text-overflow: ellipsis; // 溢出用省略號(hào)顯示
white-space: nowrap; // 規(guī)定段落中的文本不進(jìn)行換行多行文本溢出
overflow: hidden; // 溢出隱藏
text-overflow: ellipsis; // 溢出用省略號(hào)顯示
display:-webkit-box; // 作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; // 設(shè)置伸縮盒子的子元素排列方式：從上到下垂直排列
-webkit-line-clamp:3; // 顯示的行數(shù)注意：由于上面的三個(gè)屬性都是 CSS3 的屬性，沒(méi)有瀏覽器可以兼容，所以要在前面加一個(gè)-webkit- 來(lái)兼容一部分瀏覽器
12.對(duì) CSS 工程化的理解
CSS 工程化是為了解決以下問(wèn)題：
以下三個(gè)方向都是時(shí)下比較流行的、普適性非常好的 CSS 工程化實(shí)踐：
基于這三個(gè)方向，可以衍生出一些具有典型意義的子問(wèn)題，這里我們逐個(gè)來(lái)看：
（1）預(yù)處理器：為什么要用預(yù)處理器？它的出現(xiàn)是為了解決什么問(wèn)題？
預(yù)處理器，其實(shí)就是 CSS 世界的“輪子”。預(yù)處理器支持我們寫(xiě)一種類似 CSS、但實(shí)際并不是 CSS 的語(yǔ)言，然后把它編譯成 CSS 代碼：
那為什么寫(xiě) CSS 代碼寫(xiě)得好好的，偏偏要轉(zhuǎn)去寫(xiě)“類 CSS”呢？這就和本來(lái)用 JS 也可以實(shí)現(xiàn)所有功能，但最后卻寫(xiě) React 的 jsx 或者 Vue 的模板語(yǔ)法一樣——為了爽！要想知道有了預(yù)處理器有多爽，首先要知道的是傳統(tǒng) CSS 有多不爽。隨著前端業(yè)務(wù)復(fù)雜度的提高，前端工程中對(duì) CSS 提出了以下的訴求：
這三點(diǎn)是傳統(tǒng) CSS 所做不到的，也正是預(yù)處理器所解決掉的問(wèn)題。預(yù)處理器普遍會(huì)具備這樣的特性：
（2）Webpack 能處理 CSS 嗎？如何實(shí)現(xiàn)？ Webpack 能處理 CSS 嗎：
如何用 Webpack 實(shí)現(xiàn)對(duì) CSS 的處理：
在實(shí)際使用中，css-loader 的執(zhí)行順序一定要安排在 style-loader 的前面。因?yàn)橹挥型瓿闪司幾g過(guò)程，才可以對(duì) css 代碼進(jìn)行插入；若提前插入了未編譯的代碼，那么 webpack 是無(wú)法理解這坨東西的，它會(huì)無(wú)情報(bào)錯(cuò)。
13.如何判斷元素是否到達(dá)可視區(qū)域
window.innerHeight 是瀏覽器可視區(qū)的高度；
document.body.scrollTop || document.documentElement.scrollTop 是瀏覽器滾動(dòng)的過(guò)的距離；
imgs.offsetTop 是元素頂部距離文檔頂部的高度（包括滾動(dòng)條的距離）；
內(nèi)容達(dá)到顯示區(qū)域的：img.offsetTop < window.innerHeight + document.body.scrollTop;
14.z-index屬性在什么情況下會(huì)失效
通常 z-index 的使用是在有兩個(gè)重疊的標(biāo)簽，在一定的情況下控制其中一個(gè)在另一個(gè)的上方或者下方出現(xiàn)。z-index值越大就越是在上層。z-index元素的position屬性需要是relative，absolute或是fixed。
z-index屬性在下列情況下會(huì)失效：
15.px、em、rem的區(qū)別及使用場(chǎng)景
三者的區(qū)別：
px是固定的像素，一旦設(shè)置了就無(wú)法因?yàn)檫m應(yīng)頁(yè)面大小而改變。
em和rem相對(duì)于px更具有靈活性，他們是相對(duì)長(zhǎng)度單位，其長(zhǎng)度不是固定的，更適用于響應(yīng)式布局。
em是相對(duì)于其父元素來(lái)設(shè)置字體大小，這樣就會(huì)存在一個(gè)問(wèn)題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小。而rem是相對(duì)于根元素，這樣就意味著，只需要在根元素確定一個(gè)參考值。
使用場(chǎng)景：
對(duì)于只需要適配少部分移動(dòng)設(shè)備，且分辨率對(duì)頁(yè)面影響不大的，使用px即可 。
對(duì)于需要適配各種移動(dòng)設(shè)備，使用rem，例如需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備。
16.對(duì)Flex布局的理解及其使用場(chǎng)景
Flex是FlexibleBox的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。行內(nèi)元素也可以使用Flex布局。注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。采用Flex布局的元素，稱為Flex容器（flex container），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"。容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis），項(xiàng)目默認(rèn)沿水平主軸排列。
以下6個(gè)屬性設(shè)置在容器上：
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。
flex-wrap屬性定義，如果一條軸線排不下，如何換行。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap。
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
以下6個(gè)屬性設(shè)置在項(xiàng)目上：
order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。
flex屬性是flex-grow，flex-shrink和flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。
簡(jiǎn)單來(lái)說(shuō)： flex布局是CSS3新增的一種布局方式，可以通過(guò)將一個(gè)元素的display屬性值設(shè)置為flex從而使它成為一個(gè)flex容器，它的所有子元素都會(huì)成為它的項(xiàng)目。一個(gè)容器默認(rèn)有兩條軸：一個(gè)是水平的主軸，一個(gè)是與主軸垂直的交叉軸。可以使用flex-direction來(lái)指定主軸的方向?？梢允褂胘ustify-content來(lái)指定元素在主軸上的排列方式，使用align-items來(lái)指定元素在交叉軸上的排列方式。還可以使用flex-wrap來(lái)規(guī)定當(dāng)一行排列不下時(shí)的換行方式。對(duì)于容器中的項(xiàng)目，可以使用order屬性來(lái)指定項(xiàng)目的排列順序，還可以使用flex-grow來(lái)指定當(dāng)排列空間有剩余的時(shí)候，項(xiàng)目的放大比例，還可以使用flex-shrink來(lái)指定當(dāng)排列空間不足時(shí)，項(xiàng)目的縮小比例
17.各種圖形的繪制
（1）三角1
div {
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}（2）三角2
div {
width: 0;
height: 0;
border-left: 50px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}（3）扇形
div{
border: 100px solid transparent;
width: 0;
heigt: 0;
border-radius: 100px;
border-top-color: red;
}18.設(shè)置小于12px的字體
在谷歌下css設(shè)置字體大小為12px及以下時(shí)，顯示都是一樣大小，都是默認(rèn)12px。
解決辦法：
使用Webkit的內(nèi)核的-webkit-text-size-adjust的私有CSS屬性來(lái)解決，只要加了-webkit-text-size-adjust:none;字體大小就不受限制了。
使用css3的transform縮放屬性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收縮的是整個(gè)元素的大小，這時(shí)候，如果是內(nèi)聯(lián)元素，必須要將內(nèi)聯(lián)元素轉(zhuǎn)換成塊元素，可以使用display：block/inline-block
每一門技術(shù)的出現(xiàn)都是為了解決現(xiàn)存的問(wèn)題，同樣的，Less 的出現(xiàn)是為了解決 CSS 中過(guò)于呆板的寫(xiě)法。Less 官方文檔 中對(duì) Less 的使用有詳細(xì)的介紹，總結(jié)一下為：Less=變量 + 混合 + 函數(shù)。如果你對(duì) js 和 css 有所了解，那么就可以很快的掌握并在你的項(xiàng)目中使用 Less。
使用 Npm 全局安裝 Less
$ npm install less -g創(chuàng)建一個(gè)空文件夾，這里命名為：learn-less
在根目錄下創(chuàng)建 index.html 文件，復(fù)制內(nèi)容如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初識(shí) Less</title>
<link href="./main.css" rel="stylesheet">
</head>
<body>
<div class="container">1</div>
<div class="container2">2</div>
<div class="container3">3</div>
</body>
</html>在根目錄下創(chuàng)建 main.less 文件，復(fù)制內(nèi)容如下：
// main.less
@width: 100%;
@height: 100px;
@color: red;
.container{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}
.container2{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}
.container3{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}現(xiàn)在打開(kāi)瀏覽器看一下，會(huì)發(fā)現(xiàn)并沒(méi)有加載樣式。這是因?yàn)?index.html 中引入的樣式文件是 main.css 而不是 main.less。所以接下來(lái)，我們需要將 main.less 轉(zhuǎn)換為 main.css，不用擔(dān)心，這一步驟并不需要你手動(dòng)操作，僅僅是運(yùn)行一條命令就會(huì)自動(dòng)完成轉(zhuǎn)換。
$ lessc main.less操作完以上步驟就會(huì)發(fā)現(xiàn)在根目錄下生成了一個(gè) main.css 文件，此時(shí)再打開(kāi)瀏覽器看看，樣式已經(jīng)出現(xiàn)了。
main.css 轉(zhuǎn)義內(nèi)容為：
.container {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
.container2 {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
.container3 {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}如果你使用了 Webstorm 作為開(kāi)發(fā)工具，那么連手動(dòng)輸入命令行這一步都可以跳過(guò)，因?yàn)?Webstorm 會(huì)在你的 .less 文件被修改后自動(dòng)生成對(duì)應(yīng)的 .css 文件，具體配置跳轉(zhuǎn)：Webstorm 配置 Less 自動(dòng)轉(zhuǎn)譯成 css
現(xiàn)在有一個(gè)新的需求，需要將三個(gè) div 的背景顏色改成藍(lán)色（blue），如果是之前 css 的寫(xiě)法需要依次找到 container、container2、container3，對(duì)應(yīng)修改里面的 background-color 屬性，但是使用 less 我們僅僅修改前面定義過(guò)的變量值即可。
// main.less
@width: 100%;
@height: 100px;
@color: blue;
...使用 lessc main.less 進(jìn)行轉(zhuǎn)譯后打開(kāi)瀏覽器可以看到三個(gè) div 的背景顏色已經(jīng)被改變了。
在前面介紹的案例中已經(jīng)使用了“變量”的概念，是不是感覺(jué)和 js 很像，事實(shí)上 less 就是用 js 的寫(xiě)法來(lái)寫(xiě) css。
官網(wǎng)在介紹變量的時(shí)候會(huì)給出很多應(yīng)用場(chǎng)景，總結(jié)一下就是使用 @ 符號(hào)定義變量，使用 @ 符號(hào)獲取變量，僅僅將 @變量名 看成是一個(gè)字符串。
@classname: main;
@color: red;
.@classname{
background-color: @color;
}從上面例子中可以看到，變量不僅僅可以作為樣式屬性值：background-color: @color;，還可以作為類名：.@classname 表示的就是 .main。這也就是為什么說(shuō)僅僅將 @變量名 看成是一個(gè)字符串。
先看一個(gè) example.css 文件：
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu span {
height: 16px;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu p {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}可以看到上面三個(gè)樣式中都有 border-top 和 border-bottom 兩個(gè)屬性，并且內(nèi)容完全相同；在傳統(tǒng) CSS 寫(xiě)法中只能這樣一遍有一遍的去書(shū)寫(xiě)重復(fù)的內(nèi)容，在 Less 中通過(guò)將公共屬性抽取出來(lái)作為一個(gè)公共類的方式規(guī)避這一點(diǎn)。
// example2.less
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
#menu span {
height: 16px;
.bordered;
}
#menu p {
color: red;
.bordered();
}將以上 example2.less 進(jìn)行轉(zhuǎn)譯成 example2.css 文件為：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu span {
height: 16px;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu p {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}可以看到 examle2.css 與 example.css 很相似，只是多了一個(gè) .bordered 樣式。
修改 example2.less，將 .bordered 寫(xiě)成 .bordered()，此時(shí)在進(jìn)行轉(zhuǎn)譯之后會(huì)看到 example2.css 和 example.css 文件就完全一樣了，使用 less 書(shū)寫(xiě)更加簡(jiǎn)單。
// example2.less
.bordered() {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
...總結(jié)：
曾幾何時(shí)，在書(shū)寫(xiě)呆板的 css 時(shí)有沒(méi)有想過(guò)讓類名動(dòng)態(tài)化，根據(jù)不同的參數(shù)生成不同的樣式?？聪旅娴氖纠?/p>
// func.less
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}使用 $ lessc func.less 進(jìn)行轉(zhuǎn)譯 func.css 文件內(nèi)容如下：
#header {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}可以看到，這里就用到了函數(shù)的概念，在 #header 和 .button 中分別傳入不同的參數(shù)，結(jié)果也就生成不同的代碼。
關(guān)于 less 中函數(shù)的寫(xiě)法還有以下幾種：
// 函數(shù)的參數(shù)設(shè)置默認(rèn)值：
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// 函數(shù)有多個(gè)參數(shù)時(shí)用分號(hào)隔開(kāi)
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
// 函數(shù)如果沒(méi)有參數(shù)，在轉(zhuǎn)譯成 css 時(shí)就不會(huì)被打印出來(lái)，詳見(jiàn)上面混合中的示例
.wrap() {
text-wrap: wrap;
}
// 函數(shù)參數(shù)如果有默認(rèn)，調(diào)用時(shí)就是通過(guò)變量名稱，而不是位置
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
// 函數(shù)參數(shù)有個(gè)內(nèi)置變量 @arguments，相當(dāng)于 js 中的 arguments
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
// 函數(shù)名允許相同，但參數(shù)不同，類似于 java 中多態(tài)的概念
.mixin(@color: black) {
.mixin(@color: black; @margin: 10px) { 當(dāng)然，上面是開(kāi)發(fā)人員自定義的函數(shù)，Less 也為我們定義了很多好用的內(nèi)置函數(shù)。關(guān)于內(nèi)置函數(shù)，如果掌握，可以在開(kāi)發(fā)過(guò)程中節(jié)約很多時(shí)間，由于內(nèi)置函數(shù)數(shù)量很多，這里就不一一介紹，傳送門：Less 內(nèi)置函數(shù)官方文檔[https://less.bootcss.com/functions/]。
在 css 中父子元素的寫(xiě)法通常如下：
.container {
padding: 0;
}
.container .article {
background-color: red;
}在 Less 寫(xiě)法如下，父子嵌套關(guān)系一目了然。
.container {
padding: 0;
.article {
background-color: red;
}
}當(dāng)然，父子元素還要一種是偽類的寫(xiě)法，在 css 中寫(xiě)法如下：
#header :after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}在 less 中寫(xiě)法如下，可以看到引入了新的符號(hào) &，以 & 來(lái)代替主類 #header。
#header {
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}在傳統(tǒng) css 文件中，每個(gè)文件都是獨(dú)立的。在 less 中可以像 js 的模塊那樣在一個(gè) less 文件中引入另一個(gè) less 文件。
創(chuàng)建 one.less 文件：
.container {
width: 100px;
height: 200px;
}創(chuàng)建 two.less 文件：
@import "one";使用 $ lessc two.less 轉(zhuǎn)譯成 two.css 文件，可以看到內(nèi)容如下：
.container {
width: 100px;
height: 200px;
}@import 的作用可以看成是將 one.less 的內(nèi)容復(fù)制一份到當(dāng)前 .less 文件中。
那么如果 two.less 中也有一個(gè)類名叫 container 的，使用 @import 之后會(huì)變成什么樣子呢？這個(gè)留給自行測(cè)試好啦。
轉(zhuǎn)載自作者：dkvirus
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
