CSS

1.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

有兩種， IE 盒子模型、W3C 盒子模型；
盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
區  別： IE的content部分把 border 和 padding計算了進去；

在CSS3中引入了box-sizing屬性, 它能夠容許改變默認的CSS盒模型對元素寬高的計算方式.
共包括兩個選項：
content-box：標準盒模型，CSS定義的寬高只包含content的寬高
border-box：IE盒模型，CSS定義的寬高包括了content，padding和border

2.CSS選擇符有哪些？哪些屬性能夠繼承？

id選擇器（ # myid）
類選擇器（.myclassname）
標籤選擇器（div, h1, p）
相鄰選擇器（h1 + p）
子選擇器（ul > li）
後代選擇器（li a）
通配符選擇器（ * ）
屬性選擇器（a[rel = "external"]）
僞類選擇器（a:hover, li:nth-child）
可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;

3.CSS優先級算法如何計算？

*   優先級就近原則，同權重狀況下樣式定義最近者爲準;
*   載入樣式以最後載入的定位爲準;
優先級爲:
!important >  id > class > tag
important 比 內聯優先級高
 

4.CSS3新增僞類有那些？

舉例：
p:first-of-type 選擇屬於其父元素的首個 <p>元素的每一個 <p>元素。
p:last-of-type  選擇屬於其父元素的最後 <p>元素的每一個 <p>元素。
p:only-of-type  選擇屬於其父元素惟一的 <p>元素的每一個 <p>元素。
p:only-child        選擇屬於其父元素的惟一子元素的每一個 <p>元素。
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p>元素。
 
:after          在元素以前添加內容,也能夠用來作清除浮動。
:before         在元素以後添加內容
:enabled       
:disabled       控制表單控件的禁用狀態。
:checked        單選框或複選框被選中。

5.如何居中div？

水平垂直居中問題，在css中margin: 0 auto;能夠實現水平居中，可是在垂直居中方面一直沒有特定的屬性，直到css3的出現，有了彈性盒，能夠經過設置彈性盒直接設置居中位置，作瀏覽器兼容的話能夠經過使用一些hack處理 負margin方法，table-cell方法，位移方法

1）負margin方法：

CSS代碼：

.container{      
        width: 500px;       
        height: 400px;       
        border: 2px solid #379;       
        position: relative;  
} 
.inner{      
        width: 480px;       
        height: 380px;       
        background-color: #746;       
        position: absolute;       
        top: 50%;       
        left: 50%;       
        margin-top: -190px; /*height的一半*/       
        margin-left: -240px; /*width的一半*/  
}

HTML代碼：

<div class="container">
     <div class="inner">
     </div>
</div>

這裏，咱們首先用top:50%和left:50%讓inner的座標原點（左上角）移動到container的中心，而後再利用負margin讓它往左偏移自身寬的一半，再往上偏移自身高的一半，這樣inner的中心點就跟container的中心點對齊了。

2）table－cell方法

 
CSS代碼：

div{    
     width: 300px; 
     height: 300px; 
     border: 3px solid #555; 
     display: table-cell; 
     vertical-align: middle; 
     text-align: center; 
}
img{
     vertical-align: middle; 
}

HTML代碼：

<div>
    <img src="mm.jpg"> 
</div>

經過將盒子轉換爲table元素，table元素自己是能夠經過屬性來控制位置，div上面的vertical-align: middle是控制垂直方向上的居中的，而text-align: center是控制水平方向的
3）彈性盒子法
CSS代碼：

.container{
       width: 300px; 
       height: 200px; 
       border: 3px solid #546461; 
       display: -webkit-flex; 
       display: flex; 
       -webkit-align-items: center; 
       align-items: center; 
       -webkit-justify-content: center; 
       justify-content: center;  
} 
.inner{
       border: 3px solid #458761; 
       padding: 20px;  
}

HTML代碼：

<div class="container"> 
     <div class="inner"> 
         我在容器中水平垂直居中 
     </div> 
</div>

align-items控制垂直方向的居中，justify-content控制水平方向的居中。這是CSS3的新方法

4）位移方法

位移方法和margin定位方法同樣，只不過吧margin改爲了位移不須要計算一半是多少，直接 transform:translate(-50%,--50%)

6.display有哪些值？說明他們的做用。

block              象塊類型元素同樣顯示。
none               缺省值。象行內元素類型同樣顯示。
inline-block   象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
list-item         象塊類型元素同樣顯示，並添加樣式列表標記。
table               此元素會做爲塊級表格來顯示
inherit            規定應該從父元素繼承 display 屬性的值

7.position的值relative和absolute定位原點是？

absolute  生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。
fixed （老IE不支持） 生成絕對定位的元素，相對於瀏覽器窗口進行定位。
relative  生成相對定位的元素，相對於其正常位置進行定位。
static        默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
inherit      規定從父元素繼承 position 屬性的值。

8.CSS3有哪些新特性？

新增各類CSS選擇器  （: not(.input)：全部 class 不是「input」的節點）
圓角           （border-radius:8px）
多列布局        （multi-column layout）
陰影和反射        （ShadowReflect）
文字特效      （text-shadow、）
文字渲染      （Text-decoration）
線性漸變      （gradient）
旋轉          （transform）
增長了旋轉,縮放,定位,傾斜,動畫，多背景
transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:

9.用純CSS建立一個三角形的原理是什麼？

把上、左、右三條邊隱藏掉（顏色設爲 transparent）

#demo {
        width: 0;
        height: 0;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent red transparent;
}

10.一個滿屏 品 字佈局 如何設計?

簡單的方式：
上面的div寬100%，
下面的兩個div分別寬50%，
而後用float或者inline使其不換行便可

11.li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

行框的排列會受到中間空白（回車空格）等的影響，由於空格也屬於字符,這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了。

12.爲何要初始化CSS樣式。

• 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
• 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）
淘寶的樣式初始化代碼：
     

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
     body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
     h1, h2, h3, h4, h5, h6{ font-size:100%; } 
     address, cite, dfn, em, var { font-style:normal; } 
     code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
     small{ font-size:12px; } 
     ul, ol { list-style:none; } 
     a { text-decoration:none; } 
     a:hover { text-decoration:underline; } 
     sup { vertical-align:text-top; } 
     sub{ vertical-align:text-bottom; } 
     legend { color:#000; } 
     fieldset, img { border:0; } 
     button, input, select, textarea { font-size:100%; } 
     table { border-collapse:collapse; border-spacing:0; }

13.absolute的containing block(容器塊)計算方式跟正常流有什麼不一樣？

不管屬於哪一種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，而後再判斷：
1）若此元素爲 inline 元素，則 containing block 爲可以包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
2）不然,則由這個祖先元素的 padding box 構成。
若是都找不到，則爲 initial containing block。

補充：

1）static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
2）absolute: 向上找最近的定位爲absolute/relative的元素
3）fixed: 它的containing block一概爲根元素(html/body)，根元素也是initial containing block

14.對BFC規範(塊級格式化上下文：block formatting context)的理解？

(W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用。）
 一個頁面是由不少個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。

不一樣類型的 Box,會參與不一樣的 Formatting Context（決定如何渲染文檔的容器）,所以Box內的元素會以不一樣的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
     建立規則：
          根元素
          浮動元素（float不是none）
          絕對定位元素（position取值爲absolute或fixed）
          display取值爲inline-block,table-cell, table-caption,flex, inline-flex之一的元素
          overflow不是visible的元素
      做用：
          能夠包含浮動元素
          不被浮動元素覆蓋
          阻止父子元素的margin摺疊

15.css定義的權重

如下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，如下例子是演示各類定義的權重值：
                  /權重爲1/            div{}
                  /權重爲10/          .class1{}
                  /權重爲100/       #id1{}
                  /權重爲100+1=101/         #id1 div{}
                  /權重爲10+1=11/              .class1 div{}
                  /權重爲10+10+1=21/      .class1 .class2 div{}
若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現

16.浮動元素引發的問題和解決辦法？

浮動元素引發的問題：
（1）父元素的高度沒法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
（3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決二、3問題，對於問題1，添加以下樣式，給父元素添加clearfix樣式：

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    display: inline-block;
} /* for IE/Mac */

                  
清除浮動的幾種方法：
1）額外標籤法，<div style="clear:both;"></div>（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。）
2）使用after僞類

parent:after{

        content:".";             height:0; visibility:hidden;                      display:block;         clear:both;
 }
3）浮動外部元素
4）設置overflow爲hidden或者auto

17.移動端的佈局用過媒體查詢嗎？

css的媒體查詢容許經過@media標籤爲特定媒體的瀏覽器設定樣式，其中包含衆多篩選，功能強大。
18.使用 CSS 預處理器嗎？喜歡那個？            
SASS (SASS、LESS沒有本質區別，只由於團隊前端都是用的SASS)，可使用sass和less對css作模塊化開發，定製樣式的組件
19.CSS優化、提升性能的方法有哪些？
將樣式表放到頁面頂部
不使用CSS表達式
不使用@import
不使用IE的Filter

20.元素豎向的百分比設定是相對於容器的高度嗎？

是的，元素的百分比設置通常是根據父級元素的寬高決定的，若是父級元素沒有寬高百分比是不起做用的

21.什麼是響應式設計？響應式設計的基本原理是什麼？

響應式設計就是爲了實現根據不一樣設備環境自動響應及調整網頁佈局的一種設計方案
基本原理就是利用css的媒體查詢功能更具不一樣屏幕的大小，向下兼容設備、移動優先，達到響應的效果

22.::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的做用。

雙冒號是在當前規範中引入的，用於區分僞類和僞元素。可是僞類兼容現存樣式，瀏覽器須要同時支持舊的僞類，好比:first-line、:first-letter、:before、:after等。
對於CSS2以前已有的僞元素，好比:before和:after，單冒號和雙冒號的寫法::before和::after做用是同樣的。
若是隻須要兼容webkit、firefox、opera等瀏覽器，建議對於僞元素採用雙冒號的寫法，若是不得不兼容IE瀏覽器，仍是用CSS2的單冒號寫法比較安全。

23.display:inline-block 何時會顯示間隙？

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

24.png、jpg、gif 這些圖片格式解釋一下，分別何時用？

GIF： 8位像素，256色   無損壓縮   支持簡單動畫   支持boolean透明   適合簡單動畫
JPEG：顏色限於256   有損壓縮   可控制壓縮質量   不支持透明   適合照片
PNG：有PNG8和truecolor PNG    PNG8相似GIF顏色上限爲256，文件小，支持alpha透明度，無動畫、適合圖標、背景、按鈕

25.是CSS 預處理器 / 後處理器？

• 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，加強了css代碼的複用性，還有層級、mixin、變量、循環、函數等，具備很方便的UI組件模塊化開發能力，極大的提升工做效率。

 

• 後處理器例如：PostCSS，一般被視爲在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常作的是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

26.css sprite是什麼,有什麼優缺點。

概念：將多個小圖片拼接到一個圖片中。經過background-position和元素尺寸調節須要顯示的背景圖案
優勢：
減小HTTP請求數，極大地提升頁面加載速度
增長圖片信息重複度，提升壓縮比，減小圖片大小
更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現
缺點：
圖片合併麻煩
維護麻煩，修改一個圖片可能須要重新佈局整個圖片，樣式

27.你用過柵格系統嗎？

如今大部分UI框架都內置有刪格化系統，經常使用bootstrap中的，bootstap它提供了一套響應式，移動優先的流式柵格系統(grid system)，將屏幕分紅12列來實現響應式的。它的實現原理很是簡單，Media Query加上float佈局，也研究過bootstrap的源碼，在這個過程當中也對預處理器有了更深的體會，刪格系統這塊在bootstrap中sass源碼使用的循環生成，less使用的遞歸生成，我本身也單獨封裝過一個刪格系統

28.漸進加強和優雅降級

漸進加強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 ：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

29.什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

FOUC - Flash Of Unstyled Content 文檔樣式閃爍
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。 
解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就能夠了。

30.display: none;與visibility: hidden;的區別

聯繫：它們都能讓元素不可見
區別：
display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；
visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見
display: none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility: hidden;是繼承屬性，子孫節點消失因爲繼承了hidden，經過設置visibility: visible;可讓子孫節點顯式
修改常規流中元素的display一般會形成文檔重排。修改visibility屬性只會形成本元素的重繪。
讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

31.常見的佈局方式

常見的佈局這麼幾種單列水平居中佈局, 一列定寬一列自適應佈局, 兩列定寬一列自適應佈局, 兩側定寬中間自適應三列布局。
一列定寬一列自適應

定位佈局

左邊的寬度寫死，右邊盒子使用定位拉伸法實現，left等於左邊盒子的寬度，right等於0

.left-box{
   width:200px;
}
.right-box{
  position:absolute; 
  left:200px; right:0; 
}

或者左邊的定位寫死寬度，右邊的寫padding-left等於左邊的寬度（經常使用一點）

.left-box{ 
   width:200px;  
   position: fixed; 
   height:100%; 
}
.right-box{
  padding-left:200px;
}

浮動佈局

左邊的寬度寫死而且浮動，右邊盒子寫overflow:hidden;利用的是建立一個新的BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。BFC就是一個相對獨立的佈局環境，它內部元素的佈局不受外面佈局的影響

.left-box {
        width: 200px;
        height: 150px;
        float: left;
        background: #f22;
}
.right-box {
        height: 200px;
        overflow: hidden;
        background: #cff;
 }

兩列定寬一列自適應上面的佈局方式一樣適用

常見的三列布局通常使用聖盃佈局和雙飛翼佈局。
聖盃佈局和雙飛翼佈局
二者都屬於三列布局，是一種很常見的頁面佈局方式，
三列通常分別是子列、主列和附加列，其中子列通常是居左的導航，且寬度固定；主列是居中的主要內容，寬度自適應；附加列通常是廣告等額外信息，居右且寬度固定。

聖盃佈局

<div class="container"> 
    <div class="main"></div> 
    <div class="sub"></div> 
    <div class="extra"></div> 
</div>
.container { 
    padding-left: 210px; 
    padding-right: 190px; 
}
.main { 
    float: left; 
    width: 100%; 
    height: 300px; 
}
.sub { 
    position: relative; 
    left: -210px; 
    float: left; 
    width: 200px; 
    height: 300px; 
    margin-left: -100%; 
}
.extra { 
    position: relative; 
    right: -190px; 
    float: left; 
    width: 180px; 
    height: 300px; 
    margin-left: -180px; 
}

雙飛翼佈局

<div class="main-wrapper"> 
    <div class="main"></div> 
</div>
<div class="sub"></div> 
<div class="extra"></div> 
.main-wrapper { 
    float: left; 
    width: 100%; 
}
.main { 
    height: 300px; 
    margin-left: 210px; 
    margin-right: 190px; 
    background-color: rgba(255, 0, 0, .5); 
}
.sub { 
    float: left; 
    width: 200px; 
    height: 300px; 
    margin-left: -100%; 
    background-color: rgba(0, 255, 0, .5); 
}
.extra { 
    float: left; 
    width: 180px; 
    height: 300px; 
    margin-left: -180px; 
    background-color: rgba(0, 0, 255, .5); 
}

倆種佈局方式都是把主列放在文檔流最前面，使主列優先加載。
兩種佈局方式在實現上也有相同之處，都是讓三列浮動，而後經過負外邊距造成三列布局。
兩種佈局方式的不一樣之處在於如何處理中間主列的位置：聖盃佈局是利用父容器的左、右內邊距定位；雙飛翼佈局是把主列嵌套在div後利用主列的左、右外邊距定位。

**其餘的話還有
flex佈局**
Flexbox又叫彈性盒模型。它能夠簡單使用一個元素居中（包括水平垂直居中），可讓擴大和收縮元素來填充容器的可利用空間，能夠改變源碼順序獨立佈局，以及還有其餘的一些功能。
Flex佈局是我最喜歡的佈局，合理使用它可以大大減小布局方面的工做, 例如以上列舉的三列布局也可使用flex輕鬆實現。此外在移動端使用flex也比較常見。
響應式佈局
網頁能夠自動識別設備屏幕寬度，根據不一樣的寬度採用不一樣的CSS的樣式，從而達到兼容各類設備的效果。
響應式佈局使用媒體查詢(CSS3 Media Queries), 根據不一樣屏幕分辨率採用不一樣CSS規則
流式佈局
流式布常見的就是bootstrap了它提供了一套響應式，移動優先的流式柵格系統(grid system)，將屏幕分紅12列來實現響應式的。它的實現原理很是簡單，Media Query加上float佈局

32.說一下CSS的hack

因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不同，致使在不一樣瀏覽器的環境中呈現出不一致的頁面展示效果。這時，咱們爲了得到統一的頁面效果，就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式，咱們把這個針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack

CSS Hack的方法

條件註釋法
<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]—>
類內屬性前綴法
.hack{
    background-color:red; /* All browsers */   
    background-color:blue !important;/* All browsers but IE6 */   
    *background-color:black; /* IE6, IE7 */   
    +background-color:yellow;/* IE6, IE7*/  
    background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */   
    background-color:purple\0; /* IE8, IE9, IE10 */   
    background-color:orange\9\0;/*IE9, IE10*/  
    _background-color:green; /* Only works in IE6 */   
}  

媒體查詢
@media \0screen\,screen\9 { 
  .hack{ 
    /* IE 6 7 8 */ 
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
   .demo { 
      /* Webkit內核 */ 
    }
}

33.說一下居中

水平垂直居中問題，在css中margin: 0 auto;能夠實現水平居中，可是在垂直居中方面一直沒有特定的屬性，直到css3的出現，有了彈性盒，能夠經過設置彈性盒直接設置居中位置，作瀏覽器兼容的話能夠經過使用一些hack處理 負margin方法， table-cell方法，位移方法

負margin方法
咱們首先用top:50%和left:50%讓inner的座標原點（左上角）移動到container的中心，而後再利用負margin讓它往左偏移自身寬的一半，再往上偏移自身高的一半，這樣inner的中心點就跟container的中心點對齊了。

table－cell方法
經過將盒子轉換爲table元素，table元素自己是能夠經過屬性來控制位置，div上面的vertical-align: middle是控制垂直方向上的居中的，而text-align: center是控制水平方向的

彈性盒子法
align-items控制垂直方向的居中，justify-content控制水平方向的居中。這是CSS3的新方法

位移方法
位移方法和margin定位方法同樣，只不過吧margin改爲了位移不須要計算一半是多少，直接 transform:translate(-50%,--50%)

34.樣式繼承

可繼承的樣式font-size font-family color text-indent

35.link和@import的區別

link屬於XHTML標籤，而@import是CSS提供的
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載
@import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題
link方式的樣式的權重 高於@import的權重

36.position屬性

static：默認的屬性值，按照標準流（包括浮動方式）進行佈局。
relative：稱爲相對定位，使用相對的盒子的位置常以標準量的排版方式爲基礎，而後使盒子相對於它在本來的標準位置偏移指定的距離.相對定位仍在標準流中，它對父塊和兄弟塊盒子沒有任何影響。
absolute：絕對定位，盒子的位置以它的包含框爲基準進行偏移。絕對定位從標準流中脫離，而且以它最近的一個已經定位的祖先元素爲基準進行定位。沒有已經定位的祖先元素，則以瀏覽器窗口爲基準進行定位。
inherit：規定從父元素繼承 position 屬性的值。
fixed：固定定位，與絕對定位相似，以瀏覽器窗口爲基準進行定位，拖動瀏覽器窗口的滾動條時，位置保持不變。
sticky：粘性定位，粘性定位是相對定位和固定定位的混合。元素在跨越特定閾值前爲相對定位，以後爲固定定位。可是這個屬性兼容性不太好，ios上支持度相對好一些