前端面試二（CSS）

三石流浪記發表於2019-02-25

1. CSS選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？內聯和important哪個優先？

選擇器的分類
- 元素選擇器 a{}
- 偽元素選擇器 ::before{}
- 類選擇器 .link{}
- 屬性選擇器 [type=radio]{}
- 偽類選擇器 :hover{}
- ID選擇器 #id{}
- 組合選擇器 [type=radio]+label{}
- 否定選擇器 :not{.link}
- 通用選擇器 *{}

哪些屬性可以繼承

font-size font-family color 
複製程式碼

優先順序演算法如何計算?
- ID選擇器 +100
- 類屬性偽類 + 10
- 元素偽元素 +1
- 其他 +0
- 原則：不進位
內聯和important哪個優先
- !important 優先順序最高
- 內聯的第二
- 相同權重後寫的覆蓋前面寫的

2. CSS新增哪些偽類？

p:last-of-type 選取其父元素中的最後一次出現P元素

p:last-child 選取其父元素中的最後一個元素，這個元素必須是p，不然會為空

p:first-of-type 選取其父元素中的首個出現的P元素

P:first-child 選取其父元素中的第一個元素，這個元素必須是p，不然會為空 p:only-child 選擇其父級元素中只有一個元素，且這個元素為p

p:only-of-type 選擇其父級元素中只有一個p元素，其他元素可以有。
p:nth-child(n) 選擇其父級元素中的第N個剛好是p元素
p:nth-last-child(n) 同上，但是是從後往前計算
:enabled、:disabled 控制表單控制元件的禁用狀態
:checked，單選框或核取方塊被選中

3、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

1、居中塊級元素如div，首先設定寬度，然後使用margin:0 auto 就居中了

 <style>
    .a{
        width:100px;
        margin:0 auto;
        background:red;
    }
</style>

<div class="a">123</div>
複製程式碼

1. 居中浮動元素有兩種方式

<!--第一種 在外面加一層div 設定寬度 使用margin:0 auto-->
 <div class="content">
        <div class="outer">
            <div class="left"></div>
        </div>
 </div>
 <style type="text/css">
        .content {
            height: 500px;
            width: 500px;
            border: 1px solid red;
            /*垂直居中*/
            display: table-cell;
            vertical-align: middle;
        }
        .outer{
            width: 100px;
            margin:0 auto;
        }
        .left {
            height: 100px;
            width: 100px;
            border: 1px dashed blue;
            float: left;
        }
    </style>
 
 <!--第二種-->
 <style type="text/css">
        .content {
            height: 500px;
            width: 500px;
            border: 1px solid red;
            /*垂直居中*/
            display: table-cell;
            vertical-align: middle;
        }
        .left {
            height: 100px;
            width: 100px;
            border: 1px dashed blue;
            /*水平居中，但設定浮動後失效
            margin: 0 auto;*/
            float: left;
            /*水平居中  相對於父級寬度計算*/
            margin-left: 50%;
            position: relative;
            left: -50px; 
        }
 </style>
 <div class="content">
    <div class="left"></div>
 </div>
複製程式碼

如何讓絕對定位的div居中？

    <style type="text/css">
        .content {
            height: 500px;
            width: 500px;
            border: 1px solid red;
            position: relative;
        }

        .absolute {
            background: black;
            width: 100px;
            height: 100px;
            position: absolute;
           
            
            <!--第一種方式  要知道元素的寬高-->
            <!-- left:50%;-->
            <!--top: 50%; -->
            <!--margin-left: -50px;-->
            <!--margin-top:-50px; -->
            <!--第二種方式-->
            <!--transform: translate(-50%, -50%); -->
            
             <!--第三種 當上下左右都為0時， margin: auto使用這個就自動居中了-->
             <!--position: absolute; left: 0; top: 0; right: 0; bottom: 0;-->
             <!--margin: auto;   -->
        }
    </style>
    <div class="content">
        <div class="absolute"></div>
    </div>
    
    第四種方式使用flex佈局
     .content {
        display: flex;
        justify-content:center;
        align-items:center;
     }
複製程式碼

4、為什麼圖片下面有空隙，怎麼去除，原理是什麼？

img是inline-block元素，遵守inline-box的原則，對齊是按照文字的基線對齊，基線離底線會有一段縫隙，縫隙大小大約為1/4 字型大小。
怎麼去除：
1. 第一種方式就是改變img的對齊方式預設是基於基線改成 vertical-align:bottom
2. 第二種方式就是修改img的display方式，將inline-block改編成 block ，dispaly:block

5. 行高是基於什麼組成的？要設定一段文字在容器中垂直居中怎寫？

行高是是有line-box決定的，而line-box是有line-height決定的。
父容器不指定高度，設定子容器的lineheight超過字型大小font-size即可垂直居中

 <div style="border:solid 1px red;">
    <!-- 背景 blue 由字型的大小決定 底線和頂線-->
    <!-- line-height的高度大於字型的高度 其餘的高度會均勻分佈在兩側 垂直居中 -->
    <span style="background:blue;color:#fff;font-size:40px;line-height:60px;">
      居中xfmsp
    </span>
  </div>
複製程式碼

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

原理是:均分原理。

<style>
 .c3{
        width:0px;
        /* height: 200px; */
        border-bottom:30px solid red;
        /* border-right:30px solid blue; */
        border-left:30px solid transparent;
        border-right:30px solid transparent;
    }
</style>

<div class="c3">

</div>
複製程式碼

7. 怎麼讓一個很長的文字不換行?

white-space:nowrap;
複製程式碼

8. 如何美化checkbox

使用label+input
隱藏input的原生樣式
使用 input:checked+label {}

 <style>
        .checkbox{

        }
        .checkbox input{
            display: none;
        }
        .checkbox input + label{
            background:url(./checkbox1.png) left center no-repeat;
            background-size:20px 20px;
            padding-left:20px;
        }
        .checkbox input:checked + label{
            background-image:url(./checkbox2.png);
        }
    </style>
    
     <div class="checkbox">
        <input type="checkbox" id="handsome"/>
        <label for="handsome">我很帥</label>
    </div>
複製程式碼

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

<style>
    div {
      background: red;
      width: 100px;
      height: 100px;
    }

    .p2 {
      /* 偏移相對於文件流元素本身
        不會因為偏移改變原來的計算 */
      position: relative;
      left: 10px;
      top: -10px;
      background: blue;
      z-index: 2;
    }

    .p3 {
      /* 脫離文件流 他的位置相對於最近的父級absolute或者relative  如果沒有的話 最終會找到body*/
      position: absolute;
      left: 80px;
      top: 30px;
      background: green;
      /* z-index: 1; */
      /* 定位為absolute relative fixed的定元素可以設定 z-index */
      /* 子集不會被遮罩 */
    }

    .p4 {
      /* 脫離文件流  但是位置相對於可視區域*/
      position: fixed;
      left: 0;
      bottom: 10px;
    }
  </style>
  
   <div class="p1">
    position:static
    文件流
  </div>
  <div class="p2">
    position:relative

  </div>
  <div class="p3">
    position:absolute
    <div class="p3-3" style="position:absolute;width:50px;height:50px;background:yellow"></div>
  </div>
  <div class="p4">
    position:fixed;
  </div>
  <div class="p5">
    p5
  </div>
複製程式碼

absolute：生成絕對定位的元素，定位原點是離自己這一級元素最近的一級position設定為absolute或者relative的父元素的左上角為原點的,如果沒有則為body。
fixed （老IE不支援）：生成絕對定位的元素，相對於瀏覽器視窗進行定位。
relative：生成相對定位的元素，定位原點是元素本身所在位置。
static：預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 宣告）。
inherit：規定從父元素繼承 position 屬性的值。

10. 為什麼要初始化CSS樣式?

因為瀏覽器的相容的問題，不同瀏覽器有些標籤的預設值是不同的，如果沒有CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

11. 使用inline-block之後，li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

原因:瀏覽器的預設行為是把inline元素間的空白字元（空格換行tab）渲染成一個空格，也就是我們上面的程式碼<li>換行後會產生換行字元，而它會變成一個空格，當然空格就佔用一個字元的寬度。
解決方法：
- 消滅標籤之間的間距
- 將html的字元大小變成0 單獨設定子元素的字元大小

12. 請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

flexible（形容詞）：能夠伸縮或者很容易變化，以適應外界條件的變化；box（名詞）：通用的矩形容器。
旨在通過彈性的方式來對齊和分佈容器中內容的空間，使其能適應不同螢幕，為盒裝模型提供最大的靈活性。
適用場景：
- 浮動佈局
- 各種機型螢幕的適配
- 水平和垂直居中
- 自動分配寬度
- ......

13、一個滿屏品字佈局如何設計?


<!--方案一-->
<style>
   * {margin: 0;padding: 0;}/* 去除所有元素預設的內外邊距的值 */
   html, body {height: 100%;}/* 預設HTML，body的高度為0，為其設定高度以使後面的div可以用百分比設定高度 */
   
   .header {height: 50%;width: 50%;background-color:  rgb(255,2545,167);margin: 0 auto;}
   .main {height: 50%;width: 100%;}
   .main .left {float: left;width: 50%;height: 100%;background-color: rgb(204,255,102);}
   .main .right {float: left;width: 50%;height: 100%;background-color: rgb(189,255,255);}
</style>

<div class="header"></div>
<div class="main">
	<div class="left"></div>
	<div class="right"></div>
</div>	

<!--方案二-->

<style>
	* {margin: 0;padding: 0;}/* 去除所有元素預設的內外邊距的值 */
    html, body {height: 100%;}/* 預設HTML，body的高度為0，為其設定高度以使後面的div可以用百分比設定高度 */
    
    .pinzi-flex {position: fixed;left: 0;top: 0;height: 100%;width: 100%;}
    .header {height: 50%;}
    .header .div-up {width: 50%;height: 100%;background-color:  rgb(255,2545,167);margin: 0 auto;}
    .main {height: 50%;position: relative;}
    .main .div-left {position: absolute;left: 0; width: 50%;height: 100%;background-color: rgb(204,255,102);}
    .main .div-right {position: absolute;right: 0; width: 50%;height: 100%;background-color: rgb(189,255,255);}
</style>

<div class="pinzi-flex">
    <div class="header">
	    <div class="div-up"></div>
    </div>
    <div class="main">
	    <div class="div-left"></div>
	    <div class="div-right"></div>
    </div>
</div>

<!--自己的方案 使用flex-->
<style>
        * {margin: 0;padding: 0;}
        html, body {height: 100%;}
        .box {
            width: 100%;
            height: 100%;    
        }
        .box_up {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: center;
        }
        .box1 {
            width: 50%;
            background:red;
        }
        .box_down {
            width: 100%;
            height: 50%;
            display: flex;
        }
        .box2 {
            width: 50%;
            background:blue;
        }
        .box3 {
            width: 50%;
            background:green;
        }
    </style>
    
    <div class="box">
        <div class="box_up">
            <div class="box1"></div>
        </div>
        <div class="box_down">
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
    </div>
複製程式碼

14. 常見相容性問題？怎麼解決？

最主要也是最常見的，就是瀏覽器對標籤的預設支援不同，所以我們要統一，就要進行CSS reset . 最簡單的初始化方法是 *{margin:0; padding:0;} 但不推薦，而且它也並不完善。
IE6下浮動元素的雙邊距問題,需要給浮動元素的它設定display: inline。
chrome下預設會將小於12px的文字強制按照12px來解析。解決辦法是給其新增屬性：-webkit-text-size-adjust: none;。
上下margin重合問題，相鄰的兩個div margin-left margin-right不會重合，但相鄰的margin-top margin-bottom會重合。

1.外層padding 2.透明邊框border:1px solid transparent; 3.絕對定位postion:absolute 4.外層DIV overflow:hidden; 5.內層DIV&emsp;加float:left;display:inline; 6.外層DIV有時會用到zoom:1;

因為存在兩種盒子模式：IE盒子模式和W3C標準模式，所以物件的實際寬度也要注意。
滑鼠的手勢也有問題：FireFox的cursor屬性不支援hand，但是支援pointer，IE兩個都支援；所以為了相容都用pointer。
消除ul、ol等列表的縮排時，樣式應寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對IE有效，padding屬性對FireFox有效。
有些時候圖片下方會出現一條間隙，通常會出現在FF和IE6下面,一般給img新增vertical-align屬性即可，比如 img{verticle-align:center;}。

15. CSS中visibility屬性的collapse屬性值有什麼用？在不同瀏覽器下有什麼區別？、

對於一般的元素，它的表現跟display:hidden是一樣的。
但例外的是，如果這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現卻跟display: none一樣，也就是說，它們佔用的空間也會釋放。
在谷歌瀏覽器裡，使用collapse值和使用hidden值沒有什麼區別。
在火狐瀏覽器、Opera和IE11裡，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。

16. 如何適配移動端的適配?

首先在head裡新增viewport --- 視口。
使用 em rem vw wh等單位。
使用媒體查詢media query 珊欄佈局等

        @media (max-width: 375px){
            html{
                font-size:24px;
            }
        }
        @media (max-width: 320px){
            html{
                font-size:20px;
            }
        }
        @media (max-width: 640px){
            .intro{
                margin:.3rem auto;
                display: block;
            }
        }
複製程式碼

在設計上,儘量的隱藏、折行、自適應。

17. 如何修改chrome記住密碼後自動填充表單的黃色背景？

chrome表單自動填充後，input文字框的背景會變成黃色，原因在於chrome會預設給自動填充的input表單加上input:-webkit-autofill私有屬性，然後對其賦予以下樣式：

input:-webkit-autofill {
    background-color: #FAFFBD;
    background-image: none;
    color: #000;
}
複製程式碼

方法一: 使用足大的內陰影覆蓋原來的顏色

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    border: 1px solid #CCC!important;
}
複製程式碼

關閉自動填充功能

<!-- 對整個表單設定 -->
<form autocomplete="off" method=".." action="..">
<!-- 或對單一元素設定 -->
<input type="text" name="textboxname" autocomplete="off">

複製程式碼

18. 請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式

float脫離了文件流，但是不脫離文字流
為什麼要清除：因為子元素為浮動空間不在父元素的浮動範圍之內（不會佔據父元素的浮動空間），有可能浮動的元素會超出父元素，造成父級高度塌陷，從而對其他元素造成影響。
方法: 父級元素加上 overflow：hidden（auto）, 在父級元素後面加上 ::after{clear:both,dispaly:block}

19. CSS優化、提高效能的方法有哪些？

釋出前壓縮css程式碼，減少資料傳輸量
合併屬性，比如margin-left margin-top 合併成一條。
移除不必要的選擇器，儘量去除屬性選擇器，全域性選擇器等。
減少低效程式碼的使用，如濾鏡，import等
對於小圖片可以使用base64或者雪碧圖等功能。

20. 全屏滾動的原理是什麼？用到了CSS的那些屬性？

原理：方法一是整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那麼高度是500% ，只是展示100%，剩下的可以通過transform進行y軸定位，也可以通過margin-top實現。
overflow：hidden;
transition：all 1000ms ease;
css滾動原理

21. font-style屬性可以讓它賦值為“oblique” oblique是什麼意思？

oblique表示傾斜的文字
對於沒有斜體字的文字使用oblique實現傾斜效果

22. overflow: scroll時不能平滑滾動的問題怎麼處理？

主要是出現在iphone的瀏覽器上，以下程式碼可解決這種卡頓的問題：-webkit-overflow-scrolling: touch;，是因為這行程式碼啟用了硬體加速特性，所以滑動很流暢。
還可以使用外掛 iScroll

23. 有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。

<style type="text/css">  
        html,
        body { height: 100%; padding: 0; margin: 0; }
 
         /* margin: 100 100 100 100
        上右下左
        margin 100 90 100
        上100 左右 90 下 100
        margin 100 80
        上下 100 左右 80 */
        /*方案一*/
      
        .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
        .A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
        .B { height: 100%; background: #D9C666; }
 
        /*方案二*/
        /* .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
        .A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
        .B { height: 100%; background: #D9C666; } */
 
        /* 方案三 */
        /* .outer { height: 100%; position: relative; }
        .A { height: 100px; background: #BBE8F2; }
        .B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; } */
</style>    
    
 <div class="outer">
        <div class="A"></div>
        <div class="B"></div>
 </div>
複製程式碼

24. 如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）

多數顯示器預設頻率是60Hz，即1秒重新整理60次，所以理論上最小間隔為(1/60)*1000ms ＝ 16.7ms

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

height是基於容器的高度
margin-top 、margin-bottom是根據容器的寬度
line-height是根據容器的font-size

26. 瀏覽器是怎樣解析CSS選擇器的？

從右至左解析CSS選擇器

27. 怎樣實現3D變換？

首先要加上透視角度 perspective:500px;
然後要開啟3D變換效果 transform-style: preserve-3d;
最後使用transform 進行3D的組合 transform： translate rotate .......

28.如何產生不佔空間的邊框

box-shadow box-shadow: 0 0 0 5px green;
box-sizing:border-box 這種情況容器的寬度包含邊框

29. css動畫的種類

補間動畫 trasition:監控的屬性動畫的時間動畫的function
關鍵幀動畫

<style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            animation: run 1s linear;
            /* 動畫的方向 */
            /* animation-direction: reverse; */
            /* 動畫可以停在結束或者開始的狀態 backward */
            /* animation-fill-mode: forwards; */
            /* 無限迴圈 或者指定數字即為迴圈的次數 */
            /* animation-iteration-count: infinite; */
            /* 播放狀態 paused 為停止動畫 */
            /* animation-play-state: paused; */
        }
        @keyframes run{
          /* from{width: 100px;} */
            0%{width: 100px;}
            50%{width: 800px;}
            100%{width: 100px;}
            /* to{width: 100px;} */
        }
    </style>
    
    <div class="container">
    </div>
複製程式碼

逐幀動畫去掉關鍵幀的補間使用 animation-timing-function: steps(1);

 <style>
        .container{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background: url(./animal.png) no-repeat;
            animation: run 1s infinite;
            animation-timing-function: steps(1);
        }
        @keyframes run{
            0%{background-position: 0 0;}
            12.5%{background-position: -100px 0;}
            25%{background-position: -200px 0;}
            37.5%{background-position: -300px 0;}
            50%{background-position: 0 -100px;}
            62.5%{background-position: -100px -100px;}
            75%{ background-position: -200px -100px;}
            87.5%{background-position: -300px -100px;}
            100%{background-position: 0 0;}
        }
    </style>
    
     <div class="container">
    </div>
複製程式碼

30. CSS動畫的效能

效能不壞。
部分情況由於js
但是js可以做到更好
部分高危屬性 box-shadow等效能較差

前端面試(css部分)
2019-02-02
前端面試CSS
前端面試題-CSS Hack
2019-02-16
前端面試題CSS
前端面試筆記 – css
2019-02-16
前端面試筆記CSS
前端面試題 | CSS篇
2019-04-11
前端面試題CSS
前端面試題 -- HTML+CSS
2019-03-16
前端面試題HTMLCSS
前端面試2：CSS盒模型
2018-12-05
前端面試CSS模型
前端面試1：CSS佈局
2018-12-05
前端面試CSS
前端面試資料整理【css篇】
2022-04-30
前端面試CSS
前端面試之路一(HTML+CSS面試整理)
2018-11-30
前端面試HTMLCSS
前端面試&筆試&錯題指南（二）
2018-07-24
前端面試筆試
騰訊前端面試篇（二）
2018-12-22
前端面試
前端面試題集結號之CSS
2018-03-15
前端面試題CSS
常見前端面試題整理——HTML、CSS篇
2018-08-10
前端面試題HTMLCSS
前端面試基礎手冊（HTML+CSS）
2018-07-29
前端面試HTMLCSS
前端面試（個人收藏總結）CSS篇
2018-04-06
前端面試CSS
2020 前端面試 | 第二波面試題總結
2020-02-13
前端面試題
CSS面試題（二）
2020-10-19
CSS面試題
前端面試經典題目合集（HTML+CSS）
2018-06-16
前端面試HTMLCSS
2019年底前端面試及答案-html/css
2020-02-12
前端面試HTMLCSS
前端面試題1---css的居中方式
2020-12-07
前端面試題CSS
前端面試問題二（持續更新）
2019-02-28
前端面試
前端面試之路二(javaScript基礎整理)
2019-02-12
前端面試JavaScript
面試福利—最強前端面試題（二）(含答案)
2018-09-26
前端面試題
重整旗鼓，2019自結前端面試小冊【CSS + HTML】
2019-12-26
前端面試CSSHTML
noah的前端面試題（二）｜掘金技術徵文
2018-04-08
前端面試題
前端面試（個人收藏總結）javascript篇（二）
2018-04-08
前端面試JavaScript
面試前如何準備才能提高成功率（含前端面試押題）
2019-02-21
面試前端
前端面試
2018-12-19
前端面試
前端面試查漏補缺--(二) 垃圾回收機制
2019-02-22
前端面試
【面試】前端面試題
2018-11-16
前端面試題
前端面試集合
2019-01-22
前端面試
前端面試大全
2019-02-16
前端面試
前端面試自查
2019-02-13
前端面試
python後端面試
2018-08-29
Python後端面試
前端面試系列
2019-02-01
前端面試
前端面試題
2024-12-05
前端面試題
前端面試(演算法篇) – 二分法
2018-08-15
前端面試演算法
一年前端面試打怪升級之路（二）
2018-03-02
前端面試

前端面試二（CSS）

1. CSS選擇符有哪些？ 哪些屬性可以繼承？ 優先順序演算法如何計算？ 內聯和important哪個優先？

2. CSS新增哪些偽類？

3、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

4、為什麼圖片下面有空隙，怎麼去除，原理是什麼？

5. 行高是基於什麼組成的？要設定一段文字在容器中垂直居中怎寫？

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

7. 怎麼讓一個很長的文字不換行?

8. 如何美化checkbox

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

10. 為什麼要初始化CSS樣式?

11. 使用inline-block之後，li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

12. 請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

13、一個滿屏 品 字佈局 如何設計?

14. 常見相容性問題？怎麼解決？

15. CSS中visibility屬性的collapse屬性值有什麼用？在不同瀏覽器下有什麼區別？、

16. 如何適配移動端的適配?

17. 如何修改chrome記住密碼後自動填充表單的黃色背景 ？

18. 請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式

19. CSS優化、提高效能的方法有哪些？

20. 全屏滾動的原理是什麼？用到了CSS的那些屬性？

21. font-style屬性可以讓它賦值為“oblique” oblique是什麼意思？

22. overflow: scroll時不能平滑滾動的問題怎麼處理？

23. 有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。

24. 如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）

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

26. 瀏覽器是怎樣解析CSS選擇器的？

27. 怎樣實現3D變換？

28.如何產生不佔空間的邊框

29. css動畫的種類

30. CSS動畫的效能

相關文章

1. CSS選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？內聯和important哪個優先？

13、一個滿屏品字佈局如何設計?

17. 如何修改chrome記住密碼後自動填充表單的黃色背景？